var canvasWidth;
var canvasHeight;
var hrs;
var mins;
var secs;
var img;
function setup() {
canvasWidth = 400
canvasHeight = canvasWidth + canvasWidth/8;
createCanvas(canvasWidth, canvasHeight);
img=loadImage("clock base [Link]")
hrs = 0;
mins=0;
secs=0;
}
function draw() {
background( 72,191,145);
currentTime();
digitalClock();
analogClock();
}
function currentTime(){
hrs = hour();
mins=minute();
secs = second();
[Link](hrs,mins,secs);
}
function digitalClock(){
//Code for digital clock
let noon;
if (hrs >= 12){
noon= 'PM'
} else {
noon= 'AM'
}
//Display time
hrs = hrs%12;
if (hrs < 10){
hrs = '0'+hrs
}
if (mins < 10){
mins = '0'+mins
}
if (secs < 10){
secs = '0'+ secs
}
if(hrs == 0){
hrs=12;
}
let timeString =hrs+':'+mins+':'+secs+' '+noon;
noStroke();
fill(0,0,0);
textFont("Times New roman");
textSize(width/10)
textAlign(CENTER,CENTER);
text(timeString , width/2 , height/10);
}
function analogClock() {
//Code for analog clock
translate(width/2,height/1.7);
imageMode(CENTER);
image(img,0,0,width*1,width*1);
// set initial orientation
//rotate(180);
angleMode(DEGREES);
//Seconds Hand
push();
rotate(-90);
stroke("#030303");
strokeWeight(2);
let secondAngle = map(second(), 0, 60, 0, 360);
push();
rotate(secondAngle);
line(0, 0, 107, 0);
pop();
//Minute Hand
stroke("#000000");
strokeWeight(4);
let minuteAngle = map(minute(), 0, 60, 0, 360);
push();
rotate(minuteAngle);
line(0, 0, 100, 0);
pop();
//Hour Hand
stroke("#000000");
strokeWeight(6);
let hourAngle = map(hour() % 12, 0, 12, 0, 360);
push();
rotate(hourAngle);
line(0, 0, 60, 0);
pop();
stroke(255);
point(0, 0);
pop();
}
