Matrix multiplication

Also known as the dot product, AxB is equal to C

Rules:

  1. A and B can be multiplied only when the number of columns of A is equal to the number of rows of B
  2. The number of rows of C is equal to the number of rows of A, and the number of columns of C is equal to the number of columns of B, that is, AC is the same height, BC is the same width.
  3. C(m,n) = A(m,1) x B(1,n) + A(m,2) x B(2,n) + …

What does this thing do?

Suppose we have a square of 1×1 with the lower left corner just at the origin:

I want to make it twice as big and look like this:

What should be done?


[ x y ] [ 2 0 0 2 ] = [ 2 x + 0 y 0 x + 2 y ] = [ 2 x 2 y ] \begin{bmatrix} x & y \end{bmatrix} \begin{bmatrix} 2 & 0\\ 0 & 2 \end{bmatrix} = \begin{bmatrix} 2x+0y & 0x + 2y \end{bmatrix} = \begin{bmatrix} 2x & 2y \end{bmatrix}

The changes of each vertex are as follows:

  • (1, 1) = > (2, 2)
  • (1, 0) = > (2, 0)
  • (0, 1) = > (0, 2)
  • (0, 0) = > (0, 0)

What if I just extend x? As follows:

What should be done?


[ x y ] [ 2 0 0 1 ] = [ 2 x y ] \begin{bmatrix} x & y \end{bmatrix} \begin{bmatrix} 2 & 0\\ 0 & 1 \end{bmatrix} = \begin{bmatrix} 2x & y \end{bmatrix}

The changes of each vertex are as follows:

  • (1, 1) = > (2, 1)
  • (1, 0) = > (2, 0)
  • (0, 1) = > (0, 1)
  • (0, 0) = > (0, 0)

At this point, we find that


[ 2 said x The change of the 0 0 1 said y The same ] \begin{bmatrix} 2 = x &0 \\ 0&1 = y \end{bmatrix}

What if as x grows, y grows slowly?

How to do?


[ x y ] [ 2 1 0 1 ] = [ 2 x x + y ] \begin{bmatrix} x & y \end{bmatrix} \begin{bmatrix} 2 & 1\\ 0 & 1 \end{bmatrix} = \begin{bmatrix} 2x & x+y \\ \end{bmatrix}

The changes of each vertex are as follows:

  • (1, 1) = > (2, 2)
  • (1, 0) = > (2, 1)
  • (0, 1) = > (0, 1)
  • (0, 0) = > (0, 0)

So far, we see that the 1 in the upper right is the change in y as x changes. This quantity plus the quantity of y itself, you get x plus y.

Similarly, the 0 in the bottom left is the change in x as y changes.

Such as


[ x y ] [ 2 0 1 1 ] = [ 2 x + y y ] \begin{bmatrix} x & y \end{bmatrix} \begin{bmatrix} 2 & 0\\ 1 & 1 \end{bmatrix} = \begin{bmatrix} 2x+y & y \\ \end{bmatrix}

The changes of each vertex are as follows:

  • (1, 1) = > (3, 1)
  • (1, 0) = > (2, 0)
  • (0, 1) = > (1, 1)
  • (0, 0) = > (0, 0)

When you connect the dots, you get something like this:

This means that in addition to doubling in the x direction, the square is tilted 45 degrees in the Y direction.

At this point, we find that


[ x in x Change in the axis y in x Change in the axis x in y Change in the axis y in y Change in the axis ] \begin{bmatrix} change in x & change in y & change in y \end{bmatrix}

The simpler notation is:


[ x = > x shaft y = > x shaft x = > y shaft y = > y shaft ] \ begin {bmatrix} x = > x & y = > x \ \ x = > y & y = > y \ end {bmatrix}

So now we know how the square scales and tilts are represented by matrix multiplication, but what about translation?

Is the translation directly added to the final (x,y)?

So let’s extend the matrix:


[ x = > x shaft y = > x shaft x = > y shaft y = > y shaft x Fixed incremental y Fixed incremental ] \ begin {bmatrix} x = > x & y = > x \ \ x = > y & y = > y \ \ x fixed increment & y fixed incremental \ end {bmatrix}

Does that shift x and y?

But review the previous rule:

A and B can be multiplied only when the number of columns of A is equal to the number of rows of B

If we increase the number of rows in B, we have to increase the number of columns in A, so we have to add A 1 after x and y


[ x y 1 ] [ 1 0 0 1 10 10 ] = [ x + 10 y + 10 ] \begin{bmatrix} x & y & 1 \end{bmatrix} \begin{bmatrix} 1 & 0\\ 0 & 1 \\ 10 & 10 \end{bmatrix} = \begin{bmatrix} x+10 & y+10 \\ \end{bmatrix}

But why is it that (x,y,1) becomes (x plus 10,y plus 10) minus one place? To make the number of columns on both sides equal (just for symmetry’s sake), we simply add another column to B:


[ x y 1 ] [ 1 0 0 0 1 0 10 10 1 ] = [ x + 10 y + 10 1 ] \begin{bmatrix} x & y & 1 \end{bmatrix} \begin{bmatrix} 1 & 0 & 0\\ 0 & 1 & 0\\ 10 & 10 & 1 \end{bmatrix} = \begin{bmatrix} x+10 & y+10 & 1 \\ \end{bmatrix}

Ok, so we have successfully changed (x,y,1) to (x+10,y+10,1), which is 10 pixels in the x and y directions respectively!

So how do you rotate 45 degrees clockwise about your center?

It looks like x and y change depending on the rotation, and we’re going to have to use trigonometric functions like sine and cosine, which we won’t do in detail, but we can certainly do rotations with our current 3 by 3 matrix.

Similarly, if you want to transform (x,y,z), you need a 4×4 matrix to multiply.

This is the principle of CSS Matrix 3D transformation, you learn to waste?