While building this site's Collab page, a major consideration was balancing the pragmatic with playful. The page was supposed to be rich and clear, but also avoid being sterile.

The first version of the page was completely black & white, void of color. So I opened a p5.js environment and started working on some rough demos. I tried interactive geometries for a moment before narrowing in on a rainbow trail that follows the cursor as it moves across the window.

Logging changes to the client's cursor position would be pretty straightforward if this interaction wasn't integrated in an already-heavy page. I already had dozens of vanilla animations and two three.js environments. This constraint made me really focus in on performance, which led me to the Catmull-Rom algorithm.

Catmull-Rom spline

The Catmull-Rom spline is a mathematical curve used in computer graphics to create smooth curves between points. It's name comes from creators Ed Catmull and Raphael Rom, who developed it in the 1970s.

A process like Catmull-Rom interpolation is useful becuase it affords less frequent sampling of cursor positions while still rendering smooth, continuous paths between points. This means less processing, which means it could run alongside the rest of my application. That's what I cared about. :)

Here's an example. Notice how there's a point of diminishing returns where above ~50 points, the orange line maintains the same form. Our goal would be to find that sweet spot, where we do the least amount of computing without compromising the aesthetic result.

This whole process also sent me down an interesting rabbit hole around Ed Catmull.

Ed Catmull

Catmull was the co-founder of Pixar alongside Steve Jobs, who spun the company out from Lucas Films for $5 million in 1985.

Also great biography.

Honorable mention to Raphael Rom.