basic scheduling

repl/package-lock.json

@@ -6,7 +6,8 @@
     "": {
       "dependencies": {
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "tone": "^14.7.77"
       },
       "devDependencies": {
         "@snowpack/plugin-dotenv": "^2.1.0",
@@ -315,7 +316,6 @@
       "version": "7.17.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
       "integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -2010,6 +2010,18 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
+    "node_modules/automation-events": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-4.0.12.tgz",
+      "integrity": "sha512-7tu7q/rw3vFuAwjBoarCGql3V0HkC5QAbZUYhOblxxkHzdLUTjVotm0iaIRwiCSqxMeoFK64LrgaSCuSZguvGA==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "tslib": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=12.20.1"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.2",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
@@ -6717,8 +6729,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-      "dev": true
     },
     "node_modules/request": {
       "version": "2.88.2",
@@ -7451,6 +7462,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/standardized-audio-context": {
+      "version": "25.3.20",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.20.tgz",
+      "integrity": "sha512-c6eMQXmN7iDS7ROuSqOrHQhxpazerJSnRHEJiKD8YkruZBTt/a5E7zmk+KkStoi0dohFAod8wvwWxc7S1gmdig==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.0",
+        "automation-events": "^4.0.12",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -7831,6 +7852,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tone": {
+      "version": "14.7.77",
+      "resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
+      "integrity": "sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==",
+      "dependencies": {
+        "standardized-audio-context": "^25.1.8",
+        "tslib": "^2.0.1"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -7865,8 +7895,7 @@
     "node_modules/tslib": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
-      "dev": true
     },
     "node_modules/tsscmp": {
       "version": "1.0.6",
@@ -8592,7 +8621,6 @@
       "version": "7.17.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
       "integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -10009,6 +10037,15 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
+    "automation-events": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-4.0.12.tgz",
+      "integrity": "sha512-7tu7q/rw3vFuAwjBoarCGql3V0HkC5QAbZUYhOblxxkHzdLUTjVotm0iaIRwiCSqxMeoFK64LrgaSCuSZguvGA==",
+      "requires": {
+        "@babel/runtime": "^7.16.7",
+        "tslib": "^2.3.1"
+      }
+    },
     "autoprefixer": {
       "version": "10.4.2",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
@@ -13552,8 +13589,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-      "dev": true
     },
     "request": {
       "version": "2.88.2",
@@ -14102,6 +14138,16 @@
         "minipass": "^3.1.1"
       }
     },
+    "standardized-audio-context": {
+      "version": "25.3.20",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.20.tgz",
+      "integrity": "sha512-c6eMQXmN7iDS7ROuSqOrHQhxpazerJSnRHEJiKD8YkruZBTt/a5E7zmk+KkStoi0dohFAod8wvwWxc7S1gmdig==",
+      "requires": {
+        "@babel/runtime": "^7.17.0",
+        "automation-events": "^4.0.12",
+        "tslib": "^2.3.1"
+      }
+    },
     "statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -14397,6 +14443,15 @@
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true
     },
+    "tone": {
+      "version": "14.7.77",
+      "resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
+      "integrity": "sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==",
+      "requires": {
+        "standardized-audio-context": "^25.1.8",
+        "tslib": "^2.0.1"
+      }
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -14425,8 +14480,7 @@
     "tslib": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
-      "dev": true
     },
     "tsscmp": {
       "version": "1.0.6",

repl/package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "tone": "^14.7.77"
   },
   "devDependencies": {
     "@snowpack/plugin-dotenv": "^2.1.0",

repl/src/App.tsx

@@ -1,31 +1,69 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import logo from './logo.svg';
 import * as strudel from '../../strudel.mjs';
 import cx from './cx';
+import * as Tone from 'tone';
+import useCycle from './useCycle';
+import type { Hap, Pattern } from './types';
 
 const { Fraction, TimeSpan } = strudel;
 
 const fr = (v: number) => new Fraction(v);
 const ts = (start: number, end: number) => new TimeSpan(fr(start), fr(end));
-const parse = (code: string): Pattern<any> => {
+const parse = (code: string): Pattern => {
-  const { sequence, stack, pure } = strudel; // make available to eval
+  const { sequence, stack, pure, slowcat, slow } = strudel; // make available to eval
   return eval(code);
 };
+
+const synth = new Tone.Synth().toDestination();
+
 function App() {
-  const [code, setCode] = useState<string>("sequence('a', 'b', sequence('c', 'd'))");
+  const [code, setCode] = useState<string>(
-  const [events, setEvents] = useState<Hap<any>[]>([]);
+    // "sequence('c3', 'eb3', sequence('g3', 'f3'))" //
+    "slow(sequence('c3', 'eb3', sequence('g3', 'f3')), 'g3')" //
+  );
+  const [log, setLog] = useState('');
+  const logBox = useRef<any>();
   const [error, setError] = useState<Error>();
+  const [pattern, setPattern] = useState<Pattern>();
+  // logs events of cycle
+  const logCycle = (_events: any, cycle: any) => {
+    if (_events.length) {
+      setLog((log) => log + `${log ? '\n\n' : ''}# cycle ${cycle}\n` + _events.map((e: any) => e.show()).join('\n'));
+    }
+  };
+  // cycle hook to control scheduling
+  const cycle = useCycle({
+    onEvent: useCallback((time, event) => {
+      // console.log('event', event, time);
+      synth.triggerAttackRelease(event.value, event.duration, time);
+    }, []),
+    onQuery: useCallback((span) => pattern?.query(span) || [], [pattern]),
+    onSchedule: useCallback(
+      (_events, cycle) => {
+        // console.log('schedule', _events, cycle);
+        logCycle(_events, cycle);
+      },
+      [pattern]
+    ),
+    ready: !!pattern,
+  });
+  // parse pattern when code changes
   useEffect(() => {
     try {
-      const pattern = parse(code);
+      const _pattern = parse(code);
-      console.log('pattern', pattern);
+      setPattern(_pattern);
-      setEvents(pattern.query(ts(0, 1)));
+      // cycle.query(cycle.activeCycle()); // reschedule active cycle
-      console.log('events', events);
       setError(undefined);
     } catch (err: any) {
       setError(err);
     }
   }, [code]);
+  // scroll log box to bottom when log changes
+  useLayoutEffect(() => {
+    logBox.current.scrollTop = logBox.current?.scrollHeight;
+  }, [log]);
+
   return (
     <div className="h-[100vh] bg-slate-900 flex-row">
       <header className="px-2 flex items-center space-x-2 border-b border-gray-200 bg-white">
@@ -38,34 +76,28 @@ function App() {
           <textarea
             className={cx('w-full h-32 bg-slate-600', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}
             value={code}
-            onChange={(e) => setCode(e.target.value)}
+            onChange={(e) => {
+              setLog((log) => log + `${log ? '\n\n' : ''}✏️ edit\n${code}\n${e.target.value}`);
+              setCode(e.target.value);
+            }}
           />
         </div>
-        <textarea className="w-full h-64 bg-slate-600" value={events.map((e) => e.show()).join('\n')} readOnly />
+        <textarea
+          className="w-full h-64 bg-slate-600"
+          value={log}
+          readOnly
+          ref={logBox}
+          style={{ fontFamily: 'monospace' }}
+        />
+        <button
+          className="w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
+          onClick={() => cycle.toggle()}
+        >
+          {cycle.started ? 'pause' : 'play'}
+        </button>
       </section>
     </div>
   );
 }
 
 export default App;
-
-declare interface Fraction {
-  (v: number): Fraction;
-  d: number;
-  n: number;
-  s: number;
-}
-declare interface TimeSpan {
-  constructor: any; //?
-  begin: Fraction;
-  end: Fraction;
-}
-declare interface Hap<T> {
-  whole: TimeSpan;
-  part: TimeSpan;
-  value: T;
-  show: () => string;
-}
-declare interface Pattern<T> {
-  query: (span: TimeSpan) => Hap<T>[];
-}

repl/src/types.d.ts

@@ -0,0 +1,22 @@
+export declare interface Fraction {
+  (v: number): Fraction;
+  d: number;
+  n: number;
+  s: number;
+  sub: (f: Fraction) => Fraction;
+  sam: () => Fraction;
+}
+export declare interface TimeSpan {
+  constructor: any; //?
+  begin: Fraction;
+  end: Fraction;
+}
+export declare interface Hap<T = any> {
+  whole: TimeSpan;
+  part: TimeSpan;
+  value: T;
+  show: () => string;
+}
+export declare interface Pattern<T = any> {
+  query: (span: TimeSpan) => Hap<T>[];
+}

repl/src/useCycle.ts

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ToneEventCallback } from 'tone';
+import * as Tone from 'tone';
+import { TimeSpan } from '../../strudel.mjs';
+import type { Hap } from './types';
+
+export declare interface UseCycleProps {
+  onEvent: ToneEventCallback<any>;
+  onQuery?: (query: TimeSpan) => Hap[];
+  onSchedule?: (events: Hap[], cycle: number) => void;
+  ready?: boolean; // if false, query will not be called on change props
+}
+
+function useCycle(props: UseCycleProps) {
+  // onX must use useCallback!
+  const { onEvent, onQuery, onSchedule, ready = true } = props;
+  const [started, setStarted] = useState<boolean>(false);
+  const cycleDuration = 1;
+  const activeCycle = () => Math.floor(Tone.Transport.seconds / cycleDuration);
+
+  // pull events with onQuery + count up to next cycle
+  const query = (cycle = activeCycle()) => {
+    const timespan = new TimeSpan(cycle, cycle + 1);
+    const _events = onQuery?.(timespan) || [];
+    onSchedule?.(_events, cycle);
+    schedule(_events, cycle);
+  };
+
+  const schedule = (events: any[], cycle = activeCycle()) => {
+    // cancel events after current query. makes sure no old events are player for rescheduled cycles
+    // console.log('schedule', cycle);
+    const timespan = new TimeSpan(cycle, cycle + 1);
+    // query next cycle in the middle of the current
+    const cancelFrom = timespan.begin.valueOf();
+    Tone.Transport.cancel(cancelFrom);
+    const queryNextTime = (cycle + 1) * cycleDuration - 0.1;
+    Tone.Transport.schedule(() => {
+      // TODO: find out why this event is sometimes swallowed
+      query(cycle + 1);
+    }, queryNextTime);
+    // schedule events for next cycle
+    events?.forEach((event) => {
+      Tone.Transport.schedule((time) => {
+        const toneEvent = {
+          time: event.part.begin.valueOf(),
+          duration: event.part.end.valueOf() - event.part.begin.valueOf(),
+          value: event.value,
+        };
+        onEvent(time, toneEvent);
+      }, event.part.begin.valueOf());
+    });
+  };
+
+  useEffect(() => {
+    ready && query();
+  }, [onEvent, onSchedule, onQuery]);
+
+  const start = async () => {
+    console.log('start');
+    setStarted(true);
+    await Tone.start();
+    Tone.Transport.start('+0.1');
+  };
+  const stop = () => {
+    console.log('stop');
+    setStarted(false);
+    Tone.Transport.pause();
+  };
+  const toggle = () => (started ? stop() : start());
+  return { start, stop, onEvent, started, toggle, schedule, query, activeCycle };
+}
+
+export default useCycle;

strudel.mjs

@@ -524,6 +524,11 @@ function slowcat(pats) {
     return new Pattern(query)._splitQueries()
 }
 
+function slow(...pats) {
+  pats = pats.map(pat => reify(pat));
+  return slowcat(pats);
+}
+
 function fastcat(pats) {
     // Concatenation: as with slowcat, but squashes a cycle from each
     // pattern into one cycle
@@ -594,5 +599,5 @@ function silence() {
 
 
 export {Fraction, TimeSpan, Hap, Pattern, 
-    pure, stack, slowcat, fastcat, cat, sequence, polymeter}
+    pure, stack, slowcat, slow, fastcat, cat, sequence, polymeter}