const Y_AXIS = 1;

const X_AXIS = 2;

let b1, b2, c1, c2;

​

​

function setup() {

  createCanvas(480, 480);

    // Define colors

  c1 = color('rgb(255, 245, 221)');

  c2 = color('rgb(46, 164, 0)');

}

​

function draw() {

  background(236, 236, 236);

  for (let i = 0; i < 12; i++) {

    // fill(0);

    // rect(0, height/12*i, width, height/12);

    stroke(255);  

    line(0, height/12*i, width, height/12*i);

  }

  let t = new Date(); //update to now

  var hr = t.getHours() % 12;

  var mn = t.getMinutes();

    var sec = t.getSeconds();

  // console.log(hr, ":", mn);

  push();

  noStroke();

  setGradient(0, height/12*hr, width/60*mn, height/12, c1, c2, X_AXIS);

  pop();

}

​

​

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);

    }

  }

}