​

let sec;

let minu;

let hr;

​

let dd;

let mm;

let yyyy;

​

let time;

​

let dots;

let dots2;

let tSize = 150;

let offset = tSize/5;

let textCol;

let shadCol;

let lightestCol;

​

let denoter;

​

let gray = 0;

let meter;

let tall;

​

function preload() {

  myFont = loadFont('data/Gameplay.ttf');

}

​

function setup() {

  createCanvas(800, 480);

  frameRate(12);

  meter = 0;

  blendMode(MULTIPLY);

}

​

function draw() {

  clear();

  background("#9bbc0f");

  textCol = '#0f380faa';

  shadCol = '#306230aa';

  secondLightest = '#30623066';

  lightestCol = '#8bac0f44';

  sec = second();

  minu = ("00" + minute()).substr(-2,2);

  hr = ("00" + hour()).substr(-2,2);

  dd = ("00" + day()).substr(-2,2);

  mm = ("00" + month()).substr(-2,2);

  yyyy = year();

  if (sec % 2 == 0) {

    dots = textCol;

  } else {

    dots = shadCol;

  }

    if (sec % 2 == 0) {

    dots2 = lightestCol;

  } else {

    dots2 = lightestCol;

  }

    if (hour() < 12) {

      denoter = "AM";

    } else {

      denoter = 'PM';

    }

    if (hr > 12) {

      hr = ("00" + (hour()-12)).substr(-2,2)

    }

    if(hr == '00') {

      hr = '12';

    }

​

      strokeWeight(1);

    stroke(lightestCol);

    for (i = 0; i<=width; i+=5){

    line(i,0,i,height);

    line(0,i,width,i);

  }

  if(meter > sec) {

    meter = -1;

  }

  meter+=1;

  //Shadow Drawing

  push();

  translate(-8,8);

  drawShad()

  pop();

  //MainDraw

  drawText();

  if (gray) {

    filter(GRAY);

​

  }

}

​

function mousePressed() {

    if (!gray) {

    gray = 1;

  } else if (gray) {

    gray = 0;

  }

​

}

​

function drawText () {

    noStroke();

  textFont(myFont);

  textSize(tSize);

  fill(dots);

  textAlign(CENTER);

  text(':', width/2,height/2); 

​

  fill(textCol);

  textAlign(RIGHT);

  text(hr, width/2 - offset,height/2);

​

  fill(textCol);

  textAlign(LEFT);

  text(minu, width/2 + offset,height/2);

  textSize(tSize/6);

 // fill(shadCol);

  textAlign(RIGHT);

  text(dd+"/"+mm+"/"+yyyy, width/2 - offset,height/2 + offset*2-12);

  textSize(tSize/12);

 // fill(shadCol);

  textAlign(RIGHT);

  text("dd/mm/yyyy", width/2 - offset,height/2 + offset*2.5-12);

  textSize(tSize/4);

 // fill(textCol);

  textAlign(LEFT);

  text(denoter, width/2 + offset,height/2 + offset*2);

    for (i = 0; i <= 59; i++) {

    strokeCap(SQUARE);

    strokeWeight(7);

      if(i == sec){

        tall = 3;

        strokeWeight(9);

​

      } else if (meter == i) {

        tall = map(i,0,60,0,3,1)

      } else {

        tall = 0;

      }

      if (i < sec){

        stroke(textCol);

        strokeWeight(6);

      }  else if (i > sec) {

        stroke(secondLightest);

        tall = -5;

        strokeWeight(5);

​

      } else if (i == sec && sec == 0){

        strokeWeight(9);

        stroke(textCol);

      }

​

    line(width / 8 + i*10+(i*10*1/60), height * .75-tall, width / 8 + i*10+(i*10*1/60), height * .85+tall);

  }

    strokeWeight(8);

    stroke(textCol);

  //total border

  noFill();

  rect(20,20,width-40,height-40);

  //second counter border

  strokeWeight(4);

  rect(width/8 - 15, height*.75-10, width/8 + 530, 70);

​

}

​

function drawShad () {

    noStroke();

  textFont(myFont);

  textSize(tSize);

  fill(dots2);

  textAlign(CENTER);

  text(':', width/2,height/2); 

​

 // fill(shadCol);

  textAlign(RIGHT);

  text(hr, width/2 - offset,height/2); 

​

 // fill(shadCol);

  textAlign(LEFT);

  text(minu, width/2 + offset,height/2);

  textSize(tSize/6);

  fill(lightestCol);

  textAlign(RIGHT);

  text(dd+"/"+mm+"/"+yyyy, width/2 - offset,height/2 + offset*2-12);

  textSize(tSize/12);

  fill(lightestCol);

  textAlign(RIGHT);

  text("dd/mm/yyyy", width/2 - offset,height/2 + offset*2.5-12);

    textSize(tSize/4);

  fill(lightestCol);

  textAlign(LEFT);

  text(denoter, width/2 + offset,height/2 + offset*2);

    for (i = 0; i <= sec; i++) {

    strokeCap(SQUARE);

    strokeWeight(7);

           stroke(lightestCol);

      if(i == sec){

        tall = 3;

        strokeWeight(9);

​

      } else if (meter == i) {

        tall = map(i,0,60,0,3,1)

      } else {

        tall = 0;

      }

      if (i < sec){

​

        strokeWeight(6);

      }  else if (i > sec) {

strokeWeight(5);

        tall = -5;

      }

    line(width / 8 + i*10+(i*10*1/60), height * .75-tall, width / 8 + i*10+(i*10*1/60), height * .85+tall);

  }

  //total border

  noFill();

  rect(20,20,width-40,height-40);

  //second counter border

  strokeWeight(4);

  rect(width/8 - 15, height*.75-10, width/8 + 530, 70);

}

​

function keyPressed() {

    let fs = fullscreen();

    fullscreen(!fs);

}