​

const colors = {

  water: "#718A91",

  grass: "#8F7516",

  hills: "#A99042",

  mountains: "#F3F3EB"

}

​

const breakPoints = {

  level1 : 0.3,

  level2: 0.55

}

​

let slider1 = null

let slider2 = null

​

function setup() {

  createCanvas(800, 600);

  noLoop();

  slider1 = createSlider(0, 1, breakPoints.level1, 0);

  slider1.position(10, height + 10);

  slider1.style('width', '80px');

  slider1.changed(redraw);

  slider2 = createSlider(0, 1, breakPoints.level2, 0);

  slider2.position(10, height + 30);

  slider2.style('width', '80px');

  slider2.changed(redraw);

​

}

​

function draw() {

  background(220);

  noStroke();

  breakPoints.level1 = slider1.value();

  breakPoints.level2 = slider2.value();

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

    for( let y = 0; y < height; y+=pixelSize ){

      let c = noise( x * 0.03, y * 0.03 )

      let col = null

      if( c < breakPoints.level1 ){

        let v = map(c,0,breakPoints.level1,0,1)

        col = lerpColor(color(colors.water), color(colors.grass), v);

      }else if( c >= breakPoints.level1 && c < breakPoints.level2 ){

        let v = map(c,breakPoints.level1,breakPoints.level2,0,1)

        col = lerpColor(color(colors.grass), color(colors.hills), v);

      }else {

        let v = map(c,breakPoints.level2,1,0,1)

        col = lerpColor(color(colors.hills), color(colors.mountains), v);

      }

      fill( col )

      rect( x, y, pixelSize, pixelSize );

    }

  }

}