Usage Examples

Explore different noise types with interactive visualizations. Click a canvas to zoom in, and edit the code blocks below to see changes.

Noise Instance

Edit the seed to change the noise pattern globally:

window.noise = new ForgeNoise(12345);

2D Perlin Noise

return noise.generate2D01(x / 16, y / 16)

2D Simplex Noise

return noise.generateSimplex2D01(x / 16, y / 16)

2D Worley Noise

return noise.generateWorley2D01(x / 16, y / 16)

Domain Warping

return (noise.warp2D(x / 16, y / 16, { warpStrength: 1, warpScale: 1 }) + 1) * 0.5

Fractional Brownian Motion (fBm)

return (noise.generateFractal2D(x / 16, y / 16, { octaves: 6, lacunarity: 2.0, persistence: 0.5 }) + 1) * 0.5

Ridged Multifractal

return (noise.generateFractal2D(x / 16, y / 16, { octaves: 6, ridged: true, lacunarity: 2.0, persistence: 0.5 }) + 1) * 0.5

Perlin Masked with Simplex

let perlin = noise.generate2D01(x / 16, y / 16);
let simplex = noise.generateSimplex2D01(x / 16, y / 16);
return perlin * simplex;

Worley Masked with Perlin

let worley = noise.generateWorley2D01(x / 16, y / 16);
let perlin = noise.generate2D01(x / 16, y / 16);
return worley * perlin;

Simplex Masked with fBm

let simplex = noise.generateSimplex2D01(x / 16, y / 16);
let fbm = (noise.generateFractal2D(x / 16, y / 16, { octaves: 4, lacunarity: 2.0, persistence: 0.5 }) + 1) * 0.5;
return simplex * fbm;

Warped fBm with Turbulence

let warped = noise.warp2D(x / 16, y / 16, { warpStrength: 2, warpScale: 1.5 });
let fbm = noise.generateFractal2D(warped, y / 16, { octaves: 5, turbulence: true, lacunarity: 2.0, persistence: 0.6 });
return (fbm + 1) * 0.5;

Voronoi Edges with Perlin Modulation

let voronoi = noise.generateVoronoi2D(x / 16, y / 16).distance;
let edges = Math.min(voronoi, 0.1) / 0.1; // Highlight edges
let perlin = noise.generate2D01(x / 16, y / 16);
return edges * perlin;

Tiled Simplex with Ridged Noise

let tiled = noise.generateTiling2D(x / 16, y / 16, { periodX: 64, periodY: 64 });
let ridged = noise.generateFractal2D(x / 16, y / 16, { octaves: 4, ridged: true, lacunarity: 2.0, persistence: 0.5 });
return (tiled + ridged + 2) * 0.25;