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?


Hex-a-Huddle Board Game

This week Quanta Magazine published an article on penguins and their hexagonal behavior. I shared this article with my 14yr old daughter, Opal, and we started discussing how this would make a great board game.

We designed pieces, drafted our prototypes in Affinity Design, and then utilized a Glowforge to cut. After gluing for a few hours, we finally got to play, and we played our hearts out. My other two children played as well and helped refine the rules and game play.

A brief summary of the game:

Pieces:

26 x penguins with hexagon and dial, 2 x hexagonal boards, 2 x wind tiles, 1x Game Play Indicator, and 1x Game Play donut.

Setup:

  • Each player has 13 penguins, a wind tile and a board.
  • To set up the game the players set each penguin’s dial to 3 hearts and the wind tile facing from left to right.
  • Each player makes a huddle of penguins. Every penguin must touch at least one other penguin. They can be in any arrangement.

Turn Play:

  • Each Round:
    • Wind Chill: Penguins with an exposed side to the wind lose one heart. Exposure means not touching another penguin on that side.
    • Assess: Remove dead penguins and turn the wind tile 60 degrees clockwise.
    • Waddle: Roll D4 and multiply die by five to determine number of moves. Penguins can move that number of spaces. They must be able to slide to an adjacent space and must always touch at least one penguin.
    • Recover: For penguins with no sides exposed, set hearts to 3.
  • Play two full rotations of the wind tile for a full game, or one rotation for a short game.

Winning:

At the end of a game, players count the hearts on the board. The player with the most hearts wins.

Below is a draft (very rough) video of play:

For sale? We have one copy for sale currently – it could be sold by the time you read this. There are hours that are put into making a game and we can’t charge a competitive price currently given materials and labor. We are working on this.

Behind the Scenes:

Here is some of the behind the scenes questions that were asked:

Opal: “How are we going to indicate loss of life?” Me: “Not sure, I’ll think about it while I run…” My headphones coincidentally weren’t charged, so in the silence, the design came to mind for hexagon penguin dials.

How many moves would work and how many penguins? – We tried various multiples, constraints, and rules for hours.

Can we use dead penguins as a shield? – Since they aren’t likely to stay upright – no. Maybe we should call the scientists.

Me: “Are you sure you want a game and not just an army of penguin toys?” Opal: “I am pleased with the army…”

Me: “Should we use a unit circle with unit vectors? Everyone would love pi!” Everyone: Blank stare…

Opal: “Maybe we should only use hexagonal numbers for the penguins…” 2n^2-n

Should we use all 45 penguins or 13? 13 works well for game play. 22 also works well for a 2 player game. We actually came up with various versions that use different multiples for die roll, different numbers of penguins, and no board. We also looked at cooperative play.


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?


Popping Apollonian Gasket

I doodled this GIF after two days of painting the canvas below. I think I am in the process of preparing for my fall classes and students. Art is definitely an outlet – especially when it’s math + art.

Week 52: Math Rocks!

For week 52 of 52 Weeks of Hands-On Math, I couldn’t resist a play on words: Math rocks! This week I encourage learners to share their math in the neighborhood. Create sidewalk chalk art with Fibonacci hopscotch, paint a math rock garden, make a math obstacle course by your home, or have a piece of outside artwork to share.

Our family created a math rock garden. Rocks are often painted, traded, and shared in our area. We may still do another epic hopscotch course before the summer is over. Math rocks, so let’s share it with our world.

Acrylic non-toxic paint pens were used with these rocks, but we have used watercolors, markers, and ink on rocks in the past.


Like what you see?


Moiré Play!

Moiré is an interference pattern that can occur in physics, photography, art, math, and more. As a photographer and mathematician, I have always enjoyed seeing these artifacts emerge. Today I played with some Moiré animation for fun in p5.js.

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

After playing, I of course googled Numberphile and moire and found another wonderful video of theirs: