Simplex Noise & Terrain

The concept

Simplex noise (Perlin, 2001) improves on classic Perlin noise: fewer directional artifacts, faster in high dimensions. In p5.js we use noise() (similar implementation). For 2D terrain, sample noise(x*scale, y*scale) and map to height or color.

The code

// Terrain: noise-based elevation lines
function setup() { createCanvas(400, 280); noLoop(); }
function draw() {
  background(11,15,20);
  for (let y=0; y<height; y+=4) {
    stroke(55,227,195,80); noFill(); strokeWeight(1);
    beginShape();
    for (let x=0; x<width; x+=3) {
      let h = noise(x*0.008, y*0.01) * 40;
      vertex(x, y + h - 20);
    }
    endShape();
  }
}

Going further

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