🐍
[PY] Intro to Computational Media 2.0
CS4All Resources
  • Curriculum Overview
  • How to Use this Curriculum
  • 📬Leave Us Feedback
  • Curriculum Extras
    • 🔮Curriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt. 2)
    • Timers in Processing.py
    • Time Functions: Crazy Clock Mini Project
    • Pathfinding Algorithms and Facial Scanning
    • Playing with Pixels
  • Unit 1: Draw & Draw With Functions
    • 🔮Unit 1 Overview
    • U1LA1.1: Processing.py Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4: Other Shapes & Styling
    • 🗃️U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1: Intro to Color with RGB and HSB
    • 🤓EXTRA: Color & Data Storage
    • 🤓EXTRA: Color Palette Practice
    • ✨U1LA3.1: Introducing Variables
    • ✨U1LA3.2: Creating Custom Variables
    • ✨U1LA4.1: What is Abstraction?
    • ✨U1LA4.2: Intro to Functions and Function Calls
    • U1LA4.3: Draw with Functions
    • U1LA4.4: Using the Random Function
    • 🗃️U1LA4 Mini Project: Custom Emoji
    • U1LA5.1: Your Custom Function Library
    • 🎨Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond and Draw On Canvas
    • 🔮Unit 2 Overview
    • ✨U2LA1.1: Conditionals and If Statements
    • ✨U2LA1.2: Conditionals and if, elif, and else statements
    • ✨U2LA1.3: Logical Operators And/Or
    • 🗃️U2LA1 Mini Project: Make a Traffic Light
    • U2LA2.1: Draw with Mouse
    • U2LA2.2: The Map Function
    • ✨U2LA3.1: Data Type Scavenger Hunt
    • ✨U2LA3.2: Functions that Return Values
    • 🤓U2LA3.3: Functions with Purpose
    • U2LA4.1: Collision Functions and Libraries
    • U2LA4.2: Mouse Clicks and Shapes as Buttons
    • 🗃️U2LA2 Mini Project: Light Switch Game
    • U2LA5.1: Key Presses and Nested Conditionals
    • 🎨Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Loops, Arrays, Media
    • 🔮Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt. 1
    • U3LA1.3: Nested For Loops (For Loops Pt 2)
    • 🗃️U3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Lists
    • U3LA2.2: Random Values from Lists
    • 🗃️U3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Lists
    • U3LA2.4: Updating and Deleting from Lists
    • 🗃️🤓 U3LA2 Mini Project 2: CodeWars List Challenges
    • U3LA3.1: Loading Images
    • 🗃️U3LA3 Mini Project: Vision Board
    • 🎨Unit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Objects, Transformation
    • 🔮Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move in All Directions and Make it Bounce
    • U4LA2.1: Introduction to Classes and Objects
    • U4LA2.2: Reading and Updating Object Properties
    • U4LA2.3: Methods Off Canvas
    • U4LA2.4: Objects on Canvas
    • 🗃️U4LA2 Mini Project: Build a Tamagotchi
    • U4LA3.1: Creating Many Objects
    • 🤓🗃 Optional U4LA3 Mini Project: Rebuild with Objects
    • U4LA4.1: Translation Battleship
    • U4LA4.2: Rotations
    • 🤓U4LA5.1: Sine and Oscillating Motion
    • 🤓U4LA5.2: Cosine and Circular Motion
    • 🎨Unit 4 Final Project: Animated Greeting Card or PSA
  • Unit 5: Final Project
    • 🔮Unit 5 Overview
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes and Overview
  • Objectives
  • Suggested Duration
  • NYS Standards
  • Vocabulary
  • Planning Notes and Materials
  • Resources
  • Assessments
  • Do Now/Warm Up (~3 min)
  • Changing the Rotation Origin (~15 minutes)
  • [OPTIONAL ACTIVITY] Create a Hypnotizing Screensaver
  1. Unit 4: Motion, Objects, Transformation

U4LA4.2: Rotations

How can I make objects rotate?

Teacher Notes and Overview

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 - students can use the radians() function to convert degree measures to radians in their programs.

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

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.

  • 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

Planning Notes
Materials

Depending on your students' grasp of math concepts, you may want manipulatives to explain rotations.

Manipulatives (optional)

Resources

  • NEED VIDEO FOR PYTHON ROTATIONS

Assessments

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.

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)

If you would like to work in degrees, you would put any degree value into the radians() function to convert. For example, writing rotate(radians(210)) is the same as writing rotate(7*PI/6), and is perhaps much more intuitive for many students!

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.

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

Let's test this with a bit of play!

  • 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).

from processing import *
from collide2d import *

#modified from:genekogan.com/code/p5js-transformations/

#1. Create a variable to hold angle rotation values

def setup():
  size(510,350)

def draw():
  background(220)
  
  angle = map(mouseX, 0, width, 0, 360)
  
  pushStyle()
  translate(width/2, height/2)
  rotate(radians(angle))
  rect(-40, -20, 80, 40)
  popStyle()

draw = draw
run()
  • 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.

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

Last updated 1 year ago

(Explainer)

Go to the and do the following (after dupilcating), also listed in the program (leave your answers as comments):

You can make a copy of to code out the abvoe example together. Once you've tackled that, try the following challenges:

Rotation Exploration Pt 1 Starter Code
Rotation Exploration Pt 2 Starter Code
Radians & The Unit Circle
part 1 starter code
starter code part 2
Unit circle with radians and degrees marked
Two rotations on two different canvas to demonstrate how origin and shape is shifted.