Rotating Shapes

Rotation (and Scaling)

You have learned to design your shapes around a center point of (0,0) and then move them on the screen using translate(…). There are two other related functions: rotate(…) and scale(…).

The scale(…) function takes a value that makes all drawings after it bigger or smaller:

  scale(1.0); // no change
  scale(0.5); // everything after is 1/2 as big
  scale(2.0); // everything after is 2x bigger

scale(1.0); // no change

scale(0.5); // everything after is 1/2 as big

scale(2.0); // everything after is 2x bigger

Other values of scale are, of course, possible. If you use scale for a shape or set of shapes, it should be called after translate(…).

The rotate(…) function takes a value that specifies how much shapes should be rotated. It only rotates drawing that you do after you call rotate. It doesn’t rotate everything, only code you write after it and before the next pop() call.

You may be used to thinking of rotation amounts in degrees (0 to 360 for a full circle). The default for rotate(…), though, is radians where the full circle in radians is 3.1415 (PI). We may discuss what this means in a later lesson. For now, if you want to animate something rotating, increment your rotation with a small value like this:

var r=0;
function draw() {
  background(255);
  rectMode(CENTER);
  push();
    translate(300,300);
    rotate(r);
    rect(0,0,50,70);
  pop();
  r = r + 0.1;
}

var r=0;

function draw() {

background(255);

rectMode(CENTER);

push();

translate(300,300);

rotate(r);

rect(0,0,50,70);

pop();

r = r + 0.1;

}

Rotate needs to be called after any call to translate(…). And rotate is really why it is most useful to draw your shapes centered around a (0,0) origin. If you go back to your older sketches where you draw your creature and try to add rotate, you will find things seem to fly all over the place.

Complete Activity 33

The Wheels on the Bus Go Round and Round

Now let’s make something more visually elaborate and combine what we have learned so far.

Instead of moving and animating a creature, you will create a vehicle. Though anything that can have a rotating element is acceptable. The goal is to combine rotation of one part of a set of shapes with the combined movement of all of them. So a vehicle, like a bus, with wheels, or a hat with a flower that spins, or whatever else you can think of.

The first activity in this section will have you write a set of functions that draw out your vehicle (or whatever) and additional functions for the part that rotates like the wheels. It is important that that the rotating part can be separately positioned from the vehicle (or whatever). So they will each be functions that each take an x and y value to specify the position.

Additional activities will add rotation and movement.

Complete Activity 34
Complete Activity 35