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 radians, or one complete revolution. And because we’re using linear interpolation, the rotation changes gradually and *linearly* as the parameter *p* varies from 0 to 1.

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!

## One thought on “Making Movies with Processing IV”