// https://editor.p5js.org/p5/sketches/Color:_Linear_Gradient

// or try in the wayback machine:

// https://p5js.org/examples/color-linear-gradient.html

​

// Constants

const Y_AXIS = 1;

const X_AXIS = 2;

let b1, b2, c1, c2;

​

function setup() {

  createCanvas(710, 400);

​

  // Define colors

  b1 = color(255, 0, 0);

  b2 = color(0, 0, 255);

}

​

function draw() {

  // Background

  const r = map(mouseY, 0, 400, 0, 255);

  console.log(r);

  b1 = color(r, 0, 0);

  setGradient(0, 0, mouseX, height, b1, b2, X_AXIS);

  setGradient(mouseX, 0, width - mouseX, height, b2, b1, X_AXIS);

}

​

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

  noFill();

​

  if (axis === Y_AXIS) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis === X_AXIS) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

}

​