​

// function draw() { 

​

// }

​

let colors = new Array(3);

let index;

let val1;

let val2;

let val3; 

let initTime;

let currTime;

let interval;

​

​

function setup() {

    createCanvas(750,750);

    index = 0;

    frameRate(60);

    colors[0] = color('#9B0B15');  

    colors[1] = color('#3AFA9E');

    colors[2] = color('#FAAD3A');

    val1 = 153;

    val2 = 204;

    val3 = 51;

    initTime = millis();

    interval = (2 * 1000); // 2 second interval

    background(220);

    var color1 = color(0, 0, val1%255);

    var color2 = color(val2%255, val3%255, 0);

    setGradient(0, 0, windowWidth, windowHeight, color1, color2, "Y");

    // push();

    // translate(windowWidth/2,windowHeight/2);

    // textAlign(CENTER);

    // textSize(20);

    // text("hot", 0,0);

    // pop();

}

​

function fillGeneral(frameCount) {

  // Cycles through different colors

  fill(colors[index]);

  if (frameCount == 0) {

    index += 1;

    if (index > 2){

      index = 0;

    }

  }

}

​

​

function fillSpecial(swap) {

  if (swap) {

    fill(color('#004AFF'));

  }

  else {

     fill(color('#FFEC15'));

  }

}

​

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

  noFill();

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

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

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

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

      stroke(c);

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

    }

  }  

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

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

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

      var d = lerpColor(c1, c2, inter2);

      stroke(d);

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

    }

  }

}

​

// hours in military time... 

​

function draw() { 

    currTime = millis();

    // if (currTime % interval < 100) {

    //   val1 += round(random(0,5));

    //   val2 += 1;

    //   val3 += round(random(0,5));

    // }

    let triangleDim = 25;

    var m = minute();

    var h = hour();

    push();

    translate(width/2,height/7);

    fill(color('#FF151C')); 

    triangle(-triangleDim, 0, 0, triangleDim, triangleDim, 0);

    triangle(-triangleDim, 540, 0, triangleDim+(490), triangleDim, 540);

    pop();

    push();

    translate(4*width/5+45,height/2);

    fill(color('#FF151C'));

    triangle(0, triangleDim, -triangleDim,0, 0,-triangleDim);

    triangle(-540, triangleDim, -triangleDim-490,0, -540,-triangleDim);

    pop();

    translate(width/2,height/2);

    let s = h + ":" + m;

    if (frameCount%60 == 0) { // Clear out Text so it doesn't overlap when updated

      rectMode(CENTER);  

      noStroke();

      let c = get(windowWidth, windowHeight);

      fill(c);

      rect(0,0,60,60);

      rectMode(CORNER);

    }

    fill(200);

    textAlign(CENTER);

    textSize(20);

    text(s, 0,0);

    rotate(radians(frameCount*6)); 

    if ((frameCount % 60 == 5 * h) || (frameCount % 60 == 5 * (h-12))) // for 24 hours 

    {

          fillSpecial(true);   

    } 

    else {

          fillGeneral(frameCount%60);

    }

    stroke(color('#2F2A6A'));

    strokeJoin(BEVEL);

    strokeWeight(4.0);

    ellipse(0,-100,50,100);

    m = minute();

    if ((frameCount % 60 == m))

        {

          fillSpecial(false);

        } 

    else {

          fill(color('#E838FC'));

        }

    stroke(color('#072889'));

    strokeJoin(ROUND);

    strokeWeight(4.0);

    ellipse(0,-175,50,75);

    var sec = second();

    if ((frameCount % 60 == sec))

        {

          fillSpecial(true);

        } 

        else {

          fill(color('#E3FF15'));

        }

    stroke(0);

    strokeJoin(MITER);

    strokeWeight(5.0);

    rect(0,-250,40,40);

}