working but animation is weird

packages/core/cyclist.mjs

@@ -36,7 +36,6 @@ export class Cyclist {
           const time = getTime();
           const begin = this.lastEnd;
           this.lastBegin = begin;
-          console.log();
           //convert ticks to cycles, so you can query the pattern for events
           const eventLength = duration * this.cps;
           const num_cycles_since_cps_change = this.num_ticks_since_cps_change * eventLength;

packages/core/cyclistworker.js

@@ -4,10 +4,9 @@ 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;
+let started = false;
 
 //incoming
 //cps message
@@ -17,22 +16,30 @@ let interval = 0.1;
 // {type: toggle, payload?: {started: boolean}}
 
 //sending
-//{type: 'tick', payload: {begin, end, deadline }}
+//{type: 'tick', payload: {begin, end, tickdeadline, cps, time }}
 //{type: 'log', payload: {type, text}}
 
 const getTime = () => {
   return performance.now() / 1000;
 };
 
-const sendMessage = (message) => {
+const sendMessage = (type, payload) => {
   allPorts.forEach((port) => {
-    port.postMessage(message);
+    port.postMessage({ type, payload });
   });
 };
 const log = (text, type) => {
-  sendMessage({ type: 'log', payload: { text, type } });
+  sendMessage('log', { text, type });
 };
 
+const numClientsConnected = () => allPorts.length;
+
+const getCycle = () => {
+  const secondsSinceLastTick = getTime() - lastTick - clock.duration;
+  const cycle = lastBegin + secondsSinceLastTick * cps;
+  return cycle;
+};
+// let prevtime = 0;
 let clock = createClock(
   getTime,
   // called slightly before each cycle
@@ -41,6 +48,9 @@ let clock = createClock(
       num_cycles_at_cps_change = lastEnd;
     }
     num_ticks_since_cps_change++;
+    // const now = Date.now();
+    // console.log('interval', now - prevtime);
+    // prevtime = now;
     try {
       const time = getTime();
       const begin = lastEnd;
@@ -52,7 +62,7 @@ let clock = createClock(
       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, cps, time: Date.now() } });
+      sendMessage('tick', { begin, end, tickdeadline, cps, time: Date.now(), cycle: getCycle() });
     } catch (e) {
       log(`[cyclist] error: ${e.message}`, 'error');
     }
@@ -62,17 +72,11 @@ let clock = createClock(
 
 self.onconnect = function (e) {
   // the incoming port
-  var port = e.ports[0];
+  const port = e.ports[0];
   allPorts.push(port);
-
-  sendMessage('yooooo');
-
   port.addEventListener('message', function (e) {
-    // get the message sent to the worker
-
     processMessage(e.data);
   });
-
   port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
 };
 
@@ -88,19 +92,16 @@ const processMessage = (message) => {
       break;
     }
     case 'toggle': {
-      const { started } = payload;
+      if (payload.started && !started) {
-      if (started) {
+        started = true;
         clock.start();
-      } else {
+        //dont stop the clock if others are using it...
+      } else if (numClientsConnected() === 1) {
+        started = false;
         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 } });
-    }
   }
 };
 
@@ -124,7 +125,7 @@ function createClock(
     if (phase === 0) {
       phase = t + minLatency;
     }
-    console.log({ t, phase, tick });
+    // console.log({ t, phase, tick });
     // callback as long as we're inside the lookahead
     while (phase < lookahead) {
       phase = Math.round(phase * precision) / precision;
@@ -149,6 +150,5 @@ function createClock(
   };
   const getPhase = () => phase;
 
-  // setCallback
   return { setDuration, start, stop, pause, duration, interval, getPhase, minLatency };
 }

packages/core/deep-thought.js

@@ -1,5 +0,0 @@
-self.onmessage = ({ data: { question } }) => {
-  self.postMessage({
-    answer: 42,
-  });
-};

packages/core/draw.mjs

@@ -124,6 +124,7 @@ export class Drawer {
         const lookahead = this.drawTime[1];
         // calculate current frame time (think right side of screen for pianoroll)
         const phase = this.scheduler.now() + lookahead;
+
         // first frame just captures the phase
         if (this.lastFrame === null) {
           this.lastFrame = phase;

packages/core/index.mjs

@@ -19,6 +19,7 @@ export * from './speak.mjs';
 export * from './evaluate.mjs';
 export * from './repl.mjs';
 export * from './cyclist.mjs';
+export * from './neocyclist.mjs';
 export * from './logger.mjs';
 export * from './time.mjs';
 export * from './draw.mjs';

packages/core/neocyclist.mjs

@@ -11,15 +11,22 @@ export class NeoCyclist {
     this.latency = latency;
     this.worker = new SharedWorker(new URL('./cyclistworker.js', import.meta.url));
     this.worker.port.start();
+    this.cycle = 0;
+    this.cps = 1;
     this.worker.port.addEventListener('message', (message) => {
+      if (!this.started) {
+        return;
+      }
       const { payload, type } = message.data;
 
       switch (type) {
         case 'tick': {
-          let { begin, end, cps, tickdeadline, time } = payload;
+          let { begin, end, cps, tickdeadline, time, cycle } = payload;
-          const messageLatency = (Date.now() - time) / 1000;
+          this.cps = cps;
-          tickdeadline = tickdeadline - messageLatency;
+          this.cycle = cycle + latency * cps;
-          console.log({ begin, end });
+          //   const messageLatency = (Date.now() - time) / 1000;
+          //   latency = latency - messageLatency
+
           const haps = this.pattern.queryArc(begin, end);
           haps.forEach((hap) => {
             if (hap.part.begin.equals(hap.whole.begin)) {
@@ -46,7 +53,8 @@ export class NeoCyclist {
   }
 
   now() {
-    return performance.now() / 1000;
+    // console.log(this.cycle, 'cycle');
+    return this.cycle;
     // this.sendMessage('requestcycles', {});
   }
   setCps(cps = 1) {

packages/core/repl.mjs

@@ -31,21 +31,6 @@ export function repl({
     started: false,
   };
 
-  const worker = new Worker(new URL('./deep-thought.js', import.meta.url));
-  worker.postMessage({
-    question: 'The Answer to the Ultimate Question of Life, The Universe, and Everything.',
-  });
-  worker.onmessage = ({ data: { answer } }) => {
-    console.log(answer);
-  };
-
-  // const sharedworker = new SharedWorker(new URL('./cyclistworker.js', import.meta.url));
-
-  // sharedworker.port.start();
-  // sharedworker.port.addEventListener('message', (message) => {
-  //   console.log(message);
-  // });
-
   const updateState = (update) => {
     Object.assign(state, update);
     state.isDirty = state.code !== state.activeCode;
@@ -65,14 +50,16 @@ export function repl({
   // });
 
   const scheduler = new NeoCyclist({
-    interval,
+    // interval,
     onTrigger: getTrigger({ defaultOutput, getTime }),
     onError: onSchedulerError,
+    // latency: 0.22,
     onToggle: (started) => {
       updateState({ started });
       onToggle?.(started);
     },
   });
+
   let pPatterns = {};
   let allTransform;
 

packages/webaudio/webaudio.mjs

@@ -30,7 +30,12 @@ export function webaudioScheduler(options = {}) {
     ...options,
   };
   const { defaultOutput, getTime } = options;
-  return new strudel.Cyclist({
+  // return new strudel.Cyclist({
+  //   ...options,
+  //   onTrigger: strudel.getTrigger({ defaultOutput, getTime }),
+  // });
+  console.log('here');
+  return new strudel.NeoCyclist({
     ...options,
     onTrigger: strudel.getTrigger({ defaultOutput, getTime }),
   });