Animations and Parametric Curves

There are many things that may motivate you to create activities for your students. One of the reasons that inspires me the most is providing an engaging and joyful experience for students to learn mathematics.

It can be a daunting task to get started, but even something as simple as a student’s function being “drawn” on the graph can elicit a “That was cool!”. So I want to share with you the primary piece of knowledge that set me on my journey from popping up a :white_check_mark: or :cross_mark: to creating animations for dynamic feedback like the one below in this activity!

Screen Recording 2025-08-28 at 2.57.15 PM (1)

Learning to work with parametric expressions really helped simplify animating paths and points. I encourage you to copy this activity and play! All the embedded graphs following are included there. The Desmos calculator allows the use of a special parameter, t, when defining points. It is defined as the values between 0 and 1. Though you can change the range, we’ll be taking advantage of treating it like a percentage. In the graph, you’ll see a basic circle and a few arcs.

Next we have a similar graph, but have replaced some constants with a slider, a to create some draggable points and dynamic paths.

Next up, let’s look at some more standard Cartesian coordinates. You’ll notice we can create line segments by explicitly defining the initial coordinates and adding the offset in two possible ways (i.e. by coordinate or like a vector). More useful, in my opinion, is defining endpoints, and using t for each endpoint, (1-t) for the initial and t for the final. This is essentially weighting the distance every point on the segment is from each endpoint. For example,t=0.25 defines a point that is one quarter the distance from point A, and three quarters from point B. Play with point P to see this in action.

Now you may point out that we could just use the line setting or the polygon() function for a list of points, but you’ll notice the animated point follows the path of the segment without any complex calculations needed. The variable, `a`, will become the animation variable in the example screen.

You can even define your points with functions, including piecewise functions!

If you look at Screen 6 here, I’ve started a sample activity.

Challenge yourself!

  • Complete some of the challenges in this excellent activity for working with parametric expressions! (also linked on Screen 7).

  • Can you show the rabbit’s path? What other feedback might you add to make it more meaningful or fun? (There are a few breadcrumbs in there.)

  • Can you use t to change opacity or colors?

  • How can you improve an activity you’ve already built?