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