SA4: Perpendicular Play

This Scripting Algebra (SA) activity will introduce students to perpendicular slopes and points for lines in p5.js. Once students get comfortable with linear functions, it is fun to look at their perpendicular counterparts. Introduce the concept that a perpendicular line has a slope that is a negati

SA4: Perpendicular Play

This Scripting Algebra (SA) activity will introduce students to perpendicular slopes and points for lines in p5.js. Once students get comfortable with linear functions, it is fun to look at their perpendicular counterparts. Introduce the concept that a perpendicular line has a slope that is a negative reciprocal of the original line’s slope (if y = mx+b, then the perpendicular with have a slope of -1/m).

No new coding functions are introduced (unless they ask “how do I …?” questions). This activity assumes that the skills from SA1-SA3 were introduced (if-else, logical operators, random(), text(), rect(), variables, loop, pow, for, etc.).

Below are a couple ideas for projects to explore perpendicular lines, but don’t dive straight into them. If you have time, encourage learners to draft a function that draws a line and then a line that is perpendicular to it and code it from scratch. Learners could also look at the animation of one of the projects below and have discussion groups on how they work (maybe outline code).  Sometimes, when time is limited, it is best to just play with the examples below. Save work often and have fun.

Random Pairs of Perpendicular Segments

  • Create an animation that draws a line and then its perpendicular counterpart.
  • The lines segments can be L’s, crossed, or not crossed.
  • Make colors and positions random in the code.
  • Example Code at p5.js.

See the Pen Perpendicular_Art by Sophia (@fractalkitty) on CodePen.

Shrinking L’s

  • Create an animation that a makes an L using calculations of slope and perpendicular slope.
  • Make colors and positions random in the code.
  • Have the L’s shrink and put a stop in the code.
  • Example Code at p5.js.

See the Pen Shrinking_Ls by Sophia (@fractalkitty) on CodePen.

Example Concepts: slope, perpendicular lines, linear equations (y = mx+b), variables, coordinate planes, ordered pairs, conditions, loops, random numbers, functions, etc..

Other tips:

  • Google has a RGB color picker if searched for on Google.
  • Keep it simple – remind learners to start simple and then build on their ideas if they have time.
  • Modifying example code into something new is a great way to get started.
  • Know the keyboard shortcuts to stop the code.