Kamel Ghabte · Course · Free

Curl Noise

Create divergence-free flow with curl noise in p5.js.

The concept

Curl noise is a vector field derived from Perlin noise with zero divergence: particles never accumulate or create voids. Computed as: vx = dN/dy, vy = -dN/dx (partial derivatives of noise). Result: elegant swirling flows.

The code

// Curl noise particles
let pts = [];
function setup() { createCanvas(400,280); background(11,15,20);
  for(let i=0;i<300;i++) pts.push({x:random(width),y:random(height)});
}
function draw() {
  fill(11,15,20,12); noStroke(); rect(0,0,width,height);
  let e=0.01, t=frameCount*0.003;
  for(let p of pts){
    let n1=noise(p.x*0.005,p.y*0.005,t);
    let vx=(noise(p.x*0.005,(p.y+e)*0.005,t)-n1)/e;
    let vy=-(noise((p.x+e)*0.005,p.y*0.005,t)-n1)/e;
    p.x+=vx*2;p.y+=vy*2;
    if(p.x<0||p.x>width||p.y<0||p.y>height){p.x=random(width);p.y=random(height);}
    stroke(55,227,195,120); point(p.x,p.y);
  }
}

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 →