Perlin Noise

The concept

Perlin noise produces coherent pseudo-random values: nearby points have similar values. Unlike random() which jumps, noise() undulates. In p5.js, noise(x) returns 0-1. By varying x slowly (e.g. frameCount*0.01), you get an organic signal perfect for animating positions, sizes or colors.

The code

// Perlin noise: organic wave
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20);
  stroke(55, 227, 195); noFill(); strokeWeight(2);
  beginShape();
  for (let x = 0; x < width; x += 4) {
    let y = noise(x * 0.008, frameCount * 0.01) * height;
    vertex(x, y);
  }
  endShape();
}

Going further

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