P5 gradient

let clrBG = 255;

let stage = new p5.Vector(1000,1000);
let canvasSize = new p5.Vector(stage.x + 250, stage.y + 250);

let baseCanvas;
let baseCanvasW;
let baseCanvasH;
let _whichCanvas;
let _w;
let _h;
let _s;

let Y_AXIS = 1;
let X_AXIS = 2;

let _layer1;

// COLORS

let color_1;
let color_2;
let color_3;
let color_4;
let color_5;

let colorBackground;

// ROTATIONS VALUES
let rotationValues = [45,135,225,315];
let y = 0;

function setup() {
  colorMode(RGB, 255, 255, 255);
  angleMode(DEGREES);
  createCanvas(stage.x, stage.y);


  color_1 = color(35, 35, 35);
  color_2 = color(175, 252, 65);
  color_3 = color(178, 255, 158);
  color_4 = color(29, 211, 176);
  color_5 = color(8, 99, 117);

  colorBackground = [{0:color_1, 1:color_2}, {0:color_1, 1:color_3}, {0:color_1, 1:color_4}, {0:color_1, 1: color_5}];


  baseCanvasW   = int(stage.x); // 1000
  baseCanvasH   = int(stage.y); // 1000

  centerX = baseCanvasH / 2;
  centerY = baseCanvasH / 2;

  _layer1 = createGraphics(baseCanvasW, baseCanvasH); // 1000 x 1000
  baseCanvas = createGraphics(baseCanvasW, baseCanvasH); // 1000 x 1000

  _whichCanvas = baseCanvas;
  _w           = baseCanvasW;
  _h           = baseCanvasH;
  _s           = 1.0;

  createbackground(_layer1);
}

function draw() {
  _whichCanvas.image(_layer1, 0, 0);
  image(_whichCanvas,0,0);
}

function createbackground(layer){

  let iteration = 30;

  while(iteration > 0) {

      let randomRot = rotationValues[Math.round(random(0, 3))];
      let rectWidth = random(_w * 0.1, _w * 0.8);
      let rectHeight =  random(_h * 0.05, _h * 0.2);
      let randX =  random(0, _w);
      let randY =  random(0, _h);

      let randomGradient = Math.round(random(0, 3));

      let c1 = colorBackground[randomGradient][0];
      let c2 = colorBackground[randomGradient][1];

      layer.translate(centerX, centerY);
      layer.rectMode(CENTER);
      layer.rotate(radians(randomRot));
      layer.translate(-centerX, -centerY);

      setGradient(layer, randX, randY, rectWidth, rectHeight, c2, c1, X_AXIS);
      layer.noStroke();
      iteration--;
  }

}

function setGradient(layer, x, y, w, h, c1, c2, axis) {

  let inter;

  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (let i = y; i <= y+h; i++) {
      inter = map(i, y, y+h, 0, 1);
      let c = lerpColor(c1, c2, inter);
      layer.stroke(c);
      layer.line(x, i, x+w, i);
    }
  }
  else if (axis == X_AXIS) {  // Left to right gradient
    for (let i = x; i <= x+w; i++) {
     inter = map(i, x, x+w, 0, 1);
      let c = lerpColor(c1, c2, inter);
      layer.stroke(c);
      layer.line(i, y, i, y+h);
    }
  }
}