p5.js Date object and millis() synchronization across regional time zones

Answer the Question First

Use a single offset between Date.now() and millis() to translate the sketch’s internal clock into a UTC timestamp, then format that timestamp in the desired zone with Intl.DateTimeFormat. Re‑calculate the offset periodically to absorb system clock drift, DST jumps, or NTP resynchronisation.

Why This Works

• millis() is derived from performance.now(), which is monotonic and unaffected by local time zone changes.
• Date.now() reflects the host’s wall‑clock, including DST and NTP adjustments.
• Subtracting the two at sketch start gives a constant offset that maps millis() to UTC.
• Re‑evaluating the offset every minute (or on a tab‑visibility change) keeps the mapping accurate even if the system clock jumps.

Step‑by‑Step Implementation

1. let startTime = Date.now();
2. let startMillis = millis();
3. let utcOffset = startTime - startMillis;
4. When you need a UTC timestamp:

   let utcMs = millis() + utcOffset;

5. Create a Date from that UTC value:

   let utcDate = new Date(utcMs);

6. Format for a target zone (replace Europe/Paris with your zone):

   let formatter = new Intl.DateTimeFormat('en-US', {
     timeZone: 'Europe/Paris',
     hour: '2-digit', minute: '2-digit', second: '2-digit'
   });
   let formatted = formatter.format(utcDate);

7. Periodically refresh utcOffset:

   function refreshOffset() {
     let nowTime = Date.now();
     let nowMillis = millis();
     utcOffset = nowTime - nowMillis;
   }
   setInterval(refreshOffset, 60000); // every minute
   

Handling Browser Support

Most modern browsers support Intl.DateTimeFormat with the timeZone option. If you must support older engines, fall back to UTC getters:

function toZone(date, offsetHours) {
  let utc = date.getTime();
  let zoneTime = new Date(utc + offsetHours*3600*1000);
  return zoneTime.toLocaleString();
}

Diagnostic Question

Does the target browser implement Intl.DateTimeFormat with the timeZone option? If not, you’ll need the UTC‑getter fallback above.

Practical Verification

• Log utcOffset every minute; it should stay within a few milliseconds unless the system clock changes.
• Render a live clock using the formatted string and compare it against a trusted online time service for the chosen zone.
• Simulate a DST transition by manually shifting the system clock and observe that the offset recalibration keeps the displayed time correct.

Assumptions & Uncertainty

• Assumes the sketch runs in a browser that supports performance.now() and Intl.DateTimeFormat (most recent releases).
• Performance.now() may pause when the tab is inactive; frequent offset recalibration mitigates temporary drift.
• Large system clock jumps (e.g., manual NTP sync) can still cause noticeable jumps; consider throttling updates if smoothness is critical.

Conclusion

By anchoring millis() to UTC with a recalibrated offset and formatting with Intl.DateTimeFormat, you achieve consistent, zone‑aware timestamps that stay in sync across all global regions without external libraries.