//built-in time functions in Javascript/P5.

//See comments below for helpful libraries

​

let now;

let dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", 

                "Thursday", "Friday", "Sarurday"];

​

function setup() {

  createCanvas(600, 400);

  frameRate(60); //why change this?

  textFont("Helvetica");

  textSize(50);

}

​

function draw() {

  //Classic JS Time - via the Date object: 

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

  now = new Date(); 

  background(230);

  //concatentate some time stuff into one long string:

  let timeString = now.getHours() + ":" + 

      now.getMinutes() + ":" +

      now.getSeconds() + ":" + 

      now.getMilliseconds();

  text(timeString, 100, 100);

  //Month and day functions return a number, e.g. 0-6 for the day of the week

  text(dayNames[now.getDay()], 100, 150); 

  //P5 has equivalent functions:

  text(second(), 100, 250); //Note this is the same as Date.getSeconds()

  text(int(millis()), 100, 300); //but this is ellapsed time since the sketch started

​

  //Things like timezones, ellapsed times, etc can be tricky with Date.

  //See notes on upcoming Date APIs that address these issues in JS:

  //https://tc39.es/proposal-temporal/docs/index.html

  //https://github.com/tc39/proposal-temporal

  //https://maggiepint.com/2017/04/09/fixing-javascript-date-getting-started/

​

  //Also third-party libraries:

  //https://momentjs.com/.  (but now listed as legacy project)

  //https://day.js.org/

}