MatricesTransformations

When we play video games with 3d graphics, what we are really looking at are millions of tiny triangles. Everything from the mountains and grass that make up the environment, to the goblins that guard the precious treasure, to the spaceship that you pilot through an asteroid belt, is made up of many small triangles. The computer in your video game console runs trillions of computations to figure out how each shape will be displayed on the screen.

What kind of computations is our computer performing? Before we try displaying intricate three-dimensional landscapes and characters, let's imagine we want to draw a 2d spaceship that we can rotate to shoot incoming asteroids.

Here is our humble spaceship. Like the shapes displayed in video games, we can represent our spaceship as a collection of points, with lines connecting them. We can draw it on the xy coordinate plane, centered on the origin, with each point labelled as an (x, y) value.

Here the point A has coordinates (, ).

We would like to give our spaceship the ability to rotate in place, so the player can point it at incoming asteroids. This rotation is something we call a transformation. Let's notify the Rotation of the spaceship through angle θ as Rθ.

P1,P2,P3,P4,P5,P6 --- Rθ ---> P1’,P2’,P3’,P4’,P5’,P6’ {.fixme} Could be nice with hover points to graphic.

Each point Pn has the transformation Rθ applied to it, which rotates the point around the origin to get point Pn’ (pronounced "P n prime").

Here is a spaceship we can rotate by ${phi + 'º'} around the origin.

Here are some things we can say about the shape of our spaceship as it rotates:

The spaceship must retain its shape.
The spaceship will have the same size.
It does not move up and down.

We would like a formula to convert any point P into its rotated point P’.

Let's start by calculating this formula for two different points.

Calculating the rotation of two points

For our two points, let's pick A = 0,3 and B = 2,0. We can determine the formulas for their rotation θ around the origin one at a time.

(0,3)

If we rotate the point A at (0,3) ${t1 + 'º'} around the origin, it has a new x,y value. We can call our rotated point A' (A prime), with coordinates x’,y’ (x prime and y prime).

What is a formula to get the new coordinates for A’? We can call our new x value x', and our new y value y'. Both x' and y' will be dependent on the length of A, which is 3.

These points form a right triangle, so we can draw upon our knowledge of trigonometry to find the formulas for x' and y'.

This might be confusing for theta > 90º

Our x' value is the opposite of the known angle, so we can use the formula for sine to determine that:

x’=3·

Our y' value is the adjacent side of a right triangle, so we can use the formula for cosine to determine that:

y’=3·

(2,0)

Let's look at another point. If we rotate the point B at (2,0) ${t2 + 'º'} around the origin, it has a new x,y We can call our rotated point B' (B prime), with coordinates x’,y’ (x prime and y prime).

What is a formula to get the new coordinates for B’? We can call our new x value x', and our new y value y'. Both x' and y' will be dependent on the length of B, which is 2.

These points form a right triangle, so we can draw upon our knowledge of trigonometry to find the formulas for x' and y'.

This might be confusing for theta > 90º

Our x' value is the adjacent side of the known angle, so we can use the formula for cosine to determine that:

x’=2·

Our y' value is the opposite side of the known angle, so we can use the formula for sine to determine that:

y’=2·

We now have equations for the x’,y’ coordinates of the two points A’ and B’. We still have four more rotated points to calculate (C’, etc), but is there a shortcut where we can use what we already have?

Name	xy	Rotated	Rxy
A	(0, 2)	A'	(-2sin(θ), 2cos(θ))
B	(3, 0)	B'	3cos(θ), 3sin(θ))
C	2,-2	C'
D	0,-1	D'
E	-2,-2	E'
F	-2,0	F'

Table needs to look a lot nicer.

Remember from our last course on vectors that any vector can be treated as a linear combination of the two unit vectors i and j.

We can use the formulas we calculated for rotations of A and B to find the rotation for any other point! A lies along the y-axis so it is just a scaled version of the unit vector , and B lies upon the x-axis so it is just a scaled version of the unit vector .

When we divide the lengths of A and B from the respective coordinates in A' and B', we can get the formulas for the rotations of the unit vectors.

What kind of notation should we use? Unit Vectors? Points?

1,0 becomes sinθ,−cosθ and 0,1 becomes cosθ,sinθ.

We can then write the equation for any rotated point by writing it as a linear combination of the unit vectors.

for x’...

x’=x·cosθ−y·sinθ

for y’...

y’=x·sinθ+y·cosθ

We can rewrite this as a new vector.

x’y’ = x·cosθ−y·sinθx·sinθ+y·cosθ

Notice that both x' and y' are dependent on x and y.

Matrices

Mathematicians came up with a very powerful concept called a matrix, that can help us write this in a new way. A matrix is like a spreadsheet table, with cells each containing their own numbers.

This matrix has 2 rows and 2 columns so it is a 2x2 matrix, but they can be any size.

cosθ−sinθsinθcosθ

We can rewrite our calculations for the coordinates x’ and y’ in the following way:

x’y’ = cosθ−sinθsinθcosθ x xy = x·cosθ−y·sinθx·sinθ+y·cosθ

This is a matrix multiplication, wherein we multiply a matrix times a vector x,y to get a new vector x’,y’. This matrix is the transformation Rθ that we have been looking for! When we change the values within this matrix, we can change the transformation.

Here is another representation:

cosθ	-sinθ
sinθ	cosθ

cosθ * x

-sinθ * y

sinθ * x

cosθ * y

Activity where student can drag slider to adjust θ and the matrix values are updated (up to two decimal points).

Hover x and Hover y

Stronger Connection between matrices and what it means to be a "transformation"

Identity Matrix

What if for our matrix, we wrote this instead?

1001

What happens when we apply this transformation to the vector xy?

1001 x xy = 1·x+0·y0·x+1·y = xy

The student should fill in these values on their own.

This transformation the vector xy.

x’=x and y’=y

For any vector, the result of the transforation will be the same. This is called the identity matrix, because its product with any 2x1 vector is that identical 2x1 vector. This is much like 1 is the identity function for integer multiplication (1xn=n) and 0 is the identity function for addition (0+n=n).

We have already seen how we can multiply a vector by a 2x2 matrix to rotate that vector about the origin, and we have seen how the identity matrix leaves the vector unchanged. What other transformations exist?

Scale

What if we adjust the top-left and bottom-right numbers of our transformation matrix?

${xscale}	0
0	${yscale}

Changing the top-left value scales x' along the x-axis.

Changing the bottom-right value scales y' along the y-axis.

a00d x xy = a·x+0·y0·x+d·y = axdy

formatting and input.

Add some code that lets us snap to x-big, x-shrink, x-reverse, y-big, y-shrink, y-reverse, etc.

Reflections

What happens when we make the top-left and bottom-right values negative or positive?

Adjust the matrix to see how it changes in the coordinates.

${xreflect}	0
0	${yreflect}

Flipping the sign of the top-left value reflects the transformation across the , and flipping the sign of the bottom-right value reflects the transformation across the .

a00d x xy = a·x+0·y0·x+d·y = axdy

formatting and input.

Shear

What if we adjust the values in the top-right and bottom-left corners of the matrix?

Adjust the matrices to see how they change the transformations.

A shear in the x direction.

1	${xshear}
0	1

1b01 x xy = x+byy

formatting and inputs

A shear in the y direction.

1	0
${yshear}	1

10c1 x xy = xcx+y

formatting and inputs

Now add some buttons and code that make it snap to a set of matrix values.

These types of transformations are called shear transformations, because they shear the coordinate system in a perpindicular proportion (?phrasing?).

Other

Of course, matrices can have any values in them, and thus can transform in many ways. Play with the values here and see how the transformation is still some combination of the basic transformations.

Free reign to do whatever they want. Or just keep this separate, as shown below.

Try adjusting the values in the matrix and see what kind of transformations you can make!

Here we display the i and j unit vectors. Inside the matrix we have i = (${ipoint.x}, ${ipoint.y}) and j = (${jpoint.x}, ${jpoint.y})

Choose one of these buttons to snap to different transformations.

IDENTITY

SHEAR

SCALE

ROTATE

LINE

How does this relate to video games?

Video games can manipulate and millions of shapes per second with use of a Graphical Processing Unit (GPU). GPUs are specially designed to perform many matrix multiplications at once.

You may have noticed we have not discussed one type of transformation. We cannot move our shapes through space! To transform our shapes so they are centered anywhere but the origin, we need a special kind of matrix called a Translation Matrix.

10dx01dy001

We add an extra row and column to our 2x2 matrix, and we add an extra row to our vector (which will not change).

The factor dx will be multiplied by 1 and added to the final x' value. The factor dy will be multiplied by 1 and added to the final y' value.

10dx01dy001 x xy1 = x+dxy+dy1

Focus effects.

Possibly an interactive like ncase?

Matrices do not have to represent transformations in 2 dimensions. They can also exist in 3 or higher dimensions.

This is the identity matrix for three dimensions

100010001 x xyz = xyz

An interaction with a 3d transformation.

Let's mess around with the Mathigon Logo!

${m1a}	${m1b}
${m1c}	${m1d}

${m2a}	${m2b}
${m2c}	${m2d}

${m3a}	${m3b}
${m3c}	${m3d}

${m4a}	${m4b}
${m4c}	${m4d}

Possible Activities: switch Orange and Green, reflect/scale the whole thing, make shapes.

Share

Reset Progress

Glossary