Rotating Objects

Planning
Step 1
In this lesson we are going to create rotating objects!
Stepa
Planning
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
Step1
Step 4
Create a function called "Spin"
Step2
Step 5
Give the Spin function these parameters: (x, y, w, h, dir)
Step3
Step 6
In the spin function, put the popMatrix() function the top, and the pushMatrix() function at the bottom.
Step4
Step 7
Create a translate() function under the pushMatrix() function with (x,y) parameters.
Step5
Information
Step 8
Let's see what the translate() function does!

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

Step6
Information
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!

Step7
Step 10
Let's put the rotate() function into the Spin() function and let's increase angle in the draw function.
Step8
Challenge
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 (" ")

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

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?

Step12
Challenge
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!
Step14
Step 18
Your screen should have these shapes rotating in this direction
Step15
Challenge
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?

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

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!
Step20
Step 23
Let's uncomment the angle += 0.1 in our draw function, press Run again and our new star should spin!
Step21
Challenge
Step 24
How would you move this star in the draw() function?
Step22

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

Account

MVCode Clubs

Created By

Nepgear tina (instructor)

Access Level

public

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