​

const noiseScale = 0.01;

​

// Colours to use when generating the background image

// You can add/change these to whatever you want!

const colours = [

  "#ff5500",

  "#55ff00",

  "#ffdd00",

  "#55ddff",

];

​

let y = 0;

let dir = 1;

​

function preload() {

  // To use an image you've already got:

  // 1. Upload the image to the editor

  // 2. Change "terrain.png" to the name of your image (or use that terrain.png if you want!)

  // 3. Uncomment the line below and comment out the image generation in the setup function

  // bg = loadImage("terrain.png");

}

​

function setup() {

  createCanvas(600, 600);

  // To use an image you've already got:

  // Comment out these two lines

  bg = createGraphics(width, height);

  createBG();

}

​

function draw() {

  image(bg, 0, 0, width, height);

  strokeWeight(2);

  // Scan the current row of pixels

  for(let x = 0; x < width; x ++) {

    // Get the colour of the current pixel

    const c = get(x, y);

    // Draw a line in that colour to the bottom of the screen

    stroke(c);

    line(x, y, x, height);

  }

  // Move the y position

  y += dir;

  // Flip the direction when we get to the top/bottom

  if(y <= 0 || y > height) {

    dir *= -1;

  }

}

​

function createBG() {

  const numBands = 16;

  for(let i = 0; i < bg.width; i ++) {

    for(let j = 0; j < bg.height; j ++) {

      // Get the noise at the current pixel

      const n = noise(i * noiseScale, j * noiseScale);

      // Turn the noise into a colour

      const band = int(n * numBands);

      const colour = band % colours.length;

      // Draw a point at the current location

      bg.stroke(colours[colour]);

      bg.point(i, j);

    }

  }

}