Page 4: Rotation

Time for the next transformation: Rotation. Spinning things around.

Rotation will turn out to have all sorts of complexity to it - especially when we get to 3D.

But the basic idea is simple: we spin an object around some point.

Rotations are a rigid transformation: they do not change the distances between points. Translation is also a kind of rigid transformation.

If translation is sliding the paper you’re drawing on in some direction, scaling is stretching it, then rotation is turning it by some amount.

Box 1: Rotation

When you rotate, there is always one point that you spin around: the center of rotation. By convention, this is the center of the coordinate system.

With Canvas, the rotation command measures the amount of rotation in radians, measured clockwise.

The code for this example is in 03-04-01.html and 03-04-01.js. Of course, we can change coordinate systems to move the origin to the center of the window so we can see what is going on. Here, we are drawing the coordinate axes (x=0 and y=0) before we do the rotation. Make sure to look at the code to understand the change of coordinate system!

Just like with scaling and translation, rotation can be viewed as either rotating the object or rotating the coordinate system.

Box 2: Center of Rotation

Just like with scaling, the center of rotation (the point that does not move) is at the center of the coordinate system.

We often like to rotate about the center of an object - which means we need to change coordinate systems! We move the object so that the center (the point we want to rotate around) is at the origin of the coordinate system, we rotate, we then move the object back. We can view this as: move the coordinate system to the object’s center, rotate the coordinate system, move the coordinate system back to where it came from. The latter may still feel weird to you, but since the commands operate on coordinate systems, the code will read in the correct direction.

Here are a bunch of squares in different places, rotating around different centers. You should be able to guess what the code looks like, but you should read it anyway ( 03-04-02.html and 03-04-02.js).

Make sure you understand this! There is a “Rotate around object center” example in the 2D Transform Toy (default demos).

Making good use of center of rotation is an important tool in making objects that move correctly. It’s also useful in positioning things.

Box 3: An Actual Picture

This time, we’ll make something that you might actually want to make rotate: a simple windmill.

The code for this example is in 03-04-03.html and 03-04-03.js. It isn’t great landscape art, but it makes a few points.

Most obviously is that it uses rotation to make the mills spin. But it also uses rotate to build the fans: we have code that makes one blade, and then we rotate that blade into 3 other places to make the 4 bladed fan. We talked about instancing on a prior page, but this is an example.

Notice how the picture is built up from parts. The scene is made from windmills. The windmills are made from a body and a propeller. A propeller is made from four of blades. Each blade has two pieces.

The idea of building up objects from parts is called hierarchical modeling. Any object is made up of other objects. Until at some point we get to primitives.

Coordinate systems and transforms are critical for hierarchical modeling. Each object has its own coordinate system. When a part is placed inside of a containing object, a transformation is used to rotate, translate, and/or scale things into place. In the future, we will use other transformations, too.

Hierarchical modeling makes it easier to build objects. It also makes it easier to change or animate objects - for example, by having the windmill fan as a separate piece, we can rotate it.

Notice how the composition of transformations means that changes we make to a part get properly placed in the whole. The windmill fan rotates about its center. But that gets moved to the correct place on the windmill. And the windmill gets moved to the right place in the scene.

Box 4: The arm bone is connected to…

Here’s another example of hierarchical modeling: a stick figure arm. Each piece will be simple, but once we put them together, we can always improve how they look.

The code for this example is in 03-04-04.html and 03-04-04.js. You can read the code to see how it works - and how I made the demo showing different views of the same objects. It is important to understand these ideas of hierarchical modeling in the simple cases, before we move on to complex ones.

A hierarchical model that consists of rigid pieces that rotate relative to each other (such as this arm, or even the windmill) is referred to as an articulated object. Sometimes the term is used more general for an object that has a set of pieces that move relative to each other. This concept is relevant outside of graphics - articulated robots, such as robot arms, can be represented in much the same way (in three dimensions).

Summary

We’ve seen rotations, and how we use transformations to build hierarchical models.

These are both important concepts that will not go away.

We’ll look at a slightly more complex example on the next page.

Next: Hierarchy