Drawing with Math: How to Use Lissajous Curves in Generative Art // GenLab

> AESTHETICS_LAB // LISSAJOUS_TUTORIAL_INIT

Tutorial: Constructing complex organic curves using parametric trigonometric equations.

The Analog Origins of Generative Art

Generative art did not begin with computers. Long before pixels existed, artists and scientists were utilizing physics and mathematics to generate complex visual patterns. One of the most beautiful and fundamental examples of this is the Lissajous curve.

In 1857, French physicist Jules Antoine Lissajous developed an apparatus using tuning forks and mirrors. By reflecting a beam of light off mirrors attached to vibrating tuning forks positioned at right angles, he projected continuous, complex looping patterns onto a screen. He discovered that when the frequencies of the tuning forks formed simple mathematical ratios (like 1:2 or 3:4), the resulting light trails formed perfect, hypnotic knots.

Today, these patterns are the exact same curves you see dancing on the green phosphor screens of vintage analog oscilloscopes. For creative coders, Lissajous curves remain a rite of passage. They represent the perfect synthesis: visually stunning, yet mathematically trivial to implement.

The Formula

The Parametric Equation

To draw a Lissajous curve in code, we don't calculate $Y$ based on $X$ (like a standard graph). Instead, we use parametric equations, where both $X$ and $Y$ are calculated independently based on a third variable: time ($t$).

$x = A \cdot \sin(a \cdot t + \delta)$

$y = B \cdot \sin(b \cdot t)$

A, B: The amplitude. This defines how wide and tall the curve gets on the screen.
a, b: The frequencies. The ratio between these two numbers (e.g., $a=3, b=2$) dictates the number of "lobes" or loops in the shape.
t: The parameter (time). We run a loop increasing $t$ from $0$ to $2\pi$ to draw the full shape.
δ (delta): The phase shift. Altering this value makes the curve look like it's rotating in 3D space.

Step 1: Drawing the Static Curve

Let's translate this math directly into JavaScript using the HTML5 Canvas API. To draw the shape, we run a for loop, calculating $X$ and $Y$ for every small step of $t$, and connect them with lines.

static_lissajous.js

function drawLissajous(ctx, w, h) {
  // Center of canvas and Amplitude
  const cx = w / 2;
  const cy = h / 2;
  const A = w * 0.4;
  const B = h * 0.4;

  // Frequencies and Phase
  const a = 3;
  const b = 2;
  const delta = Math.PI / 2;

  ctx.beginPath();
  ctx.strokeStyle = '#06b6d4';
  ctx.lineWidth = 2;

  // Loop through time (t) to construct the path
  for (let t = 0; t <= Math.PI * 2; t += 0.01) {
    let x = cx + A * Math.sin(a * t + delta);
    let y = cy + B * Math.sin(b * t);

    if (t === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  }
  
  ctx.stroke();
}

[ LISSAJOUS_ENGINE_SIMULATOR ]

Step 2: By continuously shifting the delta (phase) inside an animation frame, the 2D curve appears to rotate in 3-dimensional space. Adjust the frequencies below to alter the harmonic ratio.

Freq X (a) 3

Freq Y (b) 2

Phase Shift (δ) 0.00

Animation Speed

Utilizes Native MediaRecorder API (WebM)

Render Viewport

Increasing Complexity

Step 3: Mouse Reactivity & Multi-Curves

Once the basic loop is functioning, the goal of generative art is to introduce emergence. We can bind the mathematical parameters to user inputs to make the system interactive.

Instead of hardcoding the phase shift (delta), we can map the mouseX coordinate to a value between $0$ and $2\pi$. By moving the mouse horizontally, the user physically "rotates" the mathematical knot. This is precisely the logic powering the background of the Hero section at the top of this article.

To create the ethereal, glowing effect seen in advanced sketches, we wrap the rendering logic in another loop. We draw the same Lissajous curve multiple times, slightly shifting the frequency multiplier and the opacity (alpha) for each layer. The overlapping transparent strokes build a dense, volumetric structure from a strictly 2D canvas.

Native Video Export (No Plugins)

Notice the "Export Render" button in the simulator above? It uses the native MediaRecorder API. By calling canvas.captureStream(30), we pipe the live canvas frames directly into a WebM video blob and trigger a download. This allows generative artists to record their procedural outputs without needing heavy external libraries like gif.js or screen recording software.

Conclusion: The Logic of Beauty

Lissajous curves perfectly encapsulate the philosophy of generative art. They prove that aesthetic complexity does not require thousands of lines of code or massive neural networks. Breathtaking beauty can emerge from two sine waves intersecting at different frequencies.

By mastering these foundational parametric equations, a creative coder learns how to think spatially. The jump from drawing a 2D Lissajous knot on a canvas to writing a 3D raymarching shader in WebGL is merely a matter of adding a Z-axis. The mathematics remain the same.

>> Bibliographic_References.log

[01] Lissajous, J. A. (1857). Mémoire sur l'étude optique des mouvements vibratoires. Annales de Chimie et de Physique.
[02] Shiffman, D. (2012). The Nature of Code: Simulating Natural Systems. (Foundational trigonometry in JS).
[03] MDN Web Docs. MediaStream Recording API. Mozilla.