Published on September 30, 2024

Procedural generation allows you to create vast, varied content without manually authoring every asset. Here’s how to approach it for web-based games.

Noise Functions

The foundation of most procedural content:

Simplex Noise

Better than Perlin noise for most use cases:

import { createNoise2D } from 'simplex-noise'

const noise2D = createNoise2D()
const value = noise2D(x * 0.01, y * 0.01) // -1 to 1

Fractal Brownian Motion

Layer noise for natural-looking terrain:

function fbm(x, y, octaves = 6) {
  let value = 0
  let amplitude = 0.5
  let frequency = 1
  
  for (let i = 0; i < octaves; i++) {
    value += amplitude * noise2D(x * frequency, y * frequency)
    amplitude *= 0.5
    frequency *= 2
  }
  
  return value
}

Applications

Terrain

• Height maps from noise
• Biome distribution
• River and road networks

Dungeons

• Room placement algorithms
• BSP (Binary Space Partitioning)
• Wave Function Collapse

Items and Loot

• Stat generation with weighted randomness
• Name generation with Markov chains
• Visual variation through parameter spaces

Performance Tips

1. Generate on web workers
2. Cache and reuse seeds
3. Use typed arrays for data
4. Consider GPU-based generation for real-time needs

Procedural generation opens up possibilities that would be impossible to author by hand, making your games feel alive and unique.