• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

BMS Processing Class

A Course23.com Production

"Stop, Pause, and Think..." -- Ms. Elwell
"Take your time, it isn't a race" -- Mr. Helmke

  • Home
  • Conditionals and Logic
    • Conditionals 1: Boolean Expressions and the If Statement
      • Activity 16 (IF1)
    • Conditionals 2: If/Else Statements
      • Activity 17 (IFELSE1)
    • Conditionals 3: Else If Statements
      • Activity 18 (elseif1)
      • Activity 19
      • Activity 20 (elseif3)
      • Activity 21
    • Logical Operators
      • Activity 22 (And1)
      • Activity 23
      • Activity 24 (SingleRollover)
      • Activity 25 (FourSquareRollover)
      • Activity 26 (MoveWhenPressed)
      • Activity 27 (bouncy ball 1)
      • Activity 28 (bouncy ball 2)
  • Functions
    • Moving Shapes 1
      • Activity 29 (StarBright)
      • Activity 30 (CreatureAtOrigin)
    • Moving Shapes 2
      • Activity 31 (drawCreatureFunction)
      • Activity 32 (BouncingCreatures)
    • Rotating Shapes
      • Activity 33 (RotatingCreatures)
      • Activity 34 (RotatingShapes)
      • Activity 35 (RotatingShapes2)
  • Looping and Arrays
    • Loops 1
      • Activity 36 (ShapeLoop)
      • Activity 37 (RandomLoop1)
    • Loops 2
      • Activity 38 (Deg2Rad)
      • Activity 39 (NumberLoop1)
      • Activity 40 (NumberLoop2)
    • Arrays 1
      • Activity 41
      • Activity 42
      • Activity 43
    • Arrays 2
      • Activity 44
      • Activity 45
      • Activity 46
  • Final Topics
    • Introduction
    • Particle Systems
    • Maze Game
  • Resources

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:

1
2
3
  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:

1
2
3
4
5
6
7
8
9
10
11
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

Primary Sidebar

Required Reading:

Course Coding Standards

Copyright © 2016–2021 Chris Elwell/Michael Helmke · This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License · Log in