CS4All Resources

U4LA4.2: Rotations

How can I make objects rotate?

Teacher Notes && Overview

This lesson introduces a new linear transformation: the rotation.

This lesson introduces linear transformations: rotation.

In this lesson, students are introduced to the idea of rotating elements on the canvas. This may be something your students have already asked about if they tried to figure out things like making rectangles or ovals ‘tilted’ at some point during the year! Rotations can be static - changing things but not moving - or can be used as a part of animation by incrementing a variable that controls the angle of rotation.

Students first see rotations as part of the 8th Grade Common Core standards, and then revisit them as an important part of Geometry. Depending on the grade level of your students and your school’s math trajectory, this may be a harder ask for students to recall. If necessary, provide manipulatives for students to act out what they think is meant by rotation.

The most mind-boggling thing for students in this lesson is that the default mode for angles is radians, which many will not have heard of by the time they take this class. This is fine - they can learn to always put the angleMode in DEGREES and be just as successful in their learning and application of this skill.

Much like translations, rotations are cumulative so students will need to continue utilizing push() and pop().

Objectives

Students will be able to:

  • Rotate shapes on the canvas

  • Use incrementing variables to create animated rotations

  • Combine translations with rotations

Suggested Duration

1 period (~45 minutes) Plan for two days if you would look to dedicate time to having students make an animated screen saver!

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.CT.8 Develop a program that effectively uses control structures in order to create a computer program for practical intent, personal expression, or to address a societal issue.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

  • Rotation - The process of changing the angle of the object. Rotation can be clockwise or anticlockwise.

  • rotate() - Rotates a shape the amount specified by the angle parameter.

  • angleMode() - Sets the current mode of p5 to given mode. The default mode is RADIANS

  • Angle - The angle of rotation, specified in radians or degrees.

  • Radians - The standard mathematical way to measure angles.

  • Degrees - A measure for angles. There are 360 degrees in a full rotation.

Planning Notes and Materials

Resources

Assessment

Formative:

  • Do Now Response

  • Rotation Play Exercise

Summative:

  • Screen Saver Extension (optional)

  • Upcoming Unit Final Project

Do Now/Warm Up (~3 min)

What do you know about rotations from having done them in math classes? Write down EVERYTHING you remember, or any questions you have.

About rotate() (~12 - 15 minutes)

In addition to translating the grid, you can also rotate it with the rotate() function.

rotate() takes an angle as a parameter. It then rotates the canvas around the origin point which is initially (0, 0). This is known as rotating around the origin.

We can think of the origin as the center of a Ferris wheel, and everything being rotated spinning around it. If we don’t want things to spin around that point, we can translate the origin away to somewhere else.

Our angles are measured in radians, just like with arcs. Angle is measured clockwise with zero being at 3 o'clock.

Programs by default are in RADIANS, which are created in terms of pi based on a circle with a radius of 1. You can see the radians marked in terms of pi around the circle. (0 is also 2pi)

You can change your mode to DEGREES by putting angleMode(DEGREES) into your setup and then use the degree measurements if you prefer them. (For most students, putting their programs into degrees is the first thing they should do when dealing with rotations!) Rotations, like translations, are cumulative.

NB: Generally, radians are not seen until Algebra 2/Trig (usually quite late in the year) or Pre-Calculus. If you have students who have not completed those courses, assume that seeing this diagram/hearing about radians will be absolutely shocking to them. This is okay! A best practice is to introduce radians and make sure students are aware that they are the default in most programming languages (and most calculators - this is usually a touchstone as they are used to putting their calculators into degree mode for classes and exams) because they are more precise. Degrees are less precise as 360 is a number arbitrarily chosen for its divisibility and relationship to the calendar. For bonus points, you can discuss the idea that when in angleMode(DEGREES), radians are being MAPPED onto the 0-360 range.

The image below shows the difference between rotating with positive and negative numbers:

Let's test this with a bit of play!

Go to this starter code (p5 editor | repl.it) and do the following (after duplicating!), also listed in the program (leave your answers as comments):

  • Play with the values for rotation (keep them below 6.28 for now!)

  • What happens if you move the rectangle to (0,0)?

  • What happens if you add a translation before the rotation?

  • What if you make the rotation the center of the page?

  • What if the rotation is controlled by mouseX or mouseY?

  • What if you change the mode to degrees?

  • How could the map function help us in this situation? (You might need to make a variable for angle with this one)

This activity can be completed either independently or as a pair programming activity, depending on teacher preference.

Changing the Rotation Origin (~15 minutes)

It’s very important to remember that shapes in p5.js will always rotate around the point of origin (top left corner). To rotate in a different location, we’ll need to first move the origin to the proper location before rotating. Use translate() to move to the location where you’d like the shape, then call rotate(), and then draw the shape with its center at coordinate (0,0).

function setup() {
  createCanvas(600, 120);
  background(204);
  angleMode(DEGREES)
}

function draw() {
  let angle = map(mouseX, 0, width, 0, 360);
  
  push()
  translate(width/2, height/2);
  rotate(angle);
  rect(-40, -20, 80, 40);
  pop()
}

You can make a copy of this starter code (p5 editor | repl.it) to code out the above example together.

Once you've tackled that, try the following challenges:

  • Make shapes rotating by incrementing the angle while the shape moves its x or y position!

  • Make a shape rotate randomly

  • Make a shape rotate around its center (rectMode(CENTER) is helpful here)

  • See if rotations apply to images, text, etc!

  • Rotate around its center according to the mouse position.

[OPTIONAL ACTIVITY] Create a Hypnotizing Screensaver

Create a project with several shapes that all rotate in different ways - this could be done by incrementing a variable, it could be done by moving the mouse, it could happen randomly, but it should create a hypnotizing pattern that fills most of the screen.

Wrap Up (~5 minutes)

Bring students together to share anything interesting that they have made and answer any final questions. You may choose to collect their code via a Google Form or similar.

Extension

Please utilize the optional activity as an extension for any students who need more!

PreviousU4LA4.1: Translation BattleshipNextU4LA5.1: Sine && Oscillating Motion

Last updated