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):

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.