SysTime

multi-device synchronization

Description

SysTime is one of the simpler Miniatures: it contains a mechanism for accessing the clock of the device it’s running on and rudimentary code for sending the current time externally (to other programs or devices). Therefore, it’s strictly a “utility” thumbnail, useful for those who want to experiment with multi-device synchronization techniques, such as those used in the “Noumen” and “Attention: Light!” 3.0 Miniatures.

Technical documentation

Parameters passed via URL

worker 0 or 1; default 0; allows blocking the browser’s built-in mechanisms that suspend the program when the window is not visible
ws address; disabled by default; enables and sets the address (usually localhost:9001) for WebSocket communication (allows external control of Miniature and customization)
xws address; disabled by default; enables and sets the address (usually ws://localhost:9001) with protocol specification for WebSocket communication (allows external control of Miniature and customization)

Messages passed via WebSocket

Messages to which Miniature responds

not applicable

Messages sent by Miniature

systime time t1 t2 t1 – time in milliseconds according to the system clock, t2 – the value of the current system time expressed in milliseconds, calculated based on hours, minutes, seconds, and milliseconds

MIDI

Messages to which Miniature responds

not applicable

Messages sent by Miniature

not applicable

Communication with MaxMSP

Messages to which Miniature responds

not applicable

Messages sent by Miniature

systime time t1 t2 t1 – time in milliseconds according to the system clock, t2 – the value of the current system time expressed in milliseconds, calculated based on hours, minutes, seconds, and milliseconds

Source code

									index.html
									<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="SysTime">
  <meta name="keywords" content="visual, score, graphic, recognition, sonification, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>"SysTime, Pawel Janicki, 2025-26, https://paweljanicki.jp</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #1b1b1b;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
  <script src="ws.js"></script>
  <script src="sketch.js" type="module"></script>

</head>

<body>
</body>

</html>
								

									sketch.js
									function detectMax(){try{window.max.outlet('Hello Max!');return true;}catch(_e){console.log('Max, where are you? '+_e);} return false;}
let s=function(p){
  let t1=0.0; let t2=0.0; let tstr="";
  let webSocket={
    isActive:false,monitorInput:false,
    processor:(new WS()),address:"ws://localhost:9001/",
    //receivedMessages:[],
  };
  let useWorker=false;
  const maxIsDetected=detectMax();
  p.setBackground=function(_gfx,_r,_g,_b,_setDocumentBodyStyleBackground){_r=Math.floor(_r);_g=Math.floor(_g);_b=Math.floor(_b);_gfx.background(_r,_g,_b);if(_setDocumentBodyStyleBackground) document.body.style.background = 'rgb(' + _r + ', ' + _g + ', ' + _b + ')';};
  p.setup=function(){
    p.handleUrlParams();p.createCanvas(10,10);p.initWebSocket();p.initMax();
    if(maxIsDetected){}
    //if(window.DeviceOrientationEvent){window.addEventListener("deviceorientation",p.onOrientationChange);}
    if(useWorker){
      p.noLoop();
      let intervalWorker = new Worker('worker.js');
      intervalWorker.onmessage = function(_e){p.handleWorker();}
      console.log("[setup] Worker set as clock source.");
    }else{p.frameRate(60);}
    p.textFont("Courier", 24)
  };
  p.handleWorker=function(){p.redraw();}
  p.draw=function(){
    if((p.width!=innerWidth)||(p.height!=innerHeight)) p.handleResize();
    let d = new Date(); t1=d.getTime(); t2=d.getMinutes()*60.0*1000.0+d.getSeconds()*1000.0+d.getMilliseconds();
    tstr=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()+"."+d.getMilliseconds();
    p.setBackground(p,0,0,0,true);
    p.noStroke();
    p.fill(100);
    let period=3.14*1000;
    let a=((t1*0.001)%period)/period*p.width*p.TWO_PI;
    let pos=t1*0.0001;
    let size=p.width*0.8; if(p.width>p.height) size=p.height*0.8;
    p.arc(p.width*0.5,p.height*0.5,size,size,pos,pos+a);
    p.fill(255);
    p.text("sys time: "+tstr+"\nsys time as millis: "+t1+"\nminutes+seconds+millis: "+t2,15,25);
    if(maxIsDetected) window.max.outlet("systime","time",t1,t2);
    if(webSocket.isActive&&webSocket.processor.isEnabled&&webSocket.processor.websocket) webSocket.processor.send(["systime","time",t1,t2]);
  };
  p.handleResize=function(){p.resizeCanvas(innerWidth,innerHeight);};
  p.initWebSocket=function(){
    if(!webSocket.isActive) return;
    webSocket.processor.init(webSocket.address,function(_msg){
      if(_msg===null) return; if(_msg===undefined) return; if(_msg.data===null) return; if(_msg.data===undefined) return;
      if(webSocket.monitorInput) console.log("[p.initWebSocket/handler] monitor: "+_msg.data);
    });
  };
  p.initMax=function(){
    if(!maxIsDetected) return;
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
  };
  p.handleUrlParams=function(){
    try{
      let urlparams = p.getURLParams();
      if(urlparams){
        if("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){useWorker=(v>0);} console.log("[p.handleUrlParams] worker: "+useWorker);}
        if("ws" in urlparams){webSocket.address="ws://"+decodeURIComponent(urlparams.ws)+"/"; webSocket.isActive=true; console.log("[p.handleUrlParams] (ws) webSocket.address: "+webSocket.address);}
        if("xws" in urlparams){webSocket.address=decodeURIComponent(urlparams.xws); webSocket.isActive=true; console.log("[p.handleUrlParams] (xws) webSocket.address: "+webSocket.address);}
      }
    }catch(_e){console.log("[setup] _e: "+_e);}
  };
};
let myp5 = new p5(s);
								

									worker.js
									var i = 0;

function timedCount(){
    i = i + 1;
    postMessage(i);
}

setInterval(timedCount, 1000.0/60.);
								

									ws.js
									// https://github.com/chr15m/pd-ws

class WS{
  constructor(){this.isEnabled=false; this.address="ws://localhost:9001/"; this.websocket=null;}
  init(_address,_handler){
    this.address=_address;
    this.websocket = new WebSocket(this.address);
    this.websocket.onmessage=function(_msg){_handler(_msg);}
    this.websocket.onopen=()=>{console.log("[WS, init, onopen] connected"); this.isEnabled=true;};
    this.websocket.onclose=()=>{console.log("[WS, init, onclose] disconnected"); this.isEnabled=false;};
    this.websocket.onerror=(_err)=>{console.log("[WS, init, onerror] "+_err);};
  }
  safeSend(_arr){if(this.isEnabled) this.send(_arr);} 
  send(_arr){this.websocket.send(_arr);} // ws.send(["hello", 42, "beep"])
}
								