Home▸Rendering & Computer Graphics▸2D Procedural Textures

🪨 2D Procedural Textures

A real per-pixel 2D procedural texture generator: hand-written Perlin gradient noise, fractal Brownian motion and Worley/cellular noise draw marble, wood, clouds, stone and cracked earth directly into ImageData.

Rendering & Computer Graphics2DModerate60 FPS📱 Mobile-adapted🌍 Earth ⇄ 3D version

What It Demonstrates

Every pixel here is computed by hand-written noise math and written straight into a Canvas2D ImageData buffer — no images, no WebGL, no library. Perlin gradient noise assigns a pseudo-random direction to each lattice corner and interpolates their dot products with a quintic curve; fractal Brownian motion (fBm) sums that noise across octaves of doubling frequency and halving amplitude; turbulence sums its absolute value instead, producing the sharp vein-like ridges classic to marble; and Worley (cellular) noise scatters one random point per grid cell and measures distance to the nearest and second-nearest point, the basis of the Stone and Cracked Earth presets.

How to Use

Pick a preset to switch the underlying noise recipe. Scale zooms the sampling grid; Octaves adds finer layers of detail (for Marble, Wood and Clouds) or slightly densifies the cell grid (for Stone and Cracked Earth); Speed drifts the noise field over time, and dragging it to 0 freezes the texture. New Seed rerolls every hash in the noise field for a completely different but equally valid texture, and the Palette chips recolour the same underlying noise value.

Did You Know?

Ken Perlin's original 1985 marble recipe is exactly what the Marble preset reproduces: feed a sum of absolute-value noise — turbulence — into a sine wave, and the interference pattern reads as stone veining. Worley noise, invented by Steven Worley in 1996, is the same distance-to-nearest-point idea behind cracked mud, giraffe patterns, and Voronoi region maps in computational geometry. Because this demo runs on the CPU one pixel at a time rather than in a GPU shader, the render buffer is deliberately kept small and then scaled up — the same trade every procedural texture tool makes between resolution and speed.

⚙ Under the hood

procedural texturesperlin noisefbmworley noisecellular noisecanvas2dnoise algorithmsmarble texturewood texture

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install