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

// or try in the wayback machine:

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

​

let dim;

let c1, c2, c3, c4;

​

function setup() {

  createCanvas(800, 800);

  dim = width * 1.5;

  background(0);

  noStroke();

  ellipseMode(RADIUS);

  c1 = color('white');

  c2 = color('blue');

  c3 = color(random(255), random(255), random(255))

  c4 = color(random(255), random(255), random(255))

}

​

function draw() {

  background(0);

  drawGradient(

    width / 2,

    height / 2,

    lerpColor(c1, c3, mouseX / width),

    lerpColor(c2, c4, mouseY / height)

  );

}

​

function drawGradient(x, y, c1, c2) {

  let radius = dim / 2;

  for (let r = radius; r > 0; --r) {

    const c3 = lerpColor(c1, c2, r / (dim / 2));

    fill(c3);

    circle(x, y, r);

  }

}

​

function keyPressed() {

  c1 = color(random(255), random(255), random(255))

  c2 = color(random(255), random(255), random(255))

  c3 = color(random(255), random(255), random(255))

  c4 = color(random(255), random(255), random(255))

}