With commas:

Without commas:

# Foiled by a Foil

I couldn’t resist this GIF for my algebra students. Foiling can be such fun!

My daughter started playing with moirĂ© in procreate after I fiddled with it in a previous post. You know we breathe math in our home. She wanted to share:

High res:

Low res:

# 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..

# 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..

# 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..

# 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.

# 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.