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?

Week 1: Embroider Curves with Lines

Welcome to 52 weeks of math! I will be posting a new activity every Wednesday for 52 weeks of hands-on math. Week 1 is one of my favorites – drawing with thread.

In this activity, learners will play with their rulers (or thread) to create curves with lines. The idea is to have students draw straight lines close together with various slopes to create curves. For younger ages anything goes! For middle school and up, it is a great intro into lines and the Cartesian Plane. Below is an algebra video I made for a class back in 2016. It gives you the basic idea. I also have modifications and additional ideas below.

Possible reflection questions:

  • Elementary:
    • Line segments – what are they? How many points do you need to make one?
    • What is a tangent line? What can have a tangent line?
    • Do the distances change with each line? Why?
  • Middle school (use the questions above as well):
    • What is slope-intercept form?
    • How can you change the outcome of your art if you change the axes of the graph to have angles other than 90 degrees?
    • How does the slope change? What observations can you make about the ratios?
    • How do the slopes change when a quadrant’s set of lines is reflected over an axis?
  • Algebra (use the questions above as well):
    • Is there a pattern to observe if the lines are written in standard form or point-slope form?
    • What type of curve do you think you have approximated?
    • Can you write a function for the change in slope?
  • Geometry (use the questions above as well):
    • When creating reflections over an axis, are there any patterns with sets of parallel or perpendicular lines?
    • Can you write a function for the change in distance for each line?
    • Where do you see rotational symmetry, translations or reflections in you art?
  • Trigonometry (use the questions above as well):
    • Could you create a similar work of art using polar coordinates?
    • Can you write a function for the change in angles for your art?
    • Can you write a trigonometric function for a pattern in your art? Are there any periodic behaviors?
  • Calculus (Use the questions above as well):
    • Can you create a function for the slopes? If so, what is this function in relation to the curve you created?
    • Can you determine the function for the curve you created?