• 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

Activity 34

In this activity you are going to create a new drawing. Make it something that can have separate rotating elements such as the wheels on a bus seen from the side. You will need one function for the main drawing. You will need one function for each part that rotates. The functions need parameters x and y for position, and r for rotation. Each function should inside have it’s own push() and pop() calls around any translation, rotation, or drawing.

You also need a function to draw the collection of shapes together. For the bus demo, I used a function like this:

1
2
3
4
5
function drawBus(x,y,r) {
  drawBusBody(x,y);
  drawFrontWheel(x+70,y+50,r);
  drawBackWheel(x-70,y+50,r);
}

I don’t need to rotate the body of the bus but I do need to pass rotation to each wheel function. Then it is straightforward to call drawBus(400,400,0.12); from the main draw function and get my bus on screen.

You can use rect or ellipse or line for your new drawing though beginShape/endShape is also recommended. The yellow bus in the demo reel was a shape with only 5 vertexes and some rects for windows.

You don’t need to make your shapes move for now. Just get them displaying on screen properly for any values of x and y and make sure changing r rotates the right thing.

Name your sketch: RotatingShapes

Go Back to Rotating Shapes

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