SA2: Animated Lines

There are infinite possibilities for linear function animations. This SA project will give some ideas to practice using linear equations with p5.js.

Introduce if-else statements (conditions), logical operators, random(), text(), rect(), variables, and using p5.js for animation (loop). Below are a few ideas for projects with linear functions. Learners may come up with their own ideas, or they may want to modify one of the examples below:

Random Line Art

  • Create code that draws random lines.
  • Create conditional statements based on the slope of each line (change color or thickness).
  • Do not plot vertical lines (and discuss what a function is).
  • Example Code at p5.js

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

Lines to Curve

  • Create code that draws curves with lines.
  • Practice on paper to see the pattern of (x,y) coordinates.
  • Play with conditions to stop the code once a picture is drawn.
  • Example Code at p5.js

See the Pen Curves with Lines by Sophia (@fractalkitty) on CodePen.

Slope Movie

  • Create code that animates lines.
  • Add a text box that gives the slope for each line.
  • Practice on paper to see the pattern for (x,y) coordinates.
  • Create a condition to stop the loop.
  • Example Code at p5.js

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

Example Concepts: Variables, coordinate planes, ordered pairs, linear equations, slopes, conditions, loops, horizontal/vertical lines, random numbers, chaos, 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.
  • Animation will take more time, so modify planning if an animation is chosen as a project.
  • Modifying example code into something new is a great way to get started

Leave a Reply

%d bloggers like this: