Mathy Motivation

There's a lot of talk in math education circles about creating and maintaining student motivation and engagement in math courses which normal people find too abstract. Finding out what x is a thousand times is the opposite of what most people find motivating and the fact that something might be useful years in the future is also of limited interest.

My method is to hook students by showing them something visual and engaging (or in other STEM classes, hands-on and interactive) and they'll do a lot of work if they're sold on the result.

For example, teaching students polar coordinates in precalculus is a challenge, when they are already comfortable with the perfectly useful Cartesian (x-y) coordinate system. The Processing graphics package is a great way to approach this and other topics, because it was created by and for artists. The master of cool Processing sketches is "Bees and Bombs" creator David Whyte, who posted something like this:

See the Pen Rainbow Dots by Peter Farrell (@peterfarrell66) on CodePen.

It's a beautiful work of dynamic art, but it's also a graph of a trigonometric function in polar coordinates! If you can motivate students to try to recreate the work of art, they might learn how to use a few supposedly hard math tools along the way.

Students I've shown this to at The Coder School say, "Wow, cool!" And they're motivated to learn to make it themselves. The beginner question is, "How do we get one dot on the screen?" A valuable lesson to students is "Read the documentation!" The p5.js website has a lot of helpful explanations and examples on everything you can do with shapes and transformations.

And once you can put one dot on the screen, it's simple to get a lot of them on the screen: you use a loop. Of course, you have to rotate a bit so they're in different locations:

Now we have as many dots as we want on the screen, but they're all the same distance from the center, so they make a circle:

Trig to the rescue

How do we make them oscillate? This would be a difficult proposition, except there's a math tool that can help tremendously! Sines and cosines are usually introduced as the ratios of sides in right triangles, but by far their biggest application is modeling oscillating behavior. If we change the "ellipse" line in the code above to include a time variable, we can make the dots move in and out of the circle. This would be an excellent precalculus project for working with the equation of waves!

ellipse(0,100*cos((frameCount/15)),15,15);

Unfortunately, we want each dot to move in and out in a slightly different way, and we already have a variable for "shift" we can use. Introduce that into the code and each dot will "lag" a little behind the previous one:

ellipse(0,130+100*cos((frameCount/15)+3*shift),15,15);

It's hard to tell at first that each "dot" is simply oscillating from the center outwards. The rotation is an illusion. Students show off this project proudly, with good reason! Not only is it a cool-looking programming project, but they learned to use a bunch of math tools at the same time.