basic scheduling

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 { sequence, stack, pure } = strudel; // make available to eval
+const parse = (code: string): Pattern => {
+  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 [events, setEvents] = useState<Hap<any>[]>([]);
+  const [code, setCode] = useState<string>(
+    // "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);
-      console.log('pattern', pattern);
-      setEvents(pattern.query(ts(0, 1)));
-      console.log('events', events);
+      const _pattern = parse(code);
+      setPattern(_pattern);
+      // cycle.query(cycle.activeCycle()); // reschedule active cycle
       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;