c1: "#011FFD",

  c2: "#FF2281",

  c3: "#B76CFD",

  c4: "#75D5FD"

}

​

const breakPoints = {

  b1: 0.4,

  b2: 0.7,

  b3: 1, // not needed

}

​

let thingW = 0;

let gW = 0;

​

​

​

function setup() {

  createCanvas(600, 700);

  noLoop();

  thingW = width;

  gW = thingW/2;

}

​

function draw() {

  background(255)

  noStroke()

  fill(0)

  let c1 = color(204, 102, 0);

  let c2 = color(0, 102, 153);

  push();

  for( let i = 0; i < gW; i++ ){

    translate(-1,0)

    let c = color(colors.c1)

    let factor = i/gW

    if( factor <= breakPoints.b1 ){

      let subFactor = factor / breakPoints.b1

      c = lerpColor(color(colors.c1), color(colors.c2), subFactor);

    }else if( factor <= breakPoints.b2 ){

      let subFactor = (factor - breakPoints.b1) / (breakPoints.b2 - breakPoints.b1)

      c = lerpColor(color(colors.c2), color(colors.c3), subFactor);

    }else{

      let subFactor = (factor - breakPoints.b2) / (breakPoints.b3 - breakPoints.b2)

      c = lerpColor(color(colors.c3), color(colors.c4), subFactor);  

    }

    fill(c)

    drawNoiseThing(thingW)

  }

  pop();

​

}

​

function drawNoiseThing (w, p = 0) {

  beginShape()

  vertex(0,0)

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

    let x = noise( y * 0.01, 2 ) * w

    vertex(x,y)    

  } 

  vertex(0,height)

  endShape()

}