let c;

function preload() {

  img = loadImage('invert.png');

  // preload() runs once

  // load images

}

​

function setup() {

  createCanvas(310, 235);

      clockFont = loadFont("SFUIDisplay-Thin.otf");

​

}

​

function draw() {

  background(270);

        image(img, -15, 0, 310, 235);

  //set up a new date object and store our computers date in it

  // do this is the draw so it's constantly updating.

  {  let theDate = new Date()

​

//convert to US style time and use the Europe/Madrid timezone

  //see the toLocaleTimeString for more info and more detailed formatting: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

  let barca = theDate.toLocaleTimeString('en-US', { timeZone: 'America/Chicago',hour: '2-digit', minute:'2-digit' })

  //more time zones here: MINNEAPOLIS

  // https://gist.github.com/rxaviers/8481876

  text(barca, 280,40)

  textSize(30);

    textFont(clockFont);

  fill(50);

  }

   {  let theDate = new Date()

​

//convert to US style time and use the Europe/Madrid timezone

  //see the toLocaleTimeString for more info and more detailed formatting: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

  let barca = theDate.toLocaleTimeString('en-US', { timeZone: 'EIRE',hour: '2-digit', minute:'2-digit' })

  //more time zones here: AMSTERDAM

  // https://gist.github.com/rxaviers/8481876

  text(barca, 280,80)

      textSize(30);

    textFont(clockFont);

  fill(50);

  }

    {  let theDate = new Date()

​

//convert to US style time and use the Europe/Madrid timezone

  //see the toLocaleTimeString for more info and more detailed formatting: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

  let barca = theDate.toLocaleTimeString('en-US', { timeZone: 'Australia/Lindeman',hour: '2-digit', minute:'2-digit' })

  //more time zones here: Melbourne

  // https://gist.github.com/rxaviers/8481876

  text(barca, 280,160)

       textSize(30);

    textFont(clockFont);

  fill(50);

  }

     {  let theDate = new Date()

​

//convert to US style time and use the Europe/Madrid timezone

  //see the toLocaleTimeString for more info and more detailed formatting: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

  let barca = theDate.toLocaleTimeString('en-US', { timeZone: 'Europe/Berlin',hour: '2-digit', minute:'2-digit' })

  //more time zones here: Barcelona

  // https://gist.github.com/rxaviers/8481876

  text(barca, 280,120)

        textSize(30);

    textFont(clockFont);

  fill(50);

  }

       {  let theDate = new Date()

​

//convert to US style time and use the Europe/Madrid timezone

  //see the toLocaleTimeString for more info and more detailed formatting: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

  let barca = theDate.toLocaleTimeString('en-US', { timeZone: 'Europe/Madrid',hour: '2-digit', minute:'2-digit' })

  //more time zones here: AMSTERDAM

  // https://gist.github.com/rxaviers/8481876

  text(barca, 280,200)

          textSize(30);

    textFont(clockFont);

                textAlign(RIGHT);

  fill(50);

  }

}