SA8: Odd and Even

This Scripting Algebra (SA) activity uses even and odd polynomials to create generative art in p5.js.

This activity assumes that the skills from SA1-SA7 were introduced (if-else, logical operators, random(), text(), rect(), variables, loop, pow, for, functions, translate etc.). This activity will introduce modulo.

In this activity, learners can either create their own project for even and odd functions, or they can modify and learn with code examples below.

Save work often and have fun (or just start over if you break it).

Odd Picture

  • Analyze the code below by changing one value at a time.
  • This example is y = ax3, what is another example of an odd function?
    • Can it be implemented?
  • Can some of this code be randomized?
  • Play with the coefficient code to create new animations and art.
  • Example Code at p5.js.

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

Get Even

  • This example is similar to the odd function above, but what had to change?
  • What are other even functions?
    • Can they be implemented?
  • One polynomial is calculated and then 4 different ones are plotted by modifying the x value.
    • What would this look like algebraically?
  • Example Code at p5.js.

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

Mixed Rotate

  • Draw random even and odd functions.
  • Change color based on even/odd:
    • Modulo (remainders can be used for this).
  • Rotate the canvas.
  • Example Code at p5.js.

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

Example Concepts: even/odd functions, function operations, translation, variables, coordinate planes, ordered pairs, conditions, loops, random numbers, functions, etc..


Like what you see?


SA7: Directrix and Focus

This Scripting Algebra (SA) activity uses parabolas again to make generative art in p5.js. In SA6, we used the f(x) = ax2+bx+c form for parabolas. In SA7, we are going to take a look at the directrix and focus by using the form: (x-h)2 = 4p(y-k). This is one of my favorite ways to look at parabolas due to its beauty. The distance between the focus and the parabola is the same as the parabola to the directrix – it’s so cool!

This activity assumes that the skills from SA1-SA6 were introduced (if-else, logical operators, random(), text(), rect(), variables, loop, pow, for, functions, translate etc.). In addition there is a “What if?” that will introduce push()/pop() and rotate().

In this activity, learners can either create their own project for directrix and focus art, or they can modify and learn with code examples below.

Save work often and have fun (or just start over if you break it).

Focus and Directrix

  • Analyze the code below by changing one value at a time.
  • What is being drawn here?
  • How could you draw this with a 90 degree rotation? What is the math behind that?
  • What happens if h is incremented?
  • Can some of this code be randomized?
  • Example Code at p5.js.

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

What if the paper rotates?

  • This example adds 3 lines to the previous example to turn the canvas.
  • The color scheme was changed as well.
  • What do push/pop and rotate do?
  • What can you design with a rotating canvas?
  • Example Code at p5.js.

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

Example Concepts: directrix, focus, translation, conics, parabolas, variables, coordinate planes, ordered pairs, conditions, loops, random numbers, functions, etc..


Like what you see?


SA6: Parabola Art

This Scripting Algebra (SA) activity uses parabolas to make generative art in p5.js. Learners will investigate existing code to analyze changes in parabolas, and other features of the output.

This activity assumes that the skills from SA1-SA5 were introduced (if-else, logical operators, random(), text(), rect(), variables, loop, pow, for, functions, translate etc.). Counters and resets have been used in previous activities, but are used more with this one.

In this activity, learners will not create their own code at first. They will start with the code below and change one value at a time to analyze its effects. Let learners come up with the approach for analyzing code (give hints as needed). Learners can generate their own code for parabolic art after analysis.

Save work often and have fun (or just start over if you break it).

Parabola Symmetry

  • Analyze the code below by changing one value at a time.
  • What happens when numbers are changed? Why?
    • Ex: can you make the parabola always face opposite directions?
    • Ex: What happens if you change how a,b, and c are created?
  • Example Code at p5.js.

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

Example Concepts: parabolas, variables, coordinate planes, ordered pairs, conditions, loops, random numbers, functions, etc..


Like what you see?


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.

Like what you see?


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.

Like what you see?


SA3: Exponents

Exponential growth can be visualized so many different ways. This SA activity will play with the pow function and explore exponents in p5.js.

This activity assumes that the skills from SA2 were introduced (if-else, logical operators, random(), text(), rect(), variables, loop, etc.). Make sure that the pow function is introduced (2^x will not work). This week may be a good time to introduce for loops as well.

Below are a few ideas for projects to explore powers. Learners may come up with their own ideas, or they may want to modify one of the examples below. Save work often and make sure learners know that looping with exponents can freeze up a machine (know keyboard shortcuts).

Diameter Growth

  • Create an animation that draws circles that sequentially double in diameter.
  • Make something random in the code.
  • Print out the diameter.
  • What is the function for this growth?
  • Example Code at p5.js.

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

Inquiry with a Tree Fractal

  • Use this Example Code and figure out what does what (also in Codepen below).
  • What exponential growth is shown?
  • What happens if you change the values?

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

3^x Squares

  • Create code that animates 3^x.
  • Add a text box that gives the quantity.
  • Randomize something in the code.
  • Create a condition to stop the loop.
  • Example Code at p5.js.

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

Example Concepts: Exponents, 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.

Like what you see?


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

Like what you see?


SA1: Real Numbers

Here is my first Scripting Algebra (SA) post! I hope to keep these coming (with about 5 posts for each semester of Algebra).

Often Algebra classes start with the Real Number System. This SA task is to program a graphic for the Real Number system. This can be a Venn diagram, animation, or another project that the learner comes up with.

I plan to use p5.js with my learners because it is fairly easy to learn, play with, and explore. I am not teaching a coding course; I am supplementing math learning with coding tasks and projects. (Codepen is another place to program with p5.js, but has ads.)

Here is the flow of my class:

  • After the Real Number system and sets have been introduced, show an example of a p5.js code that creates a graphic. Learners can be given a copy of the script to play with and through inquiry figure out how it works. I will cover the coordinate system of the canvas, how to comment, RGB colors, and layers in p5.js.

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

  • Next, learners can sketch and plan their ideas for a Real Number System graphic or animation and start to program it.
  • Give them the p5.js reference, and answer questions as they come up to help them implement their sketch.
  • Some learners may choose to modify the existing script and others may start from scratch.

Example Concepts: Coordinate planes, ordered pairs, layers as an analogy to Order of Operations, the Real Number System, triangles (or other shapes they choose), sets, unions, intersections, 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. (Looping and conditions may need an introduction depending on learners’ ideas.)

Like what you see?