Last week, we saw how using linear interpolation allowed us to create animations of fractals. This week, we’ll explore how to create another special effect by using linear interpolation in a different way. We’ll build on last week’s example, so you might want to take a minute to review it if you’ve forgotten the details.
Let’s suppose that in addition to morphing the Sierpinski triangle, we want to slowly rotate it as well. So we insert a rotate command before plotting the points of the Sierpinski triangle, as shown here:
First, it’s important to note that the rotate command takes angles in radian measure, not degrees. Recall from your trigonometry classes that
But different from your trigonometry classes is that the rotation is in a clockwise direction. When you studied the unit circle, angles moved counter-clockwise around the origin as they increased in measure. This is not a really complicated difference, but it illustrates again how not every platform is the same. I googled “rotating in processing” to understand more, and I found what I needed right away.
Let’s recall that p is a parameter which is 0 at the beginning of the animation, and 1 at the end. So when p = 0, there is a rotation of 0 radians (that is, no rotation), and when p = 1, there is a rotation of 
Let’s see what effect adding this line has. (Note: Watch the movie until the end. You’ll see some blank space in the middle — we’ll explain that later!)
What just happened? Most platforms which have a rotate command assume that the rotation is about the origin, (0,0). We learned in the first post that the origin in Processing is in the upper left corner of the screen. If you watch that last video again, you can clearly see that the Sierpinksi triangle does in fact rotate about the upper left corner of the screen in a clockwise direction.
Of course this isn’t what we want — since most of the time the fractals are out of the view screen! So we should pick a different point to rotate around. You can pick any point you like, but I though it looked good to rotate about the midpoint of the hypotenuse of the Sierpinski triangles. When I did this, I produced the following video.
So how did I do this? It’s not too complicated, but let’s take it one step at a time. We’ve got to remember that before scaling, the fractal fit inside a triangle with vertices (0,0), (0,2), and (2,0). I wanted to make it 450 pixels wide, so I scaled by a factor of 225.
This means that the scaled Sierpinski triangle fits inside a right triangle with vertices (0, 0), (0, 450), and (450, 0). Using the usual formula, we see that the midpoint of the hypotenuse of this triangle has coordinates
To make (225, 225) the new “origin,” we can just subtract 225 from the x– and y-coordinates of our points, like this:
Remember that the positive y-axis points down in Processing, which is why we use an expression like 225 – y rather than y – 225. This produces the following video.
This isn’t quite what we want yet, but you’ll notice what’s happening. The midpoint of the hypotenuse is now always at the upper left corner. As the triangle rotates, most of it is outside the view screen. But that’s not hard to fix.
All we have to do now is move the midpoint of the hypotenuse to the center of the screen. We can easily do this using the translate function. So here is the complete version of the sierpinski function, incorporating the translate function as well:
So let’s briefly recap what we’ve learned. Rotating an image is not difficult as long as you remember that the rotate function rotates about the point (0,0). So first, we needed to decided what point in user space we wanted to rotate about – and we chose (225, 225) so the fractals would rotate around the midpoint of the hypotenuse of the enclosing right triangle. This is indicated in how the x– and y-coordinates are changed in the point function.
Next, we needed to decided what point in screen space we wanted to rotate around. The center of the screen seemed a natural choice, so we used (384, 312). This is indicated in the arguments to the translate function.
And finally, we decided to have the triangles undergo one complete revolution, so that p = 0 corresponded to no rotation at all, and p = 1 corresponded to one complete revolution. We accomplished this using linear interpolation, which was incorporated into the rotate function.
But most importantly — we made these changes in the correct order. If you played around and switched the lines containing the translate and rotate functions, you’d get a different result.
It is worth remarking that it is possible to use the rotate function first. But then the translate function would be much more complicated, since you would have to take into account where the point (384, 312) moved to. And you’d have to review your trigonometry. Here’s what the two lines would need to look like:
As you can see, there is a lot more involved here! So when you’re thinking about designing algorithms to produce special effects, it’s worth thinking about the order in which you perform various tasks. Often there is a way that is easier than all the others — but you don’t always hit upon it the first time you try. That’s part of the adventure!
Next week we’ll look a few more special effects you can incorporate into your movies. Then we’ll look at actual movies made by students in my linear algebra class. They’re really great!
Creativity in Mathematics 