Gradient with Bands

let colors = "ffbe0b-fb5607-ff006e-8338ec-3a86ff".split("-").map(a => "#" + a);

let rectW = 500;

​

function setup() {

  createCanvas(window.innerHeight, window.innerHeight);

  pixelDensity(2);

}

​

function draw() {

  background('#23074b');

  translate(width / 2, height / 2);

​

  rectMode(CENTER);

  noStroke();

  let gradient = drawingContext.createLinearGradient(-rectW / 2, 0, rectW / 2, 0);

  gradient.addColorStop(0, color(random(colors)));

  gradient.addColorStop(0.1, color(random(colors)));

  gradient.addColorStop(0.4, color(random(colors)));

  gradient.addColorStop(0.9, color(random(colors)));

  gradient.addColorStop(1, color(random(colors)));

  drawingContext.fillStyle = gradient;

  rect(0, 0, rectW);

​

  enableBandLines();

  noLoop();

}

​

function enableBandLines() {

  push();

  strokeWeight(5);

  stroke(255);

  translate(-rectW / 2, 0);

  drawingContext.setLineDash([12, 12, 12, 12]);

  line(0, -rectW / 2, 0, rectW / 2);

  line((rectW * 0.1), -rectW / 2, 0 + (rectW * 0.1), rectW / 2);

  line((rectW * 0.4), -rectW / 2, 0 + (rectW * 0.4), rectW / 2);

  line((rectW * 0.9), -rectW / 2, 0 + (rectW * 0.9), rectW / 2);

  line(rectW, -rectW / 2, rectW, rectW / 2);

  pop();

}