Author: Mattia Micheletta Merlin; Date: February 1, 2021
It all started by watching a video on YouTube that showed a physical armoniografo. The term "armoniografo" was used to describe a device capable of creating Lissajous figures, which are curves on the Cartesian plane, expressed as:
$${\gamma(t) = \begin{pmatrix} x(t) \\ y(t) \\ \end{pmatrix} = \begin{pmatrix} A_x \sin(\omega_x t + \phi_x) \\ A_y \sin(\omega_y t + \phi_y) \\ \end{pmatrix} }$$
with \(A_x, A_y, \omega_x, \omega_y, \phi_x, \phi_y\) being real parameters that define the figure.
The device consisted of a square table with two pendulums of variable length attached to two perpendicular sides. Each pendulum controls the position of a pencil along a single axis. Finally, there was a sheet of paper on the table where the pencil can draw. Unfortunately, due to friction in the physical device, the curves would close upon themselves in all drawings. So, I came up with the idea of creating a computer simulation of a perfect armoniografo without friction, and that's what I did:
In this web page, you can use the program I created to draw Lissajous figures. Note that by pressing the stop button and then the start button, you can clear the screen from the just drawn figures. You can change the oscillation frequencies \( \omega_x, \omega_y \). For simplicity, I set \( A_x = A_y = 1 \) and \( \phi_x = \phi_y = 0 \). I also added the ability to simulate friction. The "Damping time" parameter controls how many seconds it takes for the system to stop.
Later on, I realized that, not being limited by my mechanical ability, I could generalize the concept of armoniografo to multiple dimensions. So, I created a three-dimensional armoniografo:
Just like in the previous scene, you can stop and restart the armoniografo, modify its frequencies on the three axes, and if you don't want to wait for the drawing to close upon itself, you can use the "Complete Drawing" button.
Later on, I added three additional oscillating "things", namely the RGB channels of the line color. By modifying the values of the R, G, B frequencies, you will see how the colors of the drawing change. I recommend pressing the "Randomize Frequencies" and "Complete Drawing" buttons in sequence again and again to observe many different patterns.
Finally, I thought: well, now that I have this program that allows me to visualize up to 6 frequencies, why not use it to visualize sound? So, I created a program that takes audio input from the microphone or from an .mp3 file and, in real-time, performs the Fourier transform to obtain the six most intense frequencies, and displays them on the Armoniografo like a kind of video (Note: I didn't write the Fourier transform code myself; I used an existing library). Unfortunately, I couldn't get it to work on this web page because Unity WebGL doesn't have the microphone class, so you'll have to settle for videos.
I created this project with Unity, a 3D graphics engine for game development, based on C#. For the interactive visualizations on this page, I built the Unity project for WebGL, and hosted it on a GitHub repository with GitHub Pages (not the same one where the site is hosted to keep things organized). Out of all the possible classes, Unity decided not to develop the microphone class for WebGL, so I couldn't implement real-time sound visualization, I'm sorry.
I encountered an interesting challenge when going from 3 to 6 dimensions: to draw the three-dimensional trace, I used a Unity component called LineRenderer, which allows visualizing a line passing through points specified in the code. This LineRenderer is assigned a color gradient that defines the color of the line, but unfortunately, this gradient can only have eight colors. The solution I adopted was to create many different LineRenderers and attach them to each other to allow for a very long line with many colors on top.