🌊 Perlin Noise Tutorial

In This Tutorial

📜 A Brief History

❓ The Problem with Pure Randomness

When you call Math.random() in JavaScript (or p5.js's random()), you get a number that has no relationship to the previous call. Each result is completely independent.

random(): 0.87
random(): 0.12
random(): 0.95
random(): 0.03
random(): 0.76
random(): 0.41

noise(0.0): 0.50
noise(0.1): 0.54
noise(0.2): 0.60
noise(0.3): 0.63
noise(0.4): 0.61
noise(0.5): 0.57

Imagine you're animating a character walking. With pure random direction changes, the character would instantly teleport in a random direction every frame — clearly unrealistic. With Perlin noise, the direction changes are gradual and smooth, just like a real creature meandering around.

🔍 What Is Perlin Noise?

Perlin noise is a type of gradient noise — a mathematical function that generates smoothly-varying pseudo-random values. The critical property is that inputs that are close together produce outputs that are close together.

How It Works (Conceptually)

Here's the idea behind Perlin noise, simplified for intuition:

🎮 Demo 1: Random Walk vs. Perlin Movement

Watch two dots move around the canvas. The red dot uses pure random direction changes every frame. The blue dot uses Perlin noise — notice how much smoother and more "natural" it wanders!

The canvas is split in half. Notice how the red dot zigzags wildly while the blue dot traces smooth, flowing curves.

💻 Using noise() in p5.js

p5.js includes the noise() function built-in — no imports needed. Here's everything you need to know to use it:

Basic Syntax

// noise() accepts 1, 2, or 3 arguments (dimensions)
// and ALWAYS returns a value between 0.0 and 1.0

let n = noise(t);         // 1D — one position in noise space
let n = noise(x, y);      // 2D — two positions
let n = noise(x, y, z);   // 3D — three positions

Classic Pattern: Smooth 1D Movement

let t = 0;   // our "position" in noise space

function draw() {
    // Sample the noise landscape at position t
    let n = noise(t);              // returns 0.0 – 1.0

    // Map to something useful — e.g., an x position on canvas
    let x = map(n, 0, 1, 0, width);

    // Advance through noise space next frame
    t += 0.01;   // small step = smooth; larger step = more erratic
}

The 2D Movement Pattern (Used by SWBug!)

For 2D movement, we need two independent noise streams — one for the X direction and one for Y. We achieve this by starting each stream at a very different position in noise space (using offset seeds):

let tX = 0;       // time offset for the X noise stream
let tY = 1000;    // Y stream starts far away — so it's independent of X!
let x, y;

function setup() {
    createCanvas(400, 400);
    x = width / 2;
    y = height / 2;
}

function draw() {
    background(240);

    // Get noise values in range [0, 1]
    let nX = noise(tX);
    let nY = noise(tY);

    // Map [0, 1] → velocity in [-speed, speed]
    let speed = 2;
    let dx = map(nX, 0, 1, -speed, speed);
    let dy = map(nY, 0, 1, -speed, speed);

    // Move the dot
    x += dx;
    y += dy;

    // Wrap around edges
    x = (x + width)  % width;
    y = (y + height) % height;

    // Draw the dot
    fill(29, 78, 216);
    noStroke();
    ellipse(x, y, 12, 12);

    // Advance through noise space — this is "noiseAmount" in SWBug!
    tX += 0.01;
    tY += 0.01;
}

Key p5.js noise() Facts at a Glance

📈 Demo 2: Visualizing 1D Noise as a Wave

This demo plots noise(t) values across the canvas width and scrolls through time. The smooth blue line is Perlin noise. The scattered red dots show what random() looks like at the same scale — chaotic by comparison.

🐛 Demo 3: 2D Perlin Movement — Just Like SWBug!

A dot moves using the exact same Perlin noise technique as SWBug's 'p' mode. Adjust noiseAmount and speed to see how each parameter shapes the movement. The fading trail shows the path traced over time.

Small noiseAmount = lazy, sweeping curves. Large noiseAmount = faster direction changes. Speed controls how far the dot travels per frame.

The Code Behind This Demo

Here's the core logic — compare it with the SWBug source code and you'll see they're identical in approach:

let x, y;
let tX, tY;          // independent time offsets for X and Y
let noiseAmt = 0.01; // how fast we move through noise space
let speed = 2;       // how far we move per frame

function setup() {
    createCanvas(400, 300);
    x = width  / 2;
    y = height / 2;
    // Random seeds so each run looks different
    tX = random(1000);
    tY = random(1000);   // Y starts far from X — keeps them independent!
}

function draw() {
    background(245, 245, 245, 30); // semi-transparent = fading trail

    // ── THE PERLIN NOISE MOVEMENT ──
    tX += noiseAmt;                 // advance through noise space
    tY += noiseAmt;

    let nx = noise(tX);             // get smooth value in [0, 1]
    let ny = noise(tY);

    // Map [0, 1] to velocity in [-speed, speed]
    let dx = (nx - 0.5) * 2 * speed;
    let dy = (ny - 0.5) * 2 * speed;

    x += dx;
    y += dy;

    // Wrap around edges
    if (x < 0) x = width;
    if (x > width)  x = 0;
    if (y < 0) y = height;
    if (y > height) y = 0;

    // Draw the dot
    fill(29, 78, 216);
    noStroke();
    ellipse(x, y, 12, 12);
}

🐞 How SWBug Uses Perlin Noise

Now that you understand Perlin noise, you can read the actual SWBug source code and everything makes sense. Here's the Perlin mode from swBug.js (lightly annotated):

// Inside SWBug's move() method — 'p' mode (Perlin noise):

this._t += this.noiseAmount;   // Advance time (small = smooth, large = erratic)

// Sample two INDEPENDENT noise streams (different seed offsets)
const nx = noise(this._noiseSeedX + this._t);
const ny = noise(this._noiseSeedY + this._t);

// Map [0, 1] → velocity in [-speed, speed]
const dx = (nx - 0.5) * 2 * this.speed;
const dy = (ny - 0.5) * 2 * this.speed;

// Update position in user-space coordinates
this.x += dx;
this.y += dy;

Each SWBug is created with a unique random _noiseSeedX and _noiseSeedY, so multiple bugs all start at different points in the noise landscape and wander independently — even though they're all calling the same noise() function.

✅ Key Takeaways