strudel/packages/core/cyclistworker.js

const allPorts = [];
let cps = 1;
let num_ticks_since_cps_change = 0;
let lastTick = 0; // absolute time when last tick (clock callback) happened
let lastBegin = 0; // query begin of last tick
let lastEnd = 0; // query end of last tick
// let getTime = getTime; // get absolute time
let num_cycles_at_cps_change = 0;
// let onToggle = onToggle;
let interval = 0.1;

//incoming
//cps message
// {type: 'cpschange', payload: {cps}}

//toggle
// {type: toggle, payload?: {started: boolean}}

//sending
//{type: 'tick', payload: {begin, end, deadline }}
//{type: 'log', payload: {type, text}}

const getTime = () => {
  return performance.now();
};

const sendMessage = (message) => {
  allPorts.forEach((port) => {
    port.postMessage(message);
  });
};
const log = (text, type) => {
  sendMessage({ type: 'log', payload: { text, type } });
};

let clock = createClock(
  getTime,
  // called slightly before each cycle
  (phase, duration, tick) => {
    if (num_ticks_since_cps_change === 0) {
      num_cycles_at_cps_change = lastEnd;
    }
    num_ticks_since_cps_change++;
    try {
      const time = getTime();
      const begin = lastEnd;
      lastBegin = begin;
      //convert ticks to cycles, so you can query the pattern for events
      const eventLength = duration * cps;
      const num_cycles_since_cps_change = num_ticks_since_cps_change * eventLength;
      const end = num_cycles_at_cps_change + num_cycles_since_cps_change;
      lastEnd = end;
      const tickdeadline = phase - time; // time left until the phase is a whole number
      lastTick = time + tickdeadline;
      sendMessage({ type: 'tick', payload: { begin, end, tickdeadline } });
    } catch (e) {
      log(`[cyclist] error: ${e.message}`, 'error');
    }
  },
  interval, // duration of each cycle
);

self.onconnect = function (e) {
  // the incoming port
  var port = e.ports[0];
  allPorts.push(port);

  allPorts.forEach((port) => {
    port.postMessage('yoooo');
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

self.onmessage = (message) => {
  const { type, payload } = message;
  switch (type) {
    case 'cpschange': {
      if (payload.cps !== cps) {
        cps = payload.cps;
        num_ticks_since_cps_change = 0;
      }
      break;
    }
    case 'toggle': {
      const { started } = payload;
      if (started) {
        clock.start();
      } else {
        clock.stop();
      }
      break;
    }
    case 'requestcycles': {
      const secondsSinceLastTick = getTime() - lastTick - clock.duration;
      const cycles = this.lastBegin + secondsSinceLastTick * this.cps; // + this.clock.minLatency;
      sendMessage({ type: 'requestedcycles', payload: { cycles } });
    }
  }
};

function createClock(
  getTime,
  callback, // called slightly before each cycle
  duration = 0.05, // duration of each cycle
  interval = 0.1, // interval between callbacks
  overlap = 0.1, // overlap between callbacks
) {
  let tick = 0; // counts callbacks
  let phase = 0; // next callback time
  let precision = 10 ** 4; // used to round phase
  let minLatency = 0.01;

  const setDuration = (setter) => (duration = setter(duration));
  overlap = overlap || interval / 2;
  const onTick = () => {
    const t = getTime();
    const lookahead = t + interval + overlap; // the time window for this tick
    if (phase === 0) {
      phase = t + minLatency;
    }
    // callback as long as we're inside the lookahead
    while (phase < lookahead) {
      phase = Math.round(phase * precision) / precision;
      phase >= t && callback(phase, duration, tick);
      phase < t && console.log('TOO LATE', phase); // what if latency is added from outside?
      phase += duration; // increment phase by duration
      tick++;
    }
  };
  let intervalID;
  const start = () => {
    clear(); // just in case start was called more than once
    onTick();
    intervalID = setInterval(onTick, interval * 1000);
  };
  const clear = () => intervalID !== undefined && clearInterval(intervalID);
  const pause = () => clear();
  const stop = () => {
    tick = 0;
    phase = 0;
    clear();
  };
  const getPhase = () => phase;

  // setCallback
  return { setDuration, start, stop, pause, duration, interval, getPhase, minLatency };
}