Perlin Noise - Linear Mapping

Perlin Noise is a kind of algorithmic random value generator that, unlike pure random methods where each value is unrelated to the previous or next, generates values in a way that whenever you look at one particular value, you know the adjecent values are not radically far of.

I highly recommend this series by Daniel Shiffman of The Coding Train on Perlin Noise for some high energy, high silliness but super informative information on Perlin Noise.

In fact - and without surprise - it was mostly the Coding Train that nudged me to get off my ass and start these experiments (done and redone by thousands of people throughout the internet).

In this particular exercise I’m mapping Perlin Noise onto a line, traveling forward along the x-axis of the Perlin generated noise.

The code is shown bellow, it is literally the code that generates whatever image you’re seeing and I’ll try to work out more interesting experiments, so come back now and then.

All the code that runs this experiment is bellow, apart from any external libraries (i.e. p5.js)

'use strict'

// Avoiding Global Mode: https://github.com/processing/p5.js/wiki/Global-and-instance-mode
const perlin_noise = ( sketch ) => {

  // This is the element where we'll create our P5 canvas
  let container = document.getElementById('sketch-holder')

  let start = 0         // Where in the Perlin Noise graph we'll begin looking for values
  let increment = 0.01  // How close together the values will be

  sketch.setup = () => {
    var canvas = sketch.createCanvas(container.clientWidth, container.clientHeight)
    canvas.parent(container)

    sketch.background(40, 40, 40)
    sketch.noiseDetail(8, 0.6)
  }

  sketch.windowResized = () => {
    sketch.resizeCanvas(container.clientWidth, container.clientHeight)
    sketch.draw()
  }

  sketch.draw = () => {
    sketch.background(40, 40, 40)
    sketch.stroke(255)
    sketch.noFill()
    sketch.beginShape()

    var y = 0
    var x = 0
    var x_offset = start
    var density = sketch.pixelDensity()

    for(x = 0; x < sketch.width * density; x++) {
      y = sketch.map(sketch.noise(x_offset), 0, 1, 0, sketch.height)
      sketch.vertex(x, y)

      x_offset += increment
    }

    sketch.endShape()
    start += increment
  }
}

// Wait for everything to load
if (document.readyState === 'complete') {
  new p5(perlin_noise)
} else {
  window.onload = (event) => {
    new p5(perlin_noise)
  }
}