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) = ax²+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)² = 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..