I recently watched this Standup Maths video on Lissajous curves and quickly fell into a wikipedia hole researching the topic. It turns out that Lissajous curves are a set of parametric equations defined in terms of a, b, and δ (delta):

{\displaystyle x=A\sin(at+\delta ),\quad y=B\sin(bt),}

When a and b are natural numbers and a/b is rational, the corresponding Lissajous curve is “closed” and resembles some kind of knot with a horizontal lobes and b vertical lobes. This relationship fascinated me, so I wrote a quick React application that renders an n by n grid of Lissajous curves to an HTML5 canvas:

Each cell in the grid represents an intersection of an a value, plotted on the vertical axis and ranging from 1 at the top to 20 at the bottom, and a b value, plotted on the horizontal axis and once again ranging from 1 on the left to 20 on the right.

The complete repository for this project can be found on Github. The Lissajous component renders a single Lissajous curve for a given a and b, while the MultiLissajous component efficiently renders the grid of n Lissajous curves.