A workshop crafted for CCFest 2025
Welcome, welcome! In this workshop, we'll graph looping trigonometric easing functions in Desmos and bring them over to p5.js to let them drive the movement of simple shapes. We'll then see how to record these as perfectly looping animations to share over the interwebs!
The Desmos graphing calculator provides an intuitive interface for exploring mathematical equations visually.
Here’s a simple diagonal line (y = x) plotted in desmos.
Multiple equations can be plotted at the same time to see how they compare.
Here’s a variation with two equations
Before diving into animation, we need to understand that sine and cosine functions create smooth, cyclical motion patterns.
Try plotting y = sin(x) on desmos and see what comes up!
What about other trig functions?
tan() and cot() go from -∞ to +∞
All of these are nice and smooth, and they loop forever. The x-axis here has the input to the sin() function which returns values on the y-axis. Imagine the x-axis being time, incremented at a constant rate. As the seconds go by, our curve changes, and the rate of change is different based on its slope. Keep this in mind, we’ll come back to it later.
You can also nest these functions and see what happens
You start to see some interesting patterns. We’ll use this idea of nesting and combining these trig functions in different ways later to get smooth motion curves.