//time-related functions in P5 and plain JS

​

function setup() {

  createCanvas(400, 400);

  textSize(20);

}

​

function draw() {

  let y = 20, x = 20, step = 20;

  background(220);

  //See source https://github.com/processing/p5.js/blob/main/src/utilities/time_date.js

  text(hour(), x, y+=step); //just using x and y to place a bunch of text on screen without hardcoding position

  text(minute(), x, y+=step);

  text(second(), x, y+=step);

  text(millis(), x, y+=step);

  text(month(), x, y+=step);

  text(day(), x, y+=step);

  text(year(), x, y+=step);

//   //P5 is basically wrapping the JS Date object functions (and tweaking the syntax just bc).  

//   //Here's the vanilla JS way to do the same.

//   //See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

  let now = new Date();

  text(now.getHours(), x, y+=2*step);  

  text(now.getMinutes(), x, y+=step);  

  text(now.getSeconds(), x, y+=step);  //etc.

  //JS Date object knows timezones, and can format and ingest date strings

    text(now.getMonth(), x, y+=step);  //etc.

​

  text(now.getUTCHours(), x, y+=2*step);

  text(now.getTimezoneOffset(), x, y+=step);  //in minutes - can you think why?

  text(now, x, y+=step); //basic object converts to human-readable string

  text(now.getTime(), x, y+=step); //anyone know what this is? 

​

}