Motion: Flow

Move particles through a Perlin noise flow field.

Example 1: Noise Drifters

Code

let pts = [];

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 600; i++) pts.push(createVector(random(width), random(height)));
  background(255);
}

function draw() {
  noStroke();
  fill(255, 255, 255, 20);
  rect(0, 0, width, height);

  stroke(255, 45, 140, 90);
  for (let p of pts) {
    let a = noise(p.x * 0.006, p.y * 0.006, frameCount * 0.003) * TAU * 2;
    p.x += cos(a) * 1.2;
    p.y += sin(a) * 1.2;
    point(p.x, p.y);
    if (p.x < 0 || p.x > width || p.y < 0 || p.y > height) {
      p.set(random(width), random(height));
    }
  }
}

Try this: Vary noise scale to switch between smooth and turbulent flow.

Open sketch in new tab

Example 2: Flow Lines

Code

let walkers = [];

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 200; i++) walkers.push(createVector(random(width), random(height)));
  background(250);
}

function draw() {
  stroke(30, 30, 40, 40);
  for (let w of walkers) {
    let px = w.x;
    let py = w.y;
    let ang = noise(w.x * 0.01, w.y * 0.01, frameCount * 0.005) * TAU;
    w.x += cos(ang) * 2;
    w.y += sin(ang) * 2;
    line(px, py, w.x, w.y);

    if (w.x < 0 || w.x > width || w.y < 0 || w.y > height) {
      w.set(random(width), random(height));
    }
  }
}

Try this: Start all particles at one edge to reveal field structure.

Open sketch in new tab

Resources