I was browsing the #lissajous hash tag on Twitter and found this:
— Rudi (@rudixworld) February 17, 2017
Immediately I though: "I must make such an animation with p5js!". And here it is =)
The circles and the lines are drawn to the canvas, the canvas is cleared once every frame. To be able to draw and also keep the Lissajous curves I'm using an image, like a back buffer, to draw them on. The image is never cleared and is drawn to the canvas each frame.
I use a two dimensional array, 5×5, to store the points where the lines intersect. When drawing the horizontal lines, the y coordinate of the points are updated. When drawing the vertical lines, the x coordinate of the points are updated. After the horizontal and vertical lines are drawn, all points are up to date so then I loop through them and plot a 1×1 rectangle for each one.
I have a collection with my [Lissajous based Pens](https://codepen.io/collection/AyaQEM).
This Pen uses: HTML, CSS, Babel, and Babel