Lissajous Animations Revisited
May 20, 2022
New York, N.Y.
A recent discussion on Facebook about oscilloscopes led to a mention of Lissajous patterns, and I was reminded of an article I wrote for MSDN Magazine back in 2011 entitled “Lissajous Animations in Silverlight.” Interestingly enough, the article has stuck around longer than Silverlight has, and the source code is also available.
I decided to take a stab at rewriting this program using JavaScript and the HTML5 canvas object, and here it is:
The original article has some background on Lissajous patterns and describes my struggles with finding the best approach for rendering them. For the JavaScript version, each segment of the curve is a polyline with points derived from millisecond samples of the two low-frequency sine waves. All the segments are saved in an array, and the entire display is updated with a 16 millisecond timer.
I’ve documented the JavaScript code, if you’re curious how it works.