Screens, as we all know, are made up of pixels. The essence of animation is the translation, rotation, scaling and other related operations of pixels within elements. How to express the relevant operations in mathematical form, and restore them by computer, this time needs to be described by the rotation matrix. In this chapter, we will use some mathematical formulas to understand how to describe the animation process through rotation matrices. Let’s take the two-dimensional plane as an example to expand the discussion.

1. Homogeneous coordinates

In the homogeneous coordinate field, there is a definite conclusion, in two dimensions

Point: use (x, y, 1) to represent a fixed coordinate point vector in the coordinate system; use (x, y, 0) to represent a directed line segment in the coordinate systemCopy the code

And then the third component difference is 0 and 1. The point is the point, the vector is the direction.

2. Matrix multiplication

The prerequisite for multiplying two matrices is that the columns of the first matrix are equal to the rows of the second matrix, and the result is the rows of the first matrix x and the columns of the second matrix, i.e

 nxm * mxk = nxk
Copy the code

3. Translation

If we take a point (x,y,1), we know that if we shift a point by 3 on the x axis and 4 on the y axis, the result is (x+3,y+4,1). We’re using column vectors to represent points, and we know from the matrix multiplication above that we need to construct a 3 by 3 matrix, and multiply it by the column vectors, to get a new 3 by 1 column vector

That is, the formula is as follows:

A b c x x x+3 (d e f) * (y) = (y+4) g h I 1 A = 1, b = 0, c = 3, d = 0, e = 1, f = 4, g = 0, h = 0, I = 1 so the matrix is 1, 0, 3, 1, 0 dx (0, 1, 4) === = the translation matrix is ===> (0, 1 dy) 0, 0, 1, 0, 0 1Copy the code

And you can see that you shift a pixel dx dy. You construct an upper matrix, multiply it by the vector to get a new point

4. Zoom in

If we take a point (x,y,1), we know that a point is scaled by 3 times on the x axis and 4 times on the y axis, and the result is 3x,4y,1. Similarly, we need to construct a 3×3 matrix, and multiply it by the column vectors, and we get a new result

That is, the formula is as follows:

Ax + by + c = 3x dx + ey + f = 4y gx + hy + I = 1 A = 3 b = 0 C = 1 d = 0 e = 4 f = 0 G = 0 h = 0 I = 1 So the resulting matrix is 3 0 0 A 0 0 (0 4 0) === scaling matrix ===> (0 b 0) 0 0 1 0 0 1Copy the code

As you can see, take a pixel and make it x by a factor and y by b. You construct an upper matrix, multiply it by the vector to get a new point

5. Rotating

Consider a point (x,y,1), and we know that we rotate it b degrees around the point. Here’s a picture of what happens when you rotate it

That is, the formula is as follows:

Before rotation: x1 = r*cosa y1 = r*sina after rotation:  x2 = r*cos(a+b) = r*cosa*cosb - r*sina*sinb = x1*cosb - y1*sinb y2 = r*sin(a+b) = r*sina*cosb + rcosa*sinb = y1*cosb + x1*sinb a b c x1 x2 ( d e f ) * ( y1 ) = ( y2 ) g h i 1 1 a * x1 + b * y1 + c = x2 d * x1 + e * y1 + f = y2 g * x1 + h * Y1 + I = 1 yields a=cosb b=-sinb c=0 d=sinb e=cosb f=0 g=0 h=0 I = 1 so the resulting rotation matrix is: (where b is the rotation Angle) cosine b minus sine b 0 (sine b cosine b 0) 0, 0, 1Copy the code

6. Affine transformation

Affine transformation is a mathematical expression, combined by the above matrix transformation, which can be used to multiply the left point column vector to represent the transformation of pixels

Note: the left multiplication is usually the first scaling, rotation transformation, and then the translation transformation, for example

For the pixel point (3,4,1) -, the positive direction of X-axis should be shifted by 1 unit, and the positive direction of Y-axis should be shifted by 2 units. The X-axis should be enlarged by 2 times and the axis should be enlarged by 1 times. Translation, and then transform 2 0, 1,0,2 3 to 10 (0, 0) * (0) * (4) = 0, 1, 0, 1 1 1 (12) can be seen that the results The value of the translation also magnified 2 times 2. 1,2, 2,0,0 3 8 (0,1,2) * (0,2,0) * (4) = (10) 0,0,1, 0,0,1,1, 1Copy the code

The summary rotation matrix is shown below

A 0 dx rotation matrix is equal to 0 b dy 0, 0, 1Copy the code

Where a and b together affect rotation and scaling,dx and dy affect displacement