Lissajous Curves

I ran across this tweet the other day where Dan Hollick used Lissajous curves - essentially different sine waves combined together - to make this interaction for Cursor Compile.

I thought this was really neat, so I wanted to explore generating, tweaking, playing with these curves myself for the web.

I made the widget above, which strings up multiple variations of Lissajous curves, each with a unique resting and hover state, along with a pressed state, to create interactions tied directly to mathematical parameters.

A Lissajous curve is the path traced by two perpendicular oscillations running at once:

The frequency ratio a : b is the shape's identity — raising a against b adds lobes and crossings, so it works as the primary way to add complexity to a curve.

The phase δ tilts and opens the figure as if rotating it in 3D, without changing its identity. The amplitudes Ax and Ay just set its size.

Hover is deliberately a phase shift on most palettes — it tilts and opens the figure without adding crossings, the calmest possible lever.

Drift slowly advances the phase at rest, so the curve breathes and never exactly repeats. Trace sends a comet travelling along the line — motion with zero geometry change.

With the hand-drawn switch on, damping insets each successive loop like a harmonograph winding down, and wobble adds a faint low-frequency quiver, so the line reads hand-traced rather than plotted.