Audio

Lissajous — Note visualizer

See and hear how one or two sine-wave notes become waves and Lissajous figures.

Visualization

Movement on the X axis

Note X controls the speed of the point oscillating from left to right.

note X → position x(t)

The X-colored point oscillates only horizontally. Changing the note also changes its speed.

When a musical relationship becomes a drawing

A sine-wave note is periodic motion. When two notes become the horizontal and vertical coordinates of the same point, time disappears from the axes and a Lissajous figure appears:

\begin{matrix} x (t) & = A_{x} \sin (2 π f_{x} t + ϕ_{x}) \\ y (t) & = A_{y} \sin (2 π f_{y} t + ϕ_{y}) \end{matrix}

The shape depends mainly on the ratio between the frequencies. Simple ratios, such as the octave $2 : 1$ , perfect fifth $3 : 2$ and just major third $5 : 4$ , repeat their path after a few cycles and produce closed figures.

Try this first

Start with C4, then add G4 as the second note. Compare equal temperament with just intonation. The just fifth is exactly $3 : 2$ and closes the figure; the equal-tempered fifth is very close, but accumulates a small difference on every cycle.

How to read the graph

With one note, a point oscillates only on the horizontal X axis. When a second note is added, another point, in another color, oscillates only on the vertical Y axis. The movements remain separate so their direction and speed can be observed before they are combined.

When you choose Integrate X + Y, both points remain visible on their axes. Guide lines project their positions onto a third point: X determines its horizontal position and Y determines its vertical position. That point's path forms the Lissajous figure.

Positions range from $- 1$ to $+ 1$ . Note names and frequencies appear directly in the axis labels and update with the sliders.

Equal temperament and just intonation

In equal temperament, an octave is divided into twelve identical steps on a logarithmic scale:

f (n) = 440 \cdot 2^{(n - 69) / 12}

This system lets music be transposed to any key while preserving the same intervals. In exchange, nearly every interval is an approximation of an integer ratio.

In just intonation, the visualizer calculates every note relative to the X axis with exact ratios. This is why the drawings return precisely to their starting point. Visual simplicity shows recurrence in the ratio; by itself, it is not a complete explanation of perceived consonance.

The glissando

The glissando option appears inside the Y note card. It uses the two notes already selected: X remains fixed while Y travels from X to the selected Y note, with no extra note selectors. The movement can run once, repeat from the start, or go back and forth, with controls to start, pause and reset it. In musical/logarithmic mode, equal distances represent the same number of semitones or cents. In linear Hz mode, frequency receives the same increment at each instant.

Phase is never restarted during the movement. The sound and the point continue without jumps as frequency changes. As the sweep crosses thirds, fourths, fifths and octaves, recognizable patterns appear and dissolve on the graph.

All sound is generated in the browser with the Web Audio API. No audio is recorded or sent outside the device.