How to make a digital clock in p5.js ?

0 0 1 minute read

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/

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!