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:

function drawBus(x,y,r) {
  drawBusBody(x,y);
  drawFrontWheel(x+70,y+50,r);
  drawBackWheel(x-70,y+50,r);
}

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