A study on playing with compound sine waves for interactions on the web
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 what you get when two sine waves run at right angles to each other:
The ratio between the two frequencies decides the shape, so raising one against the other adds loops. The phase between them tilts the figure without changing that shape, which made it the gentlest thing to animate on hover.