Kamel Ghabte · Course · Free

Oscillators & Lissajous

Draw Lissajous curves with two oscillators in p5.js.

The concept

A Lissajous curve plots (sin(a*t), sin(b*t+δ)). When a and b have a rational ratio, the curve closes. Otherwise, it progressively fills a rectangle. Varying frequencies and phase over time produces hypnotic figures.

The code

// Lissajous curve
function setup() { createCanvas(400, 280); }
function draw() {
  background(11,15,20,20);
  translate(width/2,height/2);
  let a=3, b=2+sin(frameCount*0.002)*0.5;
  noFill(); stroke(55,227,195,150); strokeWeight(1.5);
  beginShape();
  for (let t=0; t<TWO_PI*4; t+=0.01) {
    let x = sin(a*t+frameCount*0.01) * width*0.38;
    let y = sin(b*t) * height*0.38;
    vertex(x,y);
  }
  endShape();
}

Going further

Explore other free courses on the Learn page, or book a call to discuss your project.

Want to go further?

Book a discovery call →