So I'm now going to talk about the optional topic of affine transformations. This topic is a little bit advanced, and it's totally optional, so if you find it too complicated feel free to just skip this topic. So affine transformations are a way to do cool graphical effects on a computer. It basically allows you to distort images in interesting ways. Affine transformations are a specific type of distortion that's useful in 3d animation and things like that.
So let me try to give you an idea of things you can do with affine transformations with a little example. So here's some code for drawing image of the Mona Lisa on the screen.
Now to do an affine transformation, we just add a line before the drawImage() command. We write the command c.scale(3, 1). What this transformation does is it stretches the Mona Lisa, so now looks a lot wider than it normally does. And that's an example of the sorts of graphical effects you can do with these affine transformations.
There are four main affine transformations. The first is called scaling. Scaling let's you stretch or shrink an image vertically or horizontally. The second affine transformation is called translate. Translation is just a way to move an image around. Then, the third type of affine transformation is called rotate. It allows you to rotate images around. The last type is called shear, but this type of affine transformation isn't available in html5. So I'll now cover the first three transformations in more detail.
So here we have an image, and and we have this transformation scale that I showed you before. This scale command has two number inside of it. When using the numbers (1, 1), the image doesn't change at all.
If you were to change the second number to a 2 though, the computer will stretch the image vertically so that it's twice the size.
If instead, you change the *first* number to 2, the computer will instead stretch the image horizontally to twice the size.
If you change the first number to 3, the computer will stretch the image horizontallly to three times its size.
Now if you use a number that's less than one, it will shrink the image. So if you half, you will get an image that's half its normal size.
If you use an even small number like 0.1, it will shrink even more. Notice that we're only changing the first number, so the image only gets shrunk horizontally. If we wanted to shrink the image vertically, we would need to change the second number as well.
An interesting thing happens if you use a negative number. In that case, the image flips. In fact, it flips right off the left side of the screen where you can't see it any more.
What you can do though, is you can change the position of the image so that when it flips, it still shows up on the screen.
So here's the second affine transformation: translation. The translate command just moves the image. If you use translate(0,0), the image doesn't move at all.
If you change the first number, the image moves to the right.
If you change the second number, the image moves down.
The third affine transformation is for rotation. So basically you rotate around the upper left corner of the screen. The command I show here for rotation is a little messy, but basically all you need to know is that the number 30 is the number of degrees that you want to rotate the image. The math beside the number 30 is for converting the number into a form that the computer can understand.
Now one weird thing happens when you try to do more than one transformation. This is where these affine transformations get sort of complicated. So here, let's say we want to translate, scale, rotate, and translate an image. How exactly does that work?
Now it's sort of weird, but the way it works is you actually do the steps backwards.
So if we go backwards, the first thing to do is we draw the image. So here we draw the Mona Lisa.
Then here we try to translate or move the image by -5. So we push the image to the left by five pixels.
Then we have a rotate transformation, which rot ates the whole image by twenty degrees.
Then with the scale transformation, we stretch the image. But it stretches the image after it rotates.
And then by translating, we push the image to the right. So this is the effect of what happens when you do all of these transformations. You go through them backwards, and this is what it looks like.
So let me give you another example. Here's some code for drawing a car from an overhead perspective. So here we load the picture of a car, and we just draw it to the screen. And notice that the car just faces to the right like that.
Let's say we wanted to move the car down to over here and rotate it so that it's pointed in this direction. How do we do that with affine transformations?
Well, here's the code for doing it.
So as you can see, down here we draw the car. And here are the transformations we need to get the car to be in the position where we want it to be. So how do these commands work? Again, you just go through the steps backwards.
So first, the last step is drawImage(), so let's draw the image, and we have the car in the upper-left here.
And then we translate it, so basically we just push the car a little bit to the upper-left.
Then we rotate it. We rotate it by 30 degrees so that it's pointed in the direction we want it to be.
And then we translate it. So we move the car to where we want it on the screen.
So now you can see how these commands are used to move the car over here and rotate it to face the direction that we want it to.
So here's the full code for moving the car to a position and rotating it. And it has examples of all of the transformations that I mentioned before. So why don't you try to adapt this example to do other types of transformations? For example, why don't you try stretching an image? Why don't you try mirroring or flipping an image? Or why don't you try rotating an image around its lower right instead of its upper left?
