Rotating Objects

Step 1
In this lesson we are going to create rotating objects!
Step 2
This lesson will be focusing on creating rotating objects introducing new functions.

We will be using new functions and learn about Matrices which are new dimensions that we create and rotating them using the rotate function.

Step 3
Create a black background
Step 4
Create a function called "Spin"
Step 5
Give the Spin function these parameters: (x, y, w, h, dir)
Step 6
In the spin function, put the popMatrix() function the top, and the pushMatrix() function at the bottom.
Step 7
Create a translate() function under the pushMatrix() function with (x,y) parameters.
Step 8
Let's see what the translate() function does!

The Translate function moves the origin to another point on the screen!

Step 9
Lets see what the pushMatrix() and popMatrix() function does!

We are creating a different "Dimension" when we are creating a Matrix.

pushMatrix() means Start Matrix Here
popMatrix() means End Matrix Here

After you end the Matrix, everything will be back to the regular origin!

Step 10
Let's put the rotate() function into the Spin() function and let's increase angle in the draw function.
Step 11
Create a spinning rectangle

Create a spinning rectangle at a matrix origin of (50,100).
1. Call the Spin() function in your draw function.
2. The 5th parameter for now can be empty (" ")

Check Your Work
Step 12
A common mistake on using the translate function.
Step 13
Once you have a rotating rectangle, how would you make it rotate the other way?
Step 14
Let's create a new parameter for the Spin() function called "type"

Create an if statement in the Spin() function if the type is a "rect".
Then this would create a rectangle.

Do the same for ellipses.

Step 15
Delete the old rotate(angle), add two new if statements for clockwise and counterclockwise rotation.

Delete the rotate() function under translate().

Each of these if statements will move the shape clockwise or counter clockwise.
Finish the if statement for counter clockwise.
Remember if you increase the angle it goes clockwise. Then how do you go counter clockwise?

Step 16
Create if statements if the type is a "ellipse", in the Spin() function.

NOTE: If the width and height of the ellipse is the same, then it's a circle.
A rotating circle won't look like it's rotating but it is rotating.

Step 17
Try calling the Spin function with these parameters in your draw() function!
Step 18
Your screen should have these shapes rotating in this direction
Step 19
The ellipse is rotating around the correct center but the rectangle isn't rotating around the center but the corner!

How would you change the center rotation point of the rectangle?
HINT: How do you locate the center position of the screen? Or of a rectangle?
Maybe half the width and half the height?

Step 20
Let's create a new type for the Spin() function called "star"
Step 21
Input these new lines of code

We have to use push and pop Matrix again because we are rotating another image and it needs its own dimension, or else all other objects on the screen will be rotating!!

Do the same thing for if(dir === "ccw") .

Step 22
Press Run and you should be seeing this new 8 sided star!
Step 23
Let's uncomment the angle += 0.1 in our draw function, press Run again and our new star should spin!
Step 24
How would you move this star in the draw() function?

You will need to create two variables for x and y positions. And replace the x and y place holder where you called the Spin() function in the draw() function. Then you need to increase the x and y position.

Rotating Objects Info


MVCode Clubs

Created By

Nepgear tina (instructor)

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach