SA5: Systems of Equations

This Scripting Algebra (SA) activity will play with systems of linear equations in p5.js. In this activity, a system of two random lines will be generated and the intersection (or solution) of those lines will be calculated to make generative art.

It is recommended to introduce creating functions if it hasn’t been already. At this point, learners can also play with the translate function to have (0,0) in the center of the canvas. This activity assumes that the skills from SA1-SA4 were introduced (if-else, logical operators, random(), text(), rect(), variables, loop, pow, for, etc.).

Below are a few ideas for projects to explore systems of linear equations. Before starting, it is recommended for learners to sketch out their ideas and think about the math required to find the solution of two lines (given the 4 ordered pairs generated).  Learners could also look at the animation of one of the projects below and have discussion groups on how they work.  Save work often and have fun.

Intersection Circles

• Translate the canvas so (0,0) is in the center.
• Generate 4 ordered pairs for two lines.
• Create a function to find the intersection/solution.
• Create a loop to reset the animation.
• Example Code at p5.js.

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

Diagonal Perspective

• Make an animation that creates one random line and the line y = x.
• Draw circles at the intersection with the diameter based on the y-value.
• Translate the canvas so (0,0) is in the center .
• Example Code at p5.js.

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

Example Concepts: slope, systems of 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.