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