Gradient Background

let lapse = 0;    // mouse timer

​

function setup() {

  createCanvas(1112, 834);

  frameRate(20);

}

​

function draw() {

drawSky();

}

​

function drawSky() {

  color1 = color(52, 195, 235); // light blue

  color2 = color(252, 252, 33); // yellow

  background(220);

  setGradient(0, 0, width, height, color1, color2, "X");

  var x = random(width);

  var y = random(height - 250);

  noStroke();

  fill(255, 255, 0);

  ellipse(x, y, 2, 2);

}

​

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

  noFill();

  if (axis == "Y") { // Top to bottom gradient

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

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

      c = lerpColor(c1, c2, inter);

      stroke(c);

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

    }

  } else if (axis == "X") { // Left to right gradient

    for (var j = x; j <= x + w; j++) {

      inter2 = map(j, x, x + w, 0, 1);

      d = lerpColor(c1, c2, inter2);

      stroke(d);

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

    }

  }

}

​

function mousePressed(){

// prevents mouse press from registering twice

  if (frameCount - lapse > 15){

    save('pix.jpg');

    lapse = frameCount;

  }

}