The working of the clock is simple. The current hours, minutes and seconds is retrieved using the hour(), minute() and second() methods. The number returned is then padded with a “0” if it is less than 10 using the formatting function we will create. The AM or PM is determined by using the detected hours value. The whole time string is then displayed as a text using the text() method on the canvas.
Example:
Javascript
function setup() {
// Create Canvas of given size
createCanvas(480,480);
} function draw() {
// Set the background color
background(0);
// Set the strokeWeight to be thicker
strokeWeight(4);
// Get the current second, minute and hours
// and assign them to res variables
var sec = second();
var min = minute();
var hrs = hour();
// Check for AM or PM based on the
// hours and store it in a variable
var mer = hrs < 12 ? "AM" : "PM" ;
// Format the time so that leading
// 0's are added when needed
sec = formatting(sec);
min = formatting(min);
hrs = formatting(hrs % 12);
// Set the color of the background
fill(255);
// Set the font size
textSize(48);
// Set the text alignment in center
// and display the result
textAlign(CENTER, CENTER);
// Display the time
text(hrs + ":" + min + ":" + sec +
" " + mer, width/2, height/2);
} // This function pads the time // so that 0's are shown // eg. 06,08,05 etc. function formatting(num){
// Convert to int and check
// if less than 10
if (int(num) < 10) {
// Return the padded number
return "0" + num;
}
// Return the original number if
// padding is not required
return num;
} |
Output:
Online Code editor:https://editor.p5js.org/