meetup talk

update to tutorial documentation

.gitignore

@@ -34,4 +34,5 @@ repl_old
 tutorial.rendered.mdx
 doc.json
 talk/public/EmuSP12
-talk/public/samples
+talk/public/samples
+server/samples/old

packages/core/pattern.mjs

@@ -1014,13 +1014,6 @@ export class Pattern {
     return this._chunk(n, func, true);
   }
 
-  edit(...funcs) {
-    return stack(...funcs.map((func) => func(this)));
-  }
-  pipe(func) {
-    return func(this);
-  }
-
   _bypass(on) {
     on = Boolean(parseInt(on));
     return on ? silence : this;
@@ -1053,6 +1046,22 @@ export class Pattern {
   onTrigger(onTrigger) {
     return this._withHap((hap) => hap.setContext({ ...hap.context, onTrigger }));
   }
+  log(func = id) {
+    return this._withHap((hap) =>
+      hap.setContext({
+        ...hap.context,
+        onTrigger: (...args) => {
+          if (hap.context.onTrigger) {
+            hap.context.onTrigger(...args);
+          }
+          console.log(func(...args));
+        },
+      }),
+    );
+  }
+  logValues(func = id) {
+    return this.log((_, hap) => func(hap.value));
+  }
 }
 
 // TODO - adopt value.mjs fully..
@@ -1213,8 +1222,9 @@ export function pure(value) {
 
 export function isPattern(thing) {
   // thing?.constructor?.name !== 'Pattern' // <- this will fail when code is mangled
-  const is = thing instanceof Pattern || thing._Pattern;
-  if (!thing instanceof Pattern) {
+  const is = thing instanceof Pattern || thing?._Pattern;
+
+  if (thing?._Pattern && !thing instanceof Pattern) {
     console.warn(
       `Found Pattern that fails "instanceof Pattern" check.
       This may happen if you are using multiple versions of @strudel.cycles/core. 
@@ -1557,3 +1567,8 @@ Pattern.prototype.define = (name, func, options = {}) => {
 // Pattern.prototype.define('early', (a, pat) => pat.early(a), { patternified: true, composable: true });
 Pattern.prototype.define('hush', (pat) => pat.hush(), { patternified: false, composable: true });
 Pattern.prototype.define('bypass', (pat) => pat.bypass(on), { patternified: true, composable: true });
+
+export async function loadScript(url) {
+  const code = await fetch(url).then((res) => res.text());
+  return eval(code);
+}

packages/core/util.mjs

@@ -19,6 +19,9 @@ export const tokenizeNote = (note) => {
 
 // turns the given note into its midi number representation
 export const toMidi = (note) => {
+  if (typeof note === 'number') {
+    return note;
+  }
   const [pc, acc, oct] = tokenizeNote(note);
   if (!pc) {
     throw new Error('not a note: "' + note + '"');
@@ -31,6 +34,19 @@ export const fromMidi = (n) => {
   return Math.pow(2, (n - 69) / 12) * 440;
 };
 
+export const getFreq = (noteOrMidi) => {
+  if (typeof noteOrMidi === 'number') {
+    return fromMidi(noteOrMidi);
+  }
+  return fromMidi(toMidi(noteOrMidi));
+};
+
+export const midi2note = (n) => {
+  const oct = Math.floor(n / 12) - 1;
+  const pc = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'][n % 12];
+  return pc + oct;
+};
+
 // modulo that works with negative numbers e.g. mod(-1, 3) = 2
 // const mod = (n: number, m: number): number => (n < 0 ? mod(n + m, m) : n % m);
 export const mod = (n, m) => ((n % m) + m) % m;

packages/react/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useLayoutEffect } from 'react';
 import { CodeMirror as CodeMirror$1 } from 'react-codemirror6';
 import { EditorView, Decoration } from '@codemirror/view';
 import { StateEffect, StateField } from '@codemirror/state';
@@ -46,7 +46,13 @@ const materialPalenightTheme = EditorView.theme(
       lineHeight: '22px',
     },
     '.cm-line': {
-      background: '#2C323699',
+      // background: '#2C323699',
+      background: 'transparent',
+    },
+    '.cm-line > *': {
+      // background: '#2C323699',
+      background: '#00000090',
+      // background: 'transparent',
     },
     // done
     '&.cm-focused .cm-cursor': {
@@ -71,7 +77,7 @@ const materialPalenightTheme = EditorView.theme(
       backgroundColor: '#6199ff2f',
     },
 
-    '.cm-activeLine': { backgroundColor: highlightBackground },
+    '.cm-activeLine': { backgroundColor: cursor + '50' },
     '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
 
     '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
@@ -193,7 +199,7 @@ const highlightField = StateField.define({
             if (from > l || to > l) {
               return;
             }
-            const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
+            const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
             return mark.range(from, to);
           })).filter(Boolean), true);
         }
@@ -205,7 +211,7 @@ const highlightField = StateField.define({
   },
   provide: (f) => EditorView.decorations.from(f)
 });
-function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount }) {
+function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount, theme }) {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CodeMirror$1, {
     onViewChange: onViewChanged,
     style: {
@@ -217,7 +223,7 @@ function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorD
     onChange,
     extensions: [
       javascript(),
-      materialPalenight,
+      theme || materialPalenight,
       highlightField,
       flashField
     ]
@@ -288,8 +294,13 @@ function useCycle(props) {
     await Tone.start();
     Tone.getTransport().start('+0.1');
   };
-  const stop = () => {
-    Tone.getTransport().pause();
+  const stop = (setZero = false) => {
+    if (setZero) {
+      Tone.getTransport().cancel();
+      Tone.getTransport().stop();
+    } else {
+      Tone.getTransport().pause();
+    }
     setStarted(false);
   };
   const toggle = () => (started ? stop() : start());
@@ -351,13 +362,15 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
     }
   }, [activeCode, onDrawProp]);
 
+  const hideHeader = useMemo(() => activeCode && activeCode.includes('strudel hide-header'), [activeCode]);
+  const hideConsole = useMemo(() => activeCode && activeCode.includes('strudel hide-console'), [activeCode]);
   // cycle hook to control scheduling
   const cycle = useCycle({
     onDraw,
     onEvent: useCallback(
       (time, event, currentTime) => {
         try {
-          onEvent?.(event);
+          onEvent?.(time, event, currentTime);
           if (event.context.logs?.length) {
             event.context.logs.forEach(pushLog);
           }
@@ -366,8 +379,10 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
             if (defaultSynth) {
               const note = getPlayableNoteValue(event);
               defaultSynth.triggerAttackRelease(note, event.duration.valueOf(), time, velocity);
-            } else {
-              throw new Error('no defaultSynth passed to useRepl.');
+            } else if (!onEvent) {
+              throw new Error(
+                'no defaultSynth nor onEvent passed to useRepl + event has no onTrigger. nothing happens',
+              );
             }
             /* console.warn('no instrument chosen', event);
           throw new Error(`no instrument chosen for ${JSON.stringify(event)}`); */
@@ -408,16 +423,16 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
   });
 
   const activateCode = useCallback(
-    async (_code = code) => {
+    async (_code = code, evaluateOnly = false) => {
       if (activeCode && !dirty) {
         setError(undefined);
-        cycle.start();
+        !evaluateOnly && cycle.start();
         return;
       }
       try {
         setPending(true);
         const parsed = await evaluate(_code);
-        cycle.start();
+        !evaluateOnly && cycle.start();
         broadcast({ type: 'start', from: id });
         setPattern(() => parsed.pattern);
         if (autolink) {
@@ -448,7 +463,22 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
     }
   };
 
+  const stop = () => {
+    cycle.stop(true);
+    setActiveCode(undefined);
+  };
+
+  const evaluateOnly = () => {
+    activateCode(code, true);
+  };
+
+  useEffect(() => {
+    return () => stop();
+  }, []);
+
   return {
+    hideHeader,
+    hideConsole,
     pending,
     code,
     setCode,
@@ -459,8 +489,10 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
     dirty,
     log,
     togglePlay,
+    stop,
     setActiveCode,
     activateCode,
+    evaluateOnly,
     activeCode,
     pushLog,
     hash,
@@ -559,16 +591,25 @@ function Icon({ type }) {
       fillRule: "evenodd",
       d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z",
       clipRule: "evenodd"
+    }),
+    stop: /* @__PURE__ */ React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z",
+      clipRule: "evenodd"
     })
   }[type]);
 }
 
-function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
-  const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
+function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, init, onEvent, enableKeyboard }) {
+  const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } = useRepl({
     tune,
     defaultSynth,
-    autolink: false
+    autolink: false,
+    onEvent
   });
+  useEffect(() => {
+    init && evaluateOnly();
+  }, [tune, init]);
   const [view, setView] = useState();
   const [ref, isVisible] = useInView({
     threshold: 0.01
@@ -580,7 +621,25 @@ function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
     }
     return isVisible || wasVisible.current;
   }, [isVisible, hideOutsideView]);
-  useHighlighting({ view, pattern, active: cycle.started });
+  useHighlighting({ view, pattern, active: cycle.started && !activeCode?.includes("strudel disable-highlighting") });
+  useLayoutEffect(() => {
+    if (enableKeyboard) {
+      const handleKeyPress = async (e) => {
+        if (e.ctrlKey || e.altKey) {
+          if (e.code === "Enter") {
+            e.preventDefault();
+            flash(view);
+            await activateCode();
+          } else if (e.code === "Period") {
+            cycle.stop();
+            e.preventDefault();
+          }
+        }
+      };
+      window.addEventListener("keydown", handleKeyPress, true);
+      return () => window.removeEventListener("keydown", handleKeyPress, true);
+    }
+  }, [enableKeyboard, pattern, code, activateCode, cycle, view]);
   return /* @__PURE__ */ React.createElement("div", {
     className: styles.container,
     ref
@@ -598,11 +657,17 @@ function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
     onClick: () => activateCode()
   }, /* @__PURE__ */ React.createElement(Icon, {
     type: "refresh"
+  })), /* @__PURE__ */ React.createElement("button", {
+    className: cx(styles.button),
+    onClick: () => stop(true)
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    type: "stop"
   }))), error && /* @__PURE__ */ React.createElement("div", {
     className: styles.error
   }, error.message)), /* @__PURE__ */ React.createElement("div", {
     className: styles.body
   }, show && /* @__PURE__ */ React.createElement(CodeMirror, {
+    theme,
     value: code,
     onChange: setCode,
     onViewChanged: setView

packages/react/src/components/CodeMirror6.jsx

@@ -60,7 +60,8 @@ const highlightField = StateField.define({
                   if (from > l || to > l) {
                     return; // dont mark outside of range, as it will throw an error
                   }
-                  const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
+                  // const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
+                  const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
                   return mark.range(from, to);
                 }),
               )
@@ -78,7 +79,7 @@ const highlightField = StateField.define({
   provide: (f) => EditorView.decorations.from(f),
 });
 
-export default function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount }) {
+export default function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount, theme }) {
   return (
     <>
       <_CodeMirror
@@ -92,7 +93,7 @@ export default function CodeMirror({ value, onChange, onViewChanged, onCursor, o
         onChange={onChange}
         extensions={[
           javascript(),
-          materialPalenight,
+          theme || materialPalenight,
           highlightField,
           flashField,
           // theme, language, ...

packages/react/src/components/Icon.tsx

@@ -26,6 +26,13 @@ export function Icon({ type }) {
               clipRule="evenodd"
             />
           ),
+          stop: (
+            <path
+              fillRule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z"
+              clipRule="evenodd"
+            />
+          ),
         }[type]
       }
     </svg>

packages/react/src/components/MiniRepl.jsx

@@ -1,20 +1,25 @@
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
 import { useInView } from 'react-hook-inview';
 import useRepl from '../hooks/useRepl.mjs';
 import cx from '../cx';
 import useHighlighting from '../hooks/useHighlighting.mjs';
-import CodeMirror6 from './CodeMirror6';
+import CodeMirror6, { flash } from './CodeMirror6';
 import 'tailwindcss/tailwind.css';
 import './style.css';
 import styles from './MiniRepl.module.css';
 import { Icon } from './Icon';
 
-export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
-  const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
-    tune,
-    defaultSynth,
-    autolink: false,
-  });
+export function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, init, onEvent, enableKeyboard }) {
+  const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } =
+    useRepl({
+      tune,
+      defaultSynth,
+      autolink: false,
+      onEvent,
+    });
+  useEffect(() => {
+    init && evaluateOnly();
+  }, [tune, init]);
   const [view, setView] = useState();
   const [ref, isVisible] = useInView({
     threshold: 0.01,
@@ -26,7 +31,28 @@ export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
     }
     return isVisible || wasVisible.current;
   }, [isVisible, hideOutsideView]);
-  useHighlighting({ view, pattern, active: cycle.started });
+  useHighlighting({ view, pattern, active: cycle.started && !activeCode?.includes('strudel disable-highlighting') });
+
+  // set active pattern on ctrl+enter
+  useLayoutEffect(() => {
+    if (enableKeyboard) {
+      const handleKeyPress = async (e) => {
+        if (e.ctrlKey || e.altKey) {
+          if (e.code === 'Enter') {
+            e.preventDefault();
+            flash(view);
+            await activateCode();
+          } else if (e.code === 'Period') {
+            cycle.stop();
+            e.preventDefault();
+          }
+        }
+      };
+      window.addEventListener('keydown', handleKeyPress, true);
+      return () => window.removeEventListener('keydown', handleKeyPress, true);
+    }
+  }, [enableKeyboard, pattern, code, activateCode, cycle, view]);
+
   return (
     <div className={styles.container} ref={ref}>
       <div className={styles.header}>
@@ -37,11 +63,14 @@ export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
           <button className={cx(dirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
             <Icon type="refresh" />
           </button>
+          <button className={cx(styles.button)} onClick={() => stop(true)}>
+            <Icon type="stop" />
+          </button>
         </div>
         {error && <div className={styles.error}>{error.message}</div>}
       </div>
-      <div className={styles.body} >
-        {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />}
+      <div className={styles.body}>
+        {show && <CodeMirror6 theme={theme} value={code} onChange={setCode} onViewChanged={setView} />}
       </div>
     </div>
   );

packages/react/src/hooks/useCycle.mjs

@@ -66,8 +66,13 @@ function useCycle(props) {
     await Tone.start();
     Tone.getTransport().start('+0.1');
   };
-  const stop = () => {
-    Tone.getTransport().pause();
+  const stop = (setZero = false) => {
+    if (setZero) {
+      Tone.getTransport().cancel();
+      Tone.getTransport().stop();
+    } else {
+      Tone.getTransport().pause();
+    }
     setStarted(false);
   };
   const toggle = () => (started ? stop() : start());

packages/react/src/hooks/useRepl.mjs

@@ -4,7 +4,7 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { useCallback, useState, useMemo } from 'react';
+import { useCallback, useState, useMemo, useEffect } from 'react';
 import { evaluate } from '@strudel.cycles/eval';
 import { getPlayableNoteValue } from '@strudel.cycles/core/util.mjs';
 import useCycle from './useCycle.mjs';
@@ -36,13 +36,15 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
     }
   }, [activeCode, onDrawProp]);
 
+  const hideHeader = useMemo(() => activeCode && activeCode.includes('strudel hide-header'), [activeCode]);
+  const hideConsole = useMemo(() => activeCode && activeCode.includes('strudel hide-console'), [activeCode]);
   // cycle hook to control scheduling
   const cycle = useCycle({
     onDraw,
     onEvent: useCallback(
       (time, event, currentTime) => {
         try {
-          onEvent?.(event);
+          onEvent?.(time, event, currentTime);
           if (event.context.logs?.length) {
             event.context.logs.forEach(pushLog);
           }
@@ -51,8 +53,10 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
             if (defaultSynth) {
               const note = getPlayableNoteValue(event);
               defaultSynth.triggerAttackRelease(note, event.duration.valueOf(), time, velocity);
-            } else {
-              throw new Error('no defaultSynth passed to useRepl.');
+            } else if (!onEvent) {
+              throw new Error(
+                'no defaultSynth nor onEvent passed to useRepl + event has no onTrigger. nothing happens',
+              );
             }
             /* console.warn('no instrument chosen', event);
           throw new Error(`no instrument chosen for ${JSON.stringify(event)}`); */
@@ -93,16 +97,16 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
   });
 
   const activateCode = useCallback(
-    async (_code = code) => {
+    async (_code = code, evaluateOnly = false) => {
       if (activeCode && !dirty) {
         setError(undefined);
-        cycle.start();
+        !evaluateOnly && cycle.start();
         return;
       }
       try {
         setPending(true);
         const parsed = await evaluate(_code);
-        cycle.start();
+        !evaluateOnly && cycle.start();
         broadcast({ type: 'start', from: id });
         setPattern(() => parsed.pattern);
         if (autolink) {
@@ -135,7 +139,22 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
     }
   };
 
+  const stop = () => {
+    cycle.stop(true);
+    setActiveCode(undefined);
+  };
+
+  const evaluateOnly = () => {
+    activateCode(code, true);
+  };
+
+  useEffect(() => {
+    return () => stop();
+  }, []);
+
   return {
+    hideHeader,
+    hideConsole,
     pending,
     code,
     setCode,
@@ -146,8 +165,10 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
     dirty,
     log,
     togglePlay,
+    stop,
     setActiveCode,
     activateCode,
+    evaluateOnly,
     activeCode,
     pushLog,
     hash,

packages/react/src/themes/material-palenight.js

@@ -36,7 +36,13 @@ export const materialPalenightTheme = EditorView.theme(
       lineHeight: '22px',
     },
     '.cm-line': {
-      background: '#2C323699',
+      // background: '#2C323699',
+      background: 'transparent',
+    },
+    '.cm-line > *': {
+      // background: '#2C323699',
+      background: '#00000090',
+      // background: 'transparent',
     },
     // done
     '&.cm-focused .cm-cursor': {
@@ -61,7 +67,7 @@ export const materialPalenightTheme = EditorView.theme(
       backgroundColor: '#6199ff2f',
     },
 
-    '.cm-activeLine': { backgroundColor: highlightBackground },
+    '.cm-activeLine': { backgroundColor: cursor + '50' },
     '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
 
     '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {

packages/tone/pianoroll.mjs

@@ -22,13 +22,17 @@ Pattern.prototype.pianoroll = function ({
   flipTime = 0,
   flipValues = 0,
   hideNegative = false,
-  inactive = '#C9E597',
+  // inactive = '#C9E597',
+  // inactive = '#FFCA28',
+  inactive = '#7491D2',
   active = '#FFCA28',
   // background = '#2A3236',
   background = 'transparent',
+  smear = 0,
+  playheadColor = 'white',
   minMidi = 10,
   maxMidi = 90,
-  autorange = 0,
+  autorange = 1,
   timeframe: timeframeProp,
   fold = 0,
   vertical = 0,
@@ -58,12 +62,14 @@ Pattern.prototype.pianoroll = function ({
   flipTime && timeRange.reverse();
   flipValues && valueRange.reverse();
 
-  const playheadPosition = scale(-from / timeExtent, ...timeRange);
   this.draw(
     (ctx, events, t) => {
       ctx.fillStyle = background;
-      ctx.clearRect(0, 0, w, h);
-      ctx.fillRect(0, 0, w, h);
+      ctx.globalAlpha = 1; // reset!
+      if (!smear) {
+        ctx.clearRect(0, 0, w, h);
+        ctx.fillRect(0, 0, w, h);
+      }
       const inFrame = (event) =>
         (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.whole.end >= t + from;
       events.filter(inFrame).forEach((event) => {
@@ -71,15 +77,6 @@ Pattern.prototype.pianoroll = function ({
         ctx.fillStyle = event.context?.color || inactive;
         ctx.strokeStyle = event.context?.color || active;
         ctx.globalAlpha = event.context.velocity ?? 1;
-        ctx.beginPath();
-        if (vertical) {
-          ctx.moveTo(0, playheadPosition);
-          ctx.lineTo(valueAxis, playheadPosition);
-        } else {
-          ctx.moveTo(playheadPosition, 0);
-          ctx.lineTo(playheadPosition, valueAxis);
-        }
-        ctx.stroke();
         const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
         let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
         const value = getValue(event);
@@ -107,6 +104,19 @@ Pattern.prototype.pianoroll = function ({
         }
         isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
       });
+      ctx.globalAlpha = 1; // reset!
+      const playheadPosition = scale(-from / timeExtent, ...timeRange);
+      // draw playhead
+      ctx.strokeStyle = playheadColor;
+      ctx.beginPath();
+      if (vertical) {
+        ctx.moveTo(0, playheadPosition);
+        ctx.lineTo(valueAxis, playheadPosition);
+      } else {
+        ctx.moveTo(playheadPosition, 0);
+        ctx.lineTo(playheadPosition, valueAxis);
+      }
+      ctx.stroke();
     },
     {
       from: from - overscan,

packages/tone/tone.mjs

@@ -62,7 +62,11 @@ Pattern.prototype.tone = function (instrument) {
       } else if (instrument instanceof NoiseSynth) {
         instrument.triggerAttackRelease(hap.duration.valueOf(), time); // noise has no value
       } else if (instrument instanceof Piano) {
-        note = getPlayableNoteValue(hap);
+        // note = getPlayableNoteValue(hap); // piano does not understand frequencies
+        note = hap.value;
+        if (typeof note === 'number') {
+          note = midi2note(note);
+        }
         instrument.keyDown({ note, time, velocity });
         instrument.keyUp({ note, time: time + hap.duration.valueOf(), velocity });
       } else if (instrument instanceof Sampler) {

packages/webaudio/webaudio.mjs

@@ -126,146 +126,150 @@ const splitSN = (s, n) => {
 
 Pattern.prototype.out = function () {
   return this.onTrigger(async (t, hap, ct) => {
-    const ac = getAudioContext();
-    // calculate correct time (tone.js workaround)
-    t = ac.currentTime + t - ct;
-    // destructure value
-    let {
-      freq,
-      s,
-      sf,
-      clip = 0, // if 1, samples will be cut off when the hap ends
-      n = 0,
-      note,
-      gain = 1,
-      cutoff,
-      resonance = 1,
-      hcutoff,
-      hresonance = 1,
-      bandf,
-      bandq = 1,
-      pan,
-      attack = 0.001,
-      decay = 0.05,
-      sustain = 0.5,
-      release = 0.001,
-      speed = 1, // sample playback speed
-      begin = 0,
-      end = 1,
-    } = hap.value;
-    const { velocity = 1 } = hap.context;
-    gain *= velocity; // legacy fix for velocity
-    // the chain will hold all audio nodes that connect to each other
-    const chain = [];
-    if (typeof s === 'string') {
-      [s, n] = splitSN(s, n);
-    }
-    if (typeof note === 'string') {
-      [note, n] = splitSN(note, n);
-    }
-    if (!s || ['sine', 'square', 'triangle', 'sawtooth'].includes(s)) {
-      // with synths, n and note are the same thing
-      n = note || n;
-      if (typeof n === 'string') {
-        n = toMidi(n); // e.g. c3 => 48
+    try {
+      const ac = getAudioContext();
+      // calculate correct time (tone.js workaround)
+      t = ac.currentTime + t - ct;
+      // destructure value
+      let {
+        freq,
+        s,
+        sf,
+        clip = 0, // if 1, samples will be cut off when the hap ends
+        n = 0,
+        note,
+        gain = 1,
+        cutoff,
+        resonance = 1,
+        hcutoff,
+        hresonance = 1,
+        bandf,
+        bandq = 1,
+        pan,
+        attack = 0.001,
+        decay = 0.05,
+        sustain = 0.5,
+        release = 0.001,
+        speed = 1, // sample playback speed
+        begin = 0,
+        end = 1,
+      } = hap.value;
+      const { velocity = 1 } = hap.context;
+      gain *= velocity; // legacy fix for velocity
+      // the chain will hold all audio nodes that connect to each other
+      const chain = [];
+      if (typeof s === 'string') {
+        [s, n] = splitSN(s, n);
       }
-      // get frequency
-      if (!freq && typeof n === 'number') {
-        freq = fromMidi(n); // + 48);
+      if (typeof note === 'string') {
+        [note, n] = splitSN(note, n);
       }
-      // make oscillator
-      const o = getOscillator({ t, s, freq, duration: hap.duration, release });
-      chain.push(o);
-      // level down oscillators as they are really loud compared to samples i've tested
-      const g = ac.createGain();
-      g.gain.value = 0.3;
-      chain.push(g);
-      // TODO: make adsr work with samples without pops
-      // envelope
-      const adsr = getADSR(attack, decay, sustain, release, 1, t, t + hap.duration);
-      chain.push(adsr);
-    } else {
-      // load sample
-      if (speed === 0) {
-        // no playback
-        return;
-      }
-      if (!s) {
-        console.warn('no sample specified');
-        return;
-      }
-      const soundfont = getSoundfontKey(s);
-      let bufferSource;
-
-      try {
-        if (soundfont) {
-          // is soundfont
-          bufferSource = await globalThis.getFontBufferSource(soundfont, note || n, ac);
-        } else {
-          // is sample from loaded samples(..)
-          bufferSource = await getSampleBufferSource(s, n, note);
+      if (!s || ['sine', 'square', 'triangle', 'sawtooth'].includes(s)) {
+        // with synths, n and note are the same thing
+        n = note || n;
+        if (typeof n === 'string') {
+          n = toMidi(n); // e.g. c3 => 48
         }
-      } catch (err) {
-        console.warn(err);
-        return;
-      }
-      // asny stuff above took too long?
-      if (ac.currentTime > t) {
-        console.warn('sample still loading:', s, n);
-        return;
-      }
-      if (!bufferSource) {
-        console.warn('no buffer source');
-        return;
-      }
-      bufferSource.playbackRate.value = Math.abs(speed) * bufferSource.playbackRate.value;
-      // TODO: nudge, unit, cut, loop
-      let duration = soundfont || clip ? hap.duration : bufferSource.buffer.duration;
-      // let duration = bufferSource.buffer.duration;
-      const offset = begin * duration;
-      duration = ((end - begin) * duration) / Math.abs(speed);
-      if (soundfont || clip) {
-        bufferSource.start(t, offset); // duration does not work here for some reason
+        // get frequency
+        if (!freq && typeof n === 'number') {
+          freq = fromMidi(n); // + 48);
+        }
+        // make oscillator
+        const o = getOscillator({ t, s, freq, duration: hap.duration, release });
+        chain.push(o);
+        // level down oscillators as they are really loud compared to samples i've tested
+        const g = ac.createGain();
+        g.gain.value = 0.3;
+        chain.push(g);
+        // TODO: make adsr work with samples without pops
+        // envelope
+        const adsr = getADSR(attack, decay, sustain, release, 1, t, t + hap.duration);
+        chain.push(adsr);
       } else {
-        bufferSource.start(t, offset, duration);
-      }
-      chain.push(bufferSource);
-      if (soundfont || clip) {
-        const env = ac.createGain();
-        const releaseLength = 0.1;
-        env.gain.value = 0.6;
-        env.gain.setValueAtTime(env.gain.value, t + duration);
-        env.gain.linearRampToValueAtTime(0, t + duration + releaseLength);
-        // env.gain.linearRampToValueAtTime(0, t + duration + releaseLength);
-        chain.push(env);
-        bufferSource.stop(t + duration + releaseLength);
-      } else {
-        bufferSource.stop(t + duration);
-      }
-    }
-    // master out
-    const master = ac.createGain();
-    master.gain.value = gain;
-    chain.push(master);
+        // load sample
+        if (speed === 0) {
+          // no playback
+          return;
+        }
+        if (!s) {
+          console.warn('no sample specified');
+          return;
+        }
+        const soundfont = getSoundfontKey(s);
+        let bufferSource;
 
-    // filters
-    cutoff !== undefined && chain.push(getFilter('lowpass', cutoff, resonance));
-    hcutoff !== undefined && chain.push(getFilter('highpass', hcutoff, hresonance));
-    bandf !== undefined && chain.push(getFilter('bandpass', bandf, bandq));
-    // TODO vowel
-    // TODO delay / delaytime / delayfeedback
-    // panning
-    if (pan !== undefined) {
-      const panner = ac.createStereoPanner();
-      panner.pan.value = 2 * pan - 1;
-      chain.push(panner);
-    }
-    // master out
-    /* const master = ac.createGain();
+        try {
+          if (soundfont) {
+            // is soundfont
+            bufferSource = await globalThis.getFontBufferSource(soundfont, note || n, ac);
+          } else {
+            // is sample from loaded samples(..)
+            bufferSource = await getSampleBufferSource(s, n, note);
+          }
+        } catch (err) {
+          console.warn(err);
+          return;
+        }
+        // asny stuff above took too long?
+        if (ac.currentTime > t) {
+          console.warn('sample still loading:', s, n);
+          return;
+        }
+        if (!bufferSource) {
+          console.warn('no buffer source');
+          return;
+        }
+        bufferSource.playbackRate.value = Math.abs(speed) * bufferSource.playbackRate.value;
+        // TODO: nudge, unit, cut, loop
+        let duration = soundfont || clip ? hap.duration : bufferSource.buffer.duration;
+        // let duration = bufferSource.buffer.duration;
+        const offset = begin * duration;
+        duration = ((end - begin) * duration) / Math.abs(speed);
+        if (soundfont || clip) {
+          bufferSource.start(t, offset); // duration does not work here for some reason
+        } else {
+          bufferSource.start(t, offset, duration);
+        }
+        chain.push(bufferSource);
+        if (soundfont || clip) {
+          const env = ac.createGain();
+          const releaseLength = 0.1;
+          env.gain.value = 0.6;
+          env.gain.setValueAtTime(env.gain.value, t + duration);
+          env.gain.linearRampToValueAtTime(0, t + duration + releaseLength);
+          // env.gain.linearRampToValueAtTime(0, t + duration + releaseLength);
+          chain.push(env);
+          bufferSource.stop(t + duration + releaseLength);
+        } else {
+          bufferSource.stop(t + duration);
+        }
+      }
+      // master out
+      const master = ac.createGain();
+      master.gain.value = gain;
+      chain.push(master);
+
+      // filters
+      cutoff !== undefined && chain.push(getFilter('lowpass', cutoff, resonance));
+      hcutoff !== undefined && chain.push(getFilter('highpass', hcutoff, hresonance));
+      bandf !== undefined && chain.push(getFilter('bandpass', bandf, bandq));
+      // TODO vowel
+      // TODO delay / delaytime / delayfeedback
+      // panning
+      if (pan !== undefined) {
+        const panner = ac.createStereoPanner();
+        panner.pan.value = 2 * pan - 1;
+        chain.push(panner);
+      }
+      // master out
+      /* const master = ac.createGain();
     master.gain.value = 0.8 * gain;
     chain.push(master); */
-    chain.push(ac.destination);
-    // connect chain elements together
-    chain.slice(1).reduce((last, current) => last.connect(current), chain[0]);
+      chain.push(ac.destination);
+      // connect chain elements together
+      chain.slice(1).reduce((last, current) => last.connect(current), chain[0]);
+    } catch (e) {
+      console.warn('.out error:', e);
+    }
   });
 };

packages/webdirt/README.md

@@ -6,6 +6,6 @@ This package adds [webdirt](https://github.com/dktr0/WebDirt) support to strudel
 
 Add default samples to repl:
 
-1. move samples to `repl/public` folder. the samples folder is expected to have subfolders, with samples in it. the subfolders will be the names of the samples.
-2. run `./makeSampleMap.sh ../../repl/public/EmuSP12 > ../../repl/public/EmuSP12.json`
+1. move samples to `repl/public/samples` folder. the samples folder is expected to have subfolders, with samples in it. the subfolders will be the names of the samples.
+2. run `./makeSampleMap.sh ../../repl/public/samples/EmuSP12 > ../../repl/public/samples/EmuSP12.json`
 3. adapt `loadWebDirt` in App.jsx + MiniRepl.jsx to use the generated json file

paper/citation-cache.json

@@ -1,636 +0,0 @@
-{
-	"_info": "Auto-generated by pandoc-url2cite. Feel free to modify, keys will never be overwritten.",
-	"urls": {
-		"https://www.tandfonline.com/doi/abs/10.1080/14794713.2016.1227602?journalCode=rpdm20": {
-			"fetched": "2022-03-24T12:17:27.481Z",
-			"bibtex": [
-				"",
-				"@article{roberts_code_2016,",
-				"   title = {Code as information and code as spectacle},",
-				"   volume = {12},",
-				"   issn = {1479-4713},",
-				"   url = {https://doi.org/10.1080/14794713.2016.1227602},",
-				"   doi = {10.1080/14794713.2016.1227602},",
-				"   abstract = {In this artist statement, I will discuss the tension between source code as an interactive system for performers and source code as information and entertainment for audiences in live-coding performances. I then describe augmentations I developed for the presentation of source code in the live-coding environment Gibber, including animations and annotations that visually reveal aspects of system state during performances. I briefly describe audience responses to these techniques and, more importantly, how they are critical to my own artistic practice.},",
-				"   number = {2},",
-				"   urldate = {2022-03-24},",
-				"   journal = {International Journal of Performance Arts and Digital Media},",
-				"   author = {Roberts, Charles},",
-				"   month = jul,",
-				"   year = {2016},",
-				"   keywords = {Live coding, psychology of programming, notation, audiences, algorithms},",
-				"   pages = {201--206},",
-				"}",
-				""
-			],
-			"csl": {
-				"DOI": "10.1080/14794713.2016.1227602",
-				"ISSN": "1479-4713",
-				"URL": "https://doi.org/10.1080/14794713.2016.1227602",
-				"abstract": "In this artist statement, I will discuss the tension between source code as an interactive system for performers and source code as information and entertainment for audiences in live-coding performances. I then describe augmentations I developed for the presentation of source code in the live-coding environment Gibber, including animations and annotations that visually reveal aspects of system state during performances. I briefly describe audience responses to these techniques and, more importantly, how they are critical to my own artistic practice.",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							3,
-							24
-						]
-					]
-				},
-				"author": [
-					{
-						"family": "Roberts",
-						"given": "Charles"
-					}
-				],
-				"container-title": "International Journal of Performance Arts and Digital Media",
-				"id": "https://www.tandfonline.com/doi/abs/10.1080/14794713.2016.1227602?journalCode_x61_rpdm20",
-				"issue": "2",
-				"issued": {
-					"date-parts": [
-						[
-							2016,
-							7
-						]
-					]
-				},
-				"keyword": "Live coding, psychology of programming, notation, audiences, algorithms",
-				"page": "201-206",
-				"title": "Code as information and code as spectacle",
-				"type": "article-journal",
-				"volume": "12"
-			}
-		},
-		"https://zenodo.org/record/5788732": {
-			"fetched": "2022-03-24T12:20:17.218Z",
-			"bibtex": [
-				"",
-				"@misc{mclean_alternate_2021,",
-				"   address = {Valdivia, Chile},",
-				"   title = {Alternate {Timelines} for {TidalCycles}},",
-				"   url = {https://zenodo.org/record/5788732},",
-				"   abstract = {The TidalCycles (or Tidal for short) live coding environment has been developed since around 2009, via several rewrites of its core representation. Rather than having fixed goals, this development has been guided by use, motivated by the open aim to make music. This development process can be seen as a long-form improvisation, with insights into the nature of Tidal gained through the process of writing it, feeding back to guide the next steps of development. This brings the worrying thought that key insights will have been missed along this development journey, that would otherwise have lead to very different software. Indeed participants at beginners’ workshops that I have lead or co-lead have often asked questions without good answers, because they made deficiencies or missing features in the software clear. It is well known that a beginner’s mind is able to see much that an expert has become blind to. Running workshops are an excellent way to find new development ideas, but the present paper explores a different technique – the rewrite.},",
-				"   urldate = {2022-03-24},",
-				"   collaborator = {McLean, Alex},",
-				"   month = dec,",
-				"   year = {2021},",
-				"   keywords = {live coding, algorithmic pattern, tidalcycles, haskell, python},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://zenodo.org/record/5788732",
-				"abstract": "The TidalCycles (or Tidal for short) live coding environment has been developed since around 2009, via several rewrites of its core representation. Rather than having fixed goals, this development has been guided by use, motivated by the open aim to make music. This development process can be seen as a long-form improvisation, with insights into the nature of Tidal gained through the process of writing it, feeding back to guide the next steps of development. This brings the worrying thought that key insights will have been missed along this development journey, that would otherwise have lead to very different software. Indeed participants at beginners’ workshops that I have lead or co-lead have often asked questions without good answers, because they made deficiencies or missing features in the software clear. It is well known that a beginner’s mind is able to see much that an expert has become blind to. Running workshops are an excellent way to find new development ideas, but the present paper explores a different technique – the rewrite.",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							3,
-							24
-						]
-					]
-				},
-				"id": "https://zenodo.org/record/5788732",
-				"issued": {
-					"date-parts": [
-						[
-							2021,
-							12
-						]
-					]
-				},
-				"keyword": "live coding, algorithmic pattern, tidalcycles, haskell, python",
-				"publisher-place": "Valdivia, Chile",
-				"title": "Alternate Timelines for TidalCycles",
-				"type": ""
-			}
-		},
-		"https://www.semanticscholar.org/paper/Bringing-the-TidalCycles-Mini-Notation-to-the-Roberts/74965efadd572ae3f40d14c633a5c8581c1b9f42": {
-			"fetched": "2022-04-12T22:47:17.063Z",
-			"bibtex": [
-				"",
-				"@misc{roberts_bringing_2019,",
-				"   title = {Bringing the {TidalCycles} {Mini}-{Notation} to the {Browser}},",
-				"   url = {https://www.semanticscholar.org/paper/Bringing-the-TidalCycles-Mini-Notation-to-the-Roberts/74965efadd572ae3f40d14c633a5c8581c1b9f42},",
-				"   abstract = {A JavaScript dialect of its mini-notation for pattern is created, enabling easy integration with creative coding tools and an accompanying technique for visually annotating the playback of TidalCycles patterns over time. TidalCycles has rapidly become the most popular system for many styles of live coding performance, in particular Algoraves. We created a JavaScript dialect of its mini-notation for pattern, enabling easy integration with creative coding tools. Our research pairs a formalism describing the mini-notation with a small JavaScript library for generating events over time; this library is suitable for generating events inside of an AudioWorkletProcessor thread and for assisting with scheduling in JavaScript environments more generally. We describe integrating the library into the two live coding systems, Gibber and Hydra, and discuss an accompanying technique for visually annotating the playback of TidalCycles patterns over time.},",
-				"   language = {en},",
-				"   urldate = {2022-04-12},",
-				"   journal = {www.semanticscholar.org},",
-				"   author = {Roberts, Charles},",
-				"   year = {2019},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://www.semanticscholar.org/paper/Bringing-the-TidalCycles-Mini-Notation-to-the-Roberts/74965efadd572ae3f40d14c633a5c8581c1b9f42",
-				"abstract": "A JavaScript dialect of its mini-notation for pattern is created, enabling easy integration with creative coding tools and an accompanying technique for visually annotating the playback of TidalCycles patterns over time. TidalCycles has rapidly become the most popular system for many styles of live coding performance, in particular Algoraves. We created a JavaScript dialect of its mini-notation for pattern, enabling easy integration with creative coding tools. Our research pairs a formalism describing the mini-notation with a small JavaScript library for generating events over time; this library is suitable for generating events inside of an AudioWorkletProcessor thread and for assisting with scheduling in JavaScript environments more generally. We describe integrating the library into the two live coding systems, Gibber and Hydra, and discuss an accompanying technique for visually annotating the playback of TidalCycles patterns over time.",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							12
-						]
-					]
-				},
-				"author": [
-					{
-						"family": "Roberts",
-						"given": "Charles"
-					}
-				],
-				"container-title": "www.semanticscholar.org",
-				"id": "https://www.semanticscholar.org/paper/Bringing-the-TidalCycles-Mini-Notation-to-the-Roberts/74965efadd572ae3f40d14c633a5c8581c1b9f42",
-				"issued": {
-					"date-parts": [
-						[
-							2019
-						]
-					]
-				},
-				"title": "Bringing the TidalCycles Mini-Notation to the Browser",
-				"type": ""
-			}
-		},
-		"https://zenodo.org/record/6456380": {
-			"fetched": "2022-04-14T21:26:21.302Z",
-			"bibtex": [
-				"",
-				"@misc{mclean_tidalvortex_2022,",
-				"   address = {Limerick, Ireland},",
-				"   title = {{TidalVortex} {Zero}},",
-				"   url = {https://zenodo.org/record/6456380},",
-				"   abstract = {In this paper we introduce ‘version zero’ of TidalVortex, an alternative implementation of the TidalCycles live coding system, using the Python programming language.  This is open-ended work, exploring what happens when we try to extract the 'essence' of a system like TidalCycles and translate it into another programming language, while taking advantage of the affordance of its new host. First, we review the substantial prior art in porting TidalCycles, and in representing musical patterns in Python. We then compare equivalent patterns written in Haskell (TidalCycles) and Python (TidalVortex), and relate implementation details of how functional reactive paradigms have translated from the pure functional, strongly typed Haskell to the more multi-paradigm, dynamically typed Python. Finally, we conclude with reflections and generalisable outcomes.},",
-				"   urldate = {2022-04-14},",
-				"   collaborator = {McLean, Alex and Forment, Raphaël and Le Beux, Sylvain and Silvani, Damián},",
-				"   month = apr,",
-				"   year = {2022},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://zenodo.org/record/6456380",
-				"abstract": "In this paper we introduce “version zero” of TidalVortex, an alternative implementation of the TidalCycles live coding system, using the Python programming language.  This is open-ended work, exploring what happens when we try to extract the ’essence’ of a system like TidalCycles and translate it into another programming language, while taking advantage of the affordance of its new host. First, we review the substantial prior art in porting TidalCycles, and in representing musical patterns in Python. We then compare equivalent patterns written in Haskell (TidalCycles) and Python (TidalVortex), and relate implementation details of how functional reactive paradigms have translated from the pure functional, strongly typed Haskell to the more multi-paradigm, dynamically typed Python. Finally, we conclude with reflections and generalisable outcomes.",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							14
-						]
-					]
-				},
-				"id": "https://zenodo.org/record/6456380",
-				"issued": {
-					"date-parts": [
-						[
-							2022,
-							4
-						]
-					]
-				},
-				"publisher-place": "Limerick, Ireland",
-				"title": "TidalVortex Zero",
-				"type": ""
-			}
-		},
-		"https://zenodo.org/record/4299661": {
-			"fetched": "2022-04-15T07:40:08.702Z",
-			"bibtex": [
-				"",
-				"@misc{mclean_algorithmic_2020,",
-				"   address = {Birmingham UK},",
-				"   title = {Algorithmic {Pattern}},",
-				"   url = {https://zenodo.org/record/4299661},",
-				"   abstract = {This paper brings together two main perspectives on algorithmic pattern. First, the writing of musical patterns in live coding performance, and second, the weaving of patterns in textiles. In both cases, algorithmic pattern is an interface between the human and the outcome, where small changes have far-reaching impact on the results. By bringing contemporary live coding and ancient textile approaches together, we reach a common view of pattern as algorithmic movement (e.g. looping, shifting, reflecting, interfering) in the making of things. This works beyond the usual definition of pattern used in musical interfaces, of mere repeating sequences. We conclude by considering the place of algorithmic pattern in a wider activity of making.},",
-				"   urldate = {2022-04-15},",
-				"   collaborator = {McLean, Alex},",
-				"   month = jul,",
-				"   year = {2020},",
-				"   keywords = {pattern, tidalcycles, algorithmic music, textiles, live coding, algorave},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://zenodo.org/record/4299661",
-				"abstract": "This paper brings together two main perspectives on algorithmic pattern. First, the writing of musical patterns in live coding performance, and second, the weaving of patterns in textiles. In both cases, algorithmic pattern is an interface between the human and the outcome, where small changes have far-reaching impact on the results. By bringing contemporary live coding and ancient textile approaches together, we reach a common view of pattern as algorithmic movement (e.g. looping, shifting, reflecting, interfering) in the making of things. This works beyond the usual definition of pattern used in musical interfaces, of mere repeating sequences. We conclude by considering the place of algorithmic pattern in a wider activity of making.",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							15
-						]
-					]
-				},
-				"id": "https://zenodo.org/record/4299661",
-				"issued": {
-					"date-parts": [
-						[
-							2020,
-							7
-						]
-					]
-				},
-				"keyword": "pattern, tidalcycles, algorithmic music, textiles, live coding, algorave",
-				"publisher-place": "Birmingham UK",
-				"title": "Algorithmic Pattern",
-				"type": ""
-			}
-		},
-		"https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/–gibber-live-coding-audio-in-the-browser?page=root;size=150;view=text": {
-			"fetched": "2022-04-15T07:40:15.037Z",
-			"bibtex": [
-				"",
-				"@article{charlie_gibber:_2012,",
-				"   title = {{GIBBER}: {LIVE} {CODING} {AUDIO} {IN} {THE} {BROWSER}},",
-				"   volume = {2012},",
-				"   issn = {2223-3881},",
-				"   url = {https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/%E2%80%93gibber-live-coding-audio-in-the-browser?page=root;size=150;view=text},",
-				"   language = {en},",
-				"   urldate = {2022-04-15},",
-				"   journal = {International Computer Music Conference Proceedings},",
-				"   author = {Charlie, , Roberts and Joann, , Kuchera-Morin},",
-				"   year = {2012},",
-				"}",
-				""
-			],
-			"csl": {
-				"ISSN": "2223-3881",
-				"URL": "https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/%E2%80%93gibber-live-coding-audio-in-the-browser?page=root;size=150;view=text",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							15
-						]
-					]
-				},
-				"author": [
-					{
-						"family": "Charlie",
-						"given": "Roberts"
-					},
-					{
-						"family": "Joann",
-						"given": "Kuchera-Morin"
-					}
-				],
-				"container-title": "International Computer Music Conference Proceedings",
-				"id": "https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/–gibber-live-coding-audio-in-the-browser?page_x61_root;size_x61_150;view_x61_text",
-				"issued": {
-					"date-parts": [
-						[
-							2012
-						]
-					]
-				},
-				"title": "GIBBER: LIVE CODING AUDIO IN THE BROWSER",
-				"title-short": "GIBBER",
-				"type": "article-journal",
-				"volume": "2012"
-			}
-		},
-		"https://www.semanticscholar.org/paper/Estuary%3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b": {
-			"fetched": "2022-04-15T07:40:17.179Z",
-			"bibtex": [
-				"",
-				"@misc{ogborn_estuary:_2017,",
-				"   title = {Estuary: {Browser}-based {Collaborative} {Projectional} {Live} {Coding} of {Musical} {Patterns}},",
-				"   shorttitle = {Estuary},",
-				"   url = {https://www.semanticscholar.org/paper/Estuary%3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b},",
-				"   abstract = {Estuary is a browser-based collaborative projectional editing environment built on top of the popular TidalCycles language for the live coding of musical pattern that includes a strict form of structure editing, a click-only border-free approach to interface design, and explicit notations to modulate the liveness of different parts of the code. This paper describes the initial design and development of Estuary, a browser-based collaborative projectional editing environment built on top of the popular TidalCycles language for the live coding of musical pattern. Key features of Estuary include a strict form of structure editing (making syntactical errors impossible), a click-only border-free approach to interface design, explicit notations to modulate the liveness of different parts of the code, and a server-based network collaboration system that can be used for many simultaneous collaborative live coding performances, as well as to present different views of the same live coding activity. Estuary has been developed using Reflex-DOM, a Haskell-based framework for web development whose strictness promises robustness and security advantages.},",
-				"   language = {en},",
-				"   urldate = {2022-04-15},",
-				"   journal = {www.semanticscholar.org},",
-				"   author = {Ogborn, David and Beverley, J.},",
-				"   year = {2017},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://www.semanticscholar.org/paper/Estuary%3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b",
-				"abstract": "Estuary is a browser-based collaborative projectional editing environment built on top of the popular TidalCycles language for the live coding of musical pattern that includes a strict form of structure editing, a click-only border-free approach to interface design, and explicit notations to modulate the liveness of different parts of the code. This paper describes the initial design and development of Estuary, a browser-based collaborative projectional editing environment built on top of the popular TidalCycles language for the live coding of musical pattern. Key features of Estuary include a strict form of structure editing (making syntactical errors impossible), a click-only border-free approach to interface design, explicit notations to modulate the liveness of different parts of the code, and a server-based network collaboration system that can be used for many simultaneous collaborative live coding performances, as well as to present different views of the same live coding activity. Estuary has been developed using Reflex-DOM, a Haskell-based framework for web development whose strictness promises robustness and security advantages.",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							15
-						]
-					]
-				},
-				"author": [
-					{
-						"family": "Ogborn",
-						"given": "David"
-					},
-					{
-						"family": "Beverley",
-						"given": "J."
-					}
-				],
-				"container-title": "www.semanticscholar.org",
-				"id": "https://www.semanticscholar.org/paper/Estuary_x37_3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b",
-				"issued": {
-					"date-parts": [
-						[
-							2017
-						]
-					]
-				},
-				"title": "Estuary: Browser-based Collaborative Projectional Live Coding of Musical Patterns",
-				"title-short": "Estuary",
-				"type": ""
-			}
-		},
-		"https://zenodo.org/record/6353969": {
-			"fetched": "2022-04-15T07:40:20.966Z",
-			"bibtex": [
-				"",
-				"@misc{mclean_feedforward_2020,",
-				"   address = {Birmingham},",
-				"   title = {Feedforward},",
-				"   url = {https://zenodo.org/record/6353969},",
-				"   abstract = {This is an improvised, from-scratch live coding performance. The NIME interface which this performance showcases is the new Feedfoward editor for the TidalCycles live coding environment. Feedforward is written in Haskell using the ncurses library for terminal-based user interfaces. It runs on low-powered hardware including the Raspberry Pi Zero, with formative testing of prototypes conducted with several groups of children between the ages of 8 and 14. Feedforward has a number of features designed to support improvised, multi-pattern live coding. Individual Tidal patterns are addressable with hotkeys for fast mute and unmuting. Each pattern has a stereo VU meter, to aid the quick matching of sound to pattern within a mix. In addition, TidalCycles has been extended to store context with each event, so that source code positions in its polyrhythmic sequence mini-notation are tracked. This allows steps to be highlighted in the source code when- ever they are active. This works even when Tidal combinators have been applied to manipulate the timeline. Formal evaluation has yet to take place, but this feature appears to support learning of how pattern manipulations work in Tidal. Feedforward and TidalCycles is free/open source software under a GPL licence version 3.0.},",
-				"   urldate = {2022-04-15},",
-				"   collaborator = {McLean, Alex},",
-				"   month = jul,",
-				"   year = {2020},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://zenodo.org/record/6353969",
-				"abstract": "This is an improvised, from-scratch live coding performance. The NIME interface which this performance showcases is the new Feedfoward editor for the TidalCycles live coding environment. Feedforward is written in Haskell using the ncurses library for terminal-based user interfaces. It runs on low-powered hardware including the Raspberry Pi Zero, with formative testing of prototypes conducted with several groups of children between the ages of 8 and 14. Feedforward has a number of features designed to support improvised, multi-pattern live coding. Individual Tidal patterns are addressable with hotkeys for fast mute and unmuting. Each pattern has a stereo VU meter, to aid the quick matching of sound to pattern within a mix. In addition, TidalCycles has been extended to store context with each event, so that source code positions in its polyrhythmic sequence mini-notation are tracked. This allows steps to be highlighted in the source code when- ever they are active. This works even when Tidal combinators have been applied to manipulate the timeline. Formal evaluation has yet to take place, but this feature appears to support learning of how pattern manipulations work in Tidal. Feedforward and TidalCycles is free/open source software under a GPL licence version 3.0.",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							15
-						]
-					]
-				},
-				"id": "https://zenodo.org/record/6353969",
-				"issued": {
-					"date-parts": [
-						[
-							2020,
-							7
-						]
-					]
-				},
-				"publisher-place": "Birmingham",
-				"title": "Feedforward",
-				"type": ""
-			}
-		},
-		"https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.72.1340": {
-			"fetched": "2022-04-24T21:09:16.724Z",
-			"bibtex": [
-				"",
-				"@inproceedings{toussaint_euclidean_2005,",
-				"   title = {The {Euclidean} algorithm generates traditional musical rhythms},",
-				"   url = {https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.72.1340},",
-				"   abstract = {The Euclidean algorithm (which comes down to us from Euclid’s Elements) computes the greatest common divisor of two given integers. It is shown here that the structure of the Euclidean algorithm may be used to automatically generate, very efficiently, a large family of rhythms used as timelines (rhythmic ostinatos), in traditional world music. These rhythms, here dubbed Euclidean rhythms, have the property that their onset patterns are distributed as evenly as possible in a mathematically precise sense, and optimal manner. Euclidean rhythms are closely related to the family of Aksak rhythms studied by ethnomusicologists, and occur in a wide variety of other disciplines as well. For example they characterize algorithms for drawing digital straight lines in computer graphics, as well as algorithms for calculating leap years in calendar design. Euclidean rhythms also find application in nuclear physics accelerators and in computer science, and are closely related to several families of words and sequences of interest in the study of the combinatorics of words, such as mechanical words, Sturmian words, two-distance sequences, and Euclidean strings, to which the Euclidean rhythms are compared. 1.},",
-				"   urldate = {2022-04-24},",
-				"   booktitle = {In {Proceedings} of {BRIDGES}: {Mathematical} {Connections} in {Art}, {Music} and {Science}},",
-				"   author = {Toussaint, Godfried},",
-				"   year = {2005},",
-				"   pages = {47--56},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.72.1340",
-				"abstract": "The Euclidean algorithm (which comes down to us from Euclid’s Elements) computes the greatest common divisor of two given integers. It is shown here that the structure of the Euclidean algorithm may be used to automatically generate, very efficiently, a large family of rhythms used as timelines (rhythmic ostinatos), in traditional world music. These rhythms, here dubbed Euclidean rhythms, have the property that their onset patterns are distributed as evenly as possible in a mathematically precise sense, and optimal manner. Euclidean rhythms are closely related to the family of Aksak rhythms studied by ethnomusicologists, and occur in a wide variety of other disciplines as well. For example they characterize algorithms for drawing digital straight lines in computer graphics, as well as algorithms for calculating leap years in calendar design. Euclidean rhythms also find application in nuclear physics accelerators and in computer science, and are closely related to several families of words and sequences of interest in the study of the combinatorics of words, such as mechanical words, Sturmian words, two-distance sequences, and Euclidean strings, to which the Euclidean rhythms are compared. 1.",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							24
-						]
-					]
-				},
-				"author": [
-					{
-						"family": "Toussaint",
-						"given": "Godfried"
-					}
-				],
-				"container-title": "In Proceedings of BRIDGES: Mathematical Connections in Art, Music and Science",
-				"id": "https://citeseerx.ist.psu.edu/viewdoc/summary?doi_x61_10.1.1.72.1340",
-				"issued": {
-					"date-parts": [
-						[
-							2005
-						]
-					]
-				},
-				"page": "47-56",
-				"title": "The Euclidean algorithm generates traditional musical rhythms",
-				"type": "paper-conference"
-			}
-		},
-		"https://webaudioconf.com/posts/2021_8/": {
-			"fetched": "2022-04-24T21:14:10.409Z",
-			"bibtex": [
-				"",
-				"@misc{noauthor_wac_nodate,",
-				"   title = {{WAC} {\\textbar} {Glicol}: {A} {Graph}-oriented {Live} {Coding} {Language} {Developed} with {Rust}, {WebAssembly} and {AudioWorklet}},",
-				"   url = {https://webaudioconf.com/posts/2021_8/},",
-				"   urldate = {2022-04-24},",
-				"   journal = {webaudioconf.com},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://webaudioconf.com/posts/2021_8/",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							24
-						]
-					]
-				},
-				"container-title": "webaudioconf.com",
-				"id": "https://webaudioconf.com/posts/2021_8/",
-				"title": "WAC  Glicol: A Graph-oriented Live Coding Language Developed with Rust, WebAssembly and AudioWorklet",
-				"title-short": "WAC  Glicol",
-				"type": ""
-			}
-		},
-		"https://webaudioconf.com/posts/2019_38/": {
-			"fetched": "2022-04-24T21:14:46.954Z",
-			"bibtex": [
-				"",
-				"@misc{noauthor_wac_nodate,",
-				"   title = {{WAC} {\\textbar} {FAUST} online {IDE}: dynamically compile and publish {FAUST} code as {WebAudio} {Plugins}},",
-				"   url = {https://webaudioconf.com/posts/2019_38/},",
-				"   urldate = {2022-04-24},",
-				"   journal = {webaudioconf.com},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://webaudioconf.com/posts/2019_38/",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							24
-						]
-					]
-				},
-				"container-title": "webaudioconf.com",
-				"id": "https://webaudioconf.com/posts/2019_38/",
-				"title": "WAC  FAUST online IDE: Dynamically compile and publish FAUST code as WebAudio Plugins",
-				"title-short": "WAC  FAUST online IDE",
-				"type": ""
-			}
-		},
-		"https://strudel.tidalcycles.org": {
-			"fetched": "2022-04-24T21:14:47.822Z",
-			"bibtex": [
-				"",
-				"@misc{noauthor_strudel_nodate,",
-				"   title = {Strudel {REPL}},",
-				"   url = {https://strudel.tidalcycles.org/},",
-				"   abstract = {Strudel REPL},",
-				"   urldate = {2022-04-24},",
-				"   journal = {strudel.tidalcycles.org},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://strudel.tidalcycles.org/",
-				"abstract": "Strudel REPL",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							24
-						]
-					]
-				},
-				"container-title": "strudel.tidalcycles.org",
-				"id": "https://strudel.tidalcycles.org",
-				"title": "Strudel REPL",
-				"type": ""
-			}
-		},
-		"https://hydra.ojack.xyz/docs/#/": {
-			"fetched": "2022-04-25T09:03:25.132Z",
-			"bibtex": [
-				"",
-				"@misc{noauthor_hydra_nodate,",
-				"   title = {Hydra},",
-				"   url = {https://hydra.ojack.xyz/docs/#/},",
-				"   abstract = {Description},",
-				"   urldate = {2022-04-25},",
-				"   journal = {hydra.ojack.xyz},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://hydra.ojack.xyz/docs/#/",
-				"abstract": "Description",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							25
-						]
-					]
-				},
-				"container-title": "hydra.ojack.xyz",
-				"id": "https://hydra.ojack.xyz/docs/_x35_/",
-				"title": "Hydra",
-				"type": ""
-			}
-		},
-		"https://mikesol.github.io/purescript-wags/": {
-			"fetched": "2022-04-25T09:03:26.456Z",
-			"bibtex": [
-				"",
-				"@misc{noauthor_wags_nodate,",
-				"   title = {Wags documentation},",
-				"   url = {https://mikesol.github.io/purescript-wags/},",
-				"   urldate = {2022-04-25},",
-				"   journal = {mikesol.github.io},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://mikesol.github.io/purescript-wags/",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							25
-						]
-					]
-				},
-				"container-title": "mikesol.github.io",
-				"id": "https://mikesol.github.io/purescript-wags/",
-				"title": "Wags documentation",
-				"type": ""
-			}
-		},
-		"https://github.com/tidalcycles/strudel": {
-			"fetched": "2022-04-25T09:15:32.518Z",
-			"bibtex": [
-				"",
-				"@misc{noauthor_strudel_2022,",
-				"   title = {strudel},",
-				"   copyright = {GPL-3.0},",
-				"   url = {https://github.com/tidalcycles/strudel},",
-				"   abstract = {Experimental port of tidalcycles to Javascript},",
-				"   urldate = {2022-04-25},",
-				"   publisher = {TidalCycles},",
-				"   month = apr,",
-				"   year = {2022},",
-				"   note = {original-date: 2022-01-22T20:24:35Z},",
-				"   keywords = {javascript, livecoding, tidal, tidalcycles, algorave, algorithmic-patterns},",
-				"}",
-				""
-			],
-			"csl": {
-				"URL": "https://github.com/tidalcycles/strudel",
-				"abstract": "Experimental port of tidalcycles to Javascript",
-				"accessed": {
-					"date-parts": [
-						[
-							2022,
-							4,
-							25
-						]
-					]
-				},
-				"id": "https://github.com/tidalcycles/strudel",
-				"issued": {
-					"date-parts": [
-						[
-							2022,
-							4
-						]
-					]
-				},
-				"keyword": "javascript, livecoding, tidal, tidalcycles, algorave, algorithmic-patterns",
-				"note": "original-date: 2022-01-22T20:24:35Z",
-				"publisher": "TidalCycles",
-				"title": "Strudel",
-				"type": ""
-			}
-		}
-	}
-}

paper/demo-preprocessed.md

@@ -1,354 +1,7 @@
 ---
-date: 2022-04-15
-references:
-- abstract: In this artist statement, I will discuss the tension between
-    source code as an interactive system for performers and source code
-    as information and entertainment for audiences in live-coding
-    performances. I then describe augmentations I developed for the
-    presentation of source code in the live-coding environment Gibber,
-    including animations and annotations that visually reveal aspects of
-    system state during performances. I briefly describe audience
-    responses to these techniques and, more importantly, how they are
-    critical to my own artistic practice.
-  accessed:
-    date-parts:
-    - - 2022
-      - 3
-      - 24
-  author:
-  - family: Roberts
-    given: Charles
-  container-title: International Journal of Performance Arts and Digital
-    Media
-  DOI: 10.1080/14794713.2016.1227602
-  id: "https://www.tandfonline.com/doi/abs/10.1080/14794713.2016.1227602?journalCode_x61_rpdm20"
-  ISSN: 1479-4713
-  issue: 2
-  issued:
-    date-parts:
-    - - 2016
-      - 7
-  keyword: Live coding, psychology of programming, notation, audiences,
-    algorithms
-  page: 201-206
-  title: Code as information and code as spectacle
-  type: article-journal
-  URL: "https://doi.org/10.1080/14794713.2016.1227602"
-  volume: 12
-- abstract: The TidalCycles (or Tidal for short) live coding environment
-    has been developed since around 2009, via several rewrites of its
-    core representation. Rather than having fixed goals, this
-    development has been guided by use, motivated by the open aim to
-    make music. This development process can be seen as a long-form
-    improvisation, with insights into the nature of Tidal gained through
-    the process of writing it, feeding back to guide the next steps of
-    development. This brings the worrying thought that key insights will
-    have been missed along this development journey, that would
-    otherwise have lead to very different software. Indeed participants
-    at beginners' workshops that I have lead or co-lead have often asked
-    questions without good answers, because they made deficiencies or
-    missing features in the software clear. It is well known that a
-    beginner's mind is able to see much that an expert has become blind
-    to. Running workshops are an excellent way to find new development
-    ideas, but the present paper explores a different technique -- the
-    rewrite.
-  accessed:
-    date-parts:
-    - - 2022
-      - 3
-      - 24
-  id: "https://zenodo.org/record/5788732"
-  issued:
-    date-parts:
-    - - 2021
-      - 12
-  keyword: live coding, algorithmic pattern, tidalcycles, haskell,
-    python
-  publisher-place: Valdivia, Chile
-  title: Alternate Timelines for TidalCycles
-  URL: "https://zenodo.org/record/5788732"
-- abstract: A JavaScript dialect of its mini-notation for pattern is
-    created, enabling easy integration with creative coding tools and an
-    accompanying technique for visually annotating the playback of
-    TidalCycles patterns over time. TidalCycles has rapidly become the
-    most popular system for many styles of live coding performance, in
-    particular Algoraves. We created a JavaScript dialect of its
-    mini-notation for pattern, enabling easy integration with creative
-    coding tools. Our research pairs a formalism describing the
-    mini-notation with a small JavaScript library for generating events
-    over time; this library is suitable for generating events inside of
-    an AudioWorkletProcessor thread and for assisting with scheduling in
-    JavaScript environments more generally. We describe integrating the
-    library into the two live coding systems, Gibber and Hydra, and
-    discuss an accompanying technique for visually annotating the
-    playback of TidalCycles patterns over time.
-  accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 12
-  author:
-  - family: Roberts
-    given: Charles
-  container-title: www.semanticscholar.org
-  id: "https://www.semanticscholar.org/paper/Bringing-the-TidalCycles-Mini-Notation-to-the-Roberts/74965efadd572ae3f40d14c633a5c8581c1b9f42"
-  issued:
-    date-parts:
-    - - 2019
-  title: Bringing the TidalCycles Mini-Notation to the Browser
-  URL: "https://www.semanticscholar.org/paper/Bringing-the-TidalCycles-Mini-Notation-to-the-Roberts/74965efadd572ae3f40d14c633a5c8581c1b9f42"
-- abstract: In this paper we introduce "version zero" of TidalVortex, an
-    alternative implementation of the TidalCycles live coding system,
-    using the Python programming language.  This is open-ended work,
-    exploring what happens when we try to extract the 'essence' of a
-    system like TidalCycles and translate it into another programming
-    language, while taking advantage of the affordance of its new host.
-    First, we review the substantial prior art in porting TidalCycles,
-    and in representing musical patterns in Python. We then compare
-    equivalent patterns written in Haskell (TidalCycles) and Python
-    (TidalVortex), and relate implementation details of how functional
-    reactive paradigms have translated from the pure functional,
-    strongly typed Haskell to the more multi-paradigm, dynamically typed
-    Python. Finally, we conclude with reflections and generalisable
-    outcomes.
-  accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 14
-  id: "https://zenodo.org/record/6456380"
-  issued:
-    date-parts:
-    - - 2022
-      - 4
-  publisher-place: Limerick, Ireland
-  title: TidalVortex Zero
-  URL: "https://zenodo.org/record/6456380"
-- abstract: This paper brings together two main perspectives on
-    algorithmic pattern. First, the writing of musical patterns in live
-    coding performance, and second, the weaving of patterns in textiles.
-    In both cases, algorithmic pattern is an interface between the human
-    and the outcome, where small changes have far-reaching impact on the
-    results. By bringing contemporary live coding and ancient textile
-    approaches together, we reach a common view of pattern as
-    algorithmic movement (e.g. looping, shifting, reflecting,
-    interfering) in the making of things. This works beyond the usual
-    definition of pattern used in musical interfaces, of mere repeating
-    sequences. We conclude by considering the place of algorithmic
-    pattern in a wider activity of making.
-  accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 15
-  id: "https://zenodo.org/record/4299661"
-  issued:
-    date-parts:
-    - - 2020
-      - 7
-  keyword: pattern, tidalcycles, algorithmic music, textiles, live
-    coding, algorave
-  publisher-place: Birmingham UK
-  title: Algorithmic Pattern
-  URL: "https://zenodo.org/record/4299661"
-- accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 15
-  author:
-  - family: Charlie
-    given: Roberts
-  - family: Joann
-    given: Kuchera-Morin
-  container-title: International Computer Music Conference Proceedings
-  id: "https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/--gibber-live-coding-audio-in-the-browser?page_x61_root;size_x61_150;view_x61_text"
-  ISSN: 2223-3881
-  issued:
-    date-parts:
-    - - 2012
-  title: "GIBBER: LIVE CODING AUDIO IN THE BROWSER"
-  title-short: GIBBER
-  type: article-journal
-  URL: "https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/%E2%80%93gibber-live-coding-audio-in-the-browser?page=root;size=150;view=text"
-  volume: 2012
-- abstract: Estuary is a browser-based collaborative projectional
-    editing environment built on top of the popular TidalCycles language
-    for the live coding of musical pattern that includes a strict form
-    of structure editing, a click-only border-free approach to interface
-    design, and explicit notations to modulate the liveness of different
-    parts of the code. This paper describes the initial design and
-    development of Estuary, a browser-based collaborative projectional
-    editing environment built on top of the popular TidalCycles language
-    for the live coding of musical pattern. Key features of Estuary
-    include a strict form of structure editing (making syntactical
-    errors impossible), a click-only border-free approach to interface
-    design, explicit notations to modulate the liveness of different
-    parts of the code, and a server-based network collaboration system
-    that can be used for many simultaneous collaborative live coding
-    performances, as well as to present different views of the same live
-    coding activity. Estuary has been developed using Reflex-DOM, a
-    Haskell-based framework for web development whose strictness
-    promises robustness and security advantages.
-  accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 15
-  author:
-  - family: Ogborn
-    given: David
-  - family: Beverley
-    given: J.
-  container-title: www.semanticscholar.org
-  id: "https://www.semanticscholar.org/paper/Estuary_x37_3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b"
-  issued:
-    date-parts:
-    - - 2017
-  title: "Estuary: Browser-based Collaborative Projectional Live Coding
-    of Musical Patterns"
-  title-short: Estuary
-  URL: "https://www.semanticscholar.org/paper/Estuary%3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b"
-- abstract: This is an improvised, from-scratch live coding performance.
-    The NIME interface which this performance showcases is the new
-    Feedfoward editor for the TidalCycles live coding environment.
-    Feedforward is written in Haskell using the ncurses library for
-    terminal-based user interfaces. It runs on low-powered hardware
-    including the Raspberry Pi Zero, with formative testing of
-    prototypes conducted with several groups of children between the
-    ages of 8 and 14. Feedforward has a number of features designed to
-    support improvised, multi-pattern live coding. Individual Tidal
-    patterns are addressable with hotkeys for fast mute and unmuting.
-    Each pattern has a stereo VU meter, to aid the quick matching of
-    sound to pattern within a mix. In addition, TidalCycles has been
-    extended to store context with each event, so that source code
-    positions in its polyrhythmic sequence mini-notation are tracked.
-    This allows steps to be highlighted in the source code when- ever
-    they are active. This works even when Tidal combinators have been
-    applied to manipulate the timeline. Formal evaluation has yet to
-    take place, but this feature appears to support learning of how
-    pattern manipulations work in Tidal. Feedforward and TidalCycles is
-    free/open source software under a GPL licence version 3.0.
-  accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 15
-  id: "https://zenodo.org/record/6353969"
-  issued:
-    date-parts:
-    - - 2020
-      - 7
-  publisher-place: Birmingham
-  title: Feedforward
-  URL: "https://zenodo.org/record/6353969"
-- abstract: The Euclidean algorithm (which comes down to us from
-    Euclid's Elements) computes the greatest common divisor of two given
-    integers. It is shown here that the structure of the Euclidean
-    algorithm may be used to automatically generate, very efficiently, a
-    large family of rhythms used as timelines (rhythmic ostinatos), in
-    traditional world music. These rhythms, here dubbed Euclidean
-    rhythms, have the property that their onset patterns are distributed
-    as evenly as possible in a mathematically precise sense, and optimal
-    manner. Euclidean rhythms are closely related to the family of Aksak
-    rhythms studied by ethnomusicologists, and occur in a wide variety
-    of other disciplines as well. For example they characterize
-    algorithms for drawing digital straight lines in computer graphics,
-    as well as algorithms for calculating leap years in calendar design.
-    Euclidean rhythms also find application in nuclear physics
-    accelerators and in computer science, and are closely related to
-    several families of words and sequences of interest in the study of
-    the combinatorics of words, such as mechanical words, Sturmian
-    words, two-distance sequences, and Euclidean strings, to which the
-    Euclidean rhythms are compared. 1.
-  accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 24
-  author:
-  - family: Toussaint
-    given: Godfried
-  container-title: "In Proceedings of BRIDGES: Mathematical Connections
-    in Art, Music and Science"
-  id: "https://citeseerx.ist.psu.edu/viewdoc/summary?doi_x61_10.1.1.72.1340"
-  issued:
-    date-parts:
-    - - 2005
-  page: 47-56
-  title: The Euclidean algorithm generates traditional musical rhythms
-  type: paper-conference
-  URL: "https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.72.1340"
-- accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 24
-  container-title: webaudioconf.com
-  id: "https://webaudioconf.com/posts/2021_8/"
-  title: "WAC Glicol: A Graph-oriented Live Coding Language Developed
-    with Rust, WebAssembly and AudioWorklet"
-  title-short: WAC Glicol
-  URL: "https://webaudioconf.com/posts/2021_8/"
-- accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 24
-  container-title: webaudioconf.com
-  id: "https://webaudioconf.com/posts/2019_38/"
-  title: "WAC FAUST online IDE: Dynamically compile and publish FAUST
-    code as WebAudio Plugins"
-  title-short: WAC FAUST online IDE
-  URL: "https://webaudioconf.com/posts/2019_38/"
-- abstract: Strudel REPL
-  accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 24
-  container-title: strudel.tidalcycles.org
-  id: "https://strudel.tidalcycles.org"
-  title: Strudel REPL
-  URL: "https://strudel.tidalcycles.org/"
-- abstract: Description
-  accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 25
-  container-title: hydra.ojack.xyz
-  id: "https://hydra.ojack.xyz/docs/\\_x35\\_/"
-  title: Hydra
-  URL: "https://hydra.ojack.xyz/docs/#/"
-- accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 25
-  container-title: mikesol.github.io
-  id: "https://mikesol.github.io/purescript-wags/"
-  title: Wags documentation
-  URL: "https://mikesol.github.io/purescript-wags/"
-- abstract: Experimental port of tidalcycles to Javascript
-  accessed:
-    date-parts:
-    - - 2022
-      - 4
-      - 25
-  id: "https://github.com/tidalcycles/strudel"
-  issued:
-    date-parts:
-    - - 2022
-      - 4
-  keyword: javascript, livecoding, tidal, tidalcycles, algorave,
-    algorithmic-patterns
-  note: "original-date: 2022-01-22T20:24:35Z"
-  publisher: TidalCycles
-  title: Strudel
-  URL: "https://github.com/tidalcycles/strudel"
+bibliography: citations.json
+date: 2022-06-24
 title: "Strudel: Algorithmic Patterns for the Web"
-url2cite: all-links
 ---
 
 # Introduction
@@ -358,9 +11,9 @@ alternative implementation of the Tidal (or 'TidalCycles') live coding
 system, using the JavaScript programming language. Strudel is an attempt
 to make live coding more accessible, by creating a system that runs
 entirely in the browser, while opening Tidal's approach to algorithmic
-patterns [@https://zenodo.org/record/4299661] up to modern audio/visual
-web technologies. The Strudel REPL is a live code editor dedicated to
-manipulating strudel patterns while they play, with builtin visual
+patterns [@mcleanAlgorithmicPattern2020a] up to modern audio/visual web
+technologies. The Strudel REPL is a live code editor dedicated to
+manipulating Strudel patterns while they play, with builtin visual
 feedback. While Strudel is written in JavaScript, the API is optimized
 for simplicity and readability by applying code transformations on the
 syntax tree level, allowing language operations that would otherwise be
@@ -369,13 +22,11 @@ including Tone.js, Web Audio nodes, OSC (Open Sound Control) messages,
 Web Serial and Web MIDI. The project is split into multiple packages,
 allowing granular reuse in other applications. Apart from TidalCycles,
 Strudel draws inspiration from many prior existing projects like
-TidalVortex [@https://zenodo.org/record/6456380], Gibber
-[@{https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/–gibber-live-coding-audio-in-the-browser?page_x61_root;size_x61_150;view_x61_text}],
-Estuary
-[@https://www.semanticscholar.org/paper/Estuary_x37_3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b],
-Hydra [@{https://hydra.ojack.xyz/docs/_x35_/}], Wags
-[@{https://mikesol.github.io/purescript-wags/}] and Feedforward
-[@https://zenodo.org/record/6353969].
+TidalVortex [@mcleanTidalVortexZero2022], Gibber
+[@robertsGibberLiveCoding2012], Estuary
+[@ogbornEstuaryBrowserbasedCollaborative2017], Hydra [@jackHydra2022],
+Ocarina [@solomonPurescriptocarina2022] and Feedforward
+[@mcleanFeedforward2020].
 
 # Porting from Haskell
 
@@ -387,12 +38,12 @@ with a dynamic type system. Because Tidal leans heavily on many of
 Haskell's more unique features, it was not always clear that it could
 meaningfully be ported to a multi-paradigm scripting language. However,
 this already proved to be the case with an earlier port to Python
-\[TidalVortex; @https://zenodo.org/record/6456380\], and we have now
+\[TidalVortex; @mcleanTidalVortexZero2022\], and we have now
 successfully implemented Tidal's pure functional representation of
 patterns in Strudel, including partial application, and functor,
 applicative and monad structures. Over the past few months since the
 project started in January 2022, a large part of Tidal's functionality
-has already been ported, including it's mini-notation for polymetric
+has already been ported, including its mini-notation for polymetric
 sequences, and a large part of its library of pattern manipulations. The
 result is a terse and highly composable system, where just about
 everything is a pattern, that may be transformed and combined with other
@@ -478,20 +129,53 @@ This line could also be expressed without mini notation:
 
 Here is a short description of all the functions used:
 
--   slowcat: play elements sequentially, where each lasts one cycle
--   brackets: elements inside brackets are divided equally over the time
-    of their parent
--   euclid(p, s, o): place p pulses evenly over s steps, with offset o
-    [@https://citeseerx.ist.psu.edu/viewdoc/summary?doi_x61_10.1.1.72.1340]
--   fast(n): speed up by n. `g3.fast(2)` will play g3 two times.
--   off(n, f): copy each event, offset it by n cycles and apply function
-    f
--   legato(n): multiply duration of event with n
--   echo(t, n, v): copy each event t times, with n cycles in between
+-   `slowcat`: play elements sequentially, where each lasts one cycle
+-   `brackets`: elements inside brackets are divided equally over the
+    time of their parent
+-   `euclid(p, s, o)`: place p pulses evenly over s steps, with offset o
+    [@toussaintEuclideanAlgorithmGenerates2005]
+-   `fast(n)`: speed up by n. `g3.fast(2)` will play g3 two times.
+-   `off(n, f)`: copy each event, offset it by n cycles and apply
+    function f
+-   `legato(n)`: multiply duration of event with n
+-   `echo(t, n, v)`: copy each event t times, with n cycles in between
     each copy, decreasing velocity by v
--   tone(instrument): play back each event with the given Tone.js
+-   `tone(instrument)`: play back each event with the given Tone.js
     instrument
--   pianoroll(): visualize events as midi notes in a pianoroll
+-   `pianoroll()`: visualize events as midi notes in a pianoroll
+
+# Ways to make Sound
+
+To generate sound, Strudel supports different outputs:
+
+-   Tone.js
+-   Web Audio API
+-   WebDirt, a js recreation of Tidal's *Dirt* sample engine
+-   OSC via osc-js
+-   MIDI via WebMIDI
+
+Tone.js proved to be limited for the use case of Strudel, where each
+individual event could potentially have a completely different audio
+graph. While the Web Audio API takes a *fire-and-forget* approach,
+creating a lot of Tone.js instruments and effects causes performance
+issues quickly. For that reason, we chose to search for alternatives.
+
+Strudel's Web Audio API output creates a new audio graph for each event.
+It currently supports basic oscillators, sample playback, envelopes,
+filters and an experimental support for soundfonts.
+
+WebDirt [@ogbornDktr0WebDirt2022] was created as part of the Estuary
+Live Coding System [@ogbornEstuaryBrowserbasedCollaborative2017], and
+proved to be a solid choice for handling samples in Strudel as well.
+
+Using OSC, it is possible to send messages to SuperDirt
+[@SuperDirt2022], which is what Tidal does to generate sound. The
+downside of using OSC is that it requires the user to install
+SuperCollider and its sc3plugins library, which can be difficult.
+
+The MIDI output can be used to send MIDI messages to either external
+instruments or to other programs on the same device. Web MIDI is
+currently only supported on Chromium-based browsers.
 
 # Future Outlook
 
@@ -502,45 +186,23 @@ general guiding principles, Strudel aims to be
 2.  consistent with Tidal's approach to pattern
 3.  modular and extensible
 
-The main accessibility advantage over Tidal is the zero install browser
-environment. It is not yet accessible to screen reader users, but will
-be soon with the integration of the CodeMirror 6 editor. While Strudel
-can control Tidal's SuperDirt audio system via OSC, it requires the user
-to install SuperCollider and its sc3plugins library, which can be
-difficult. Without SuperDirt, Strudel is able to output sound itself via
-Tone.js, however this is limited both in terms of available features and
-runtime performance. For the future, it is planned to integrate
-alternative sound engines such as glicol
-[@{https://webaudioconf.com/posts/2021_8/}] and faust
-[@{https://webaudioconf.com/posts/2019_38/}]. To improve compatibility
-with Tidal, more Tidal functions are planned to be ported, as well as
-full compatibility with SuperDirt. Besides sound, other ways to render
-events are being explored, such as graphical, and choreographic output.
-We are also looking into alternative ways of editing patterns, including
+For the future, it is planned to integrate alternative sound engines
+such as Glicol [@lanChaosprintGlicol2022] and Faust
+[@FaustProgrammingLanguage2022]. To improve compatibility with Tidal,
+more Tidal functions are planned to be ported, as well as full
+compatibility with SuperDirt. Besides sound, other ways to render events
+are being explored, such as graphical, and choreographic output. We are
+also looking into alternative ways of editing patterns, including
 multi-user editing for network music, parsing a novel syntax to escape
 the constraints of javascript, and developing hardware/e-textile
 interfaces.
 
 # Links
 
-The Strudel REPL is available at [https://strudel.tidalcycles.org
-[@https://strudel.tidalcycles.org]](https://strudel.tidalcycles.org){.uri
-cite-meta="{\"URL\":\"https://strudel.tidalcycles.org/\",\"abstract\":\"Strudel REPL\",\"accessed\":{\"date-parts\":[[2022,4,24]]},\"container-title\":\"strudel.tidalcycles.org\",\"id\":\"https://strudel.tidalcycles.org\",\"title\":\"Strudel REPL\",\"type\":\"\"}"},
+The Strudel REPL is available at <https://strudel.tidalcycles.org>,
 including an interactive tutorial. The repository is at
-[https://github.com/tidalcycles/strudel
-[@https://github.com/tidalcycles/strudel]](https://github.com/tidalcycles/strudel){.uri
-cite-meta="{\"URL\":\"https://github.com/tidalcycles/strudel\",\"abstract\":\"Experimental port of tidalcycles to Javascript\",\"accessed\":{\"date-parts\":[[2022,4,25]]},\"id\":\"https://github.com/tidalcycles/strudel\",\"issued\":{\"date-parts\":[[2022,4]]},\"keyword\":\"javascript, livecoding, tidal, tidalcycles, algorave, algorithmic-patterns\",\"note\":\"original-date: 2022-01-22T20:24:35Z\",\"publisher\":\"TidalCycles\",\"title\":\"Strudel\",\"type\":\"\"}"},
-all the code is open source under the GPL-3.0 License.
-
-# Technical requirements
-
--   Space for one laptop + small audio interface (20 cm x 20cm), with
-    mains power.
--   Stereo sound system, either placed behind presenter (for direct
-    monitoring) or with additional stereo monitors.
--   Audio from audio interface: stereo pair 6,3mm jack outputs
-    (balanced)
--   Projector / screen (HDMI.)
+<https://github.com/tidalcycles/strudel>, all the code is open source
+under the GPL-3.0 License.
 
 # Acknowledgments
 
@@ -549,4 +211,4 @@ free/open source software communities for inspiration and support. Alex
 McLean's work on this project is supported by a UKRI Future Leaders
 Fellowship \[grant number MR/V025260/1\].
 
-# References
+# References {#references .unnumbered}

paper/demo.md

@@ -1,16 +1,16 @@
 ---
 title: 'Strudel: Algorithmic Patterns for the Web'
-date: '2022-04-15'
-url2cite: all-links
+date: '2022-06-24'
+bibliography: citations.json
 ---
 
 # Introduction
 
-This paper introduces Strudel (or sometimes 'StrudelCycles'), an alternative implementation of the Tidal (or 'TidalCycles') live coding system, using the JavaScript programming language. Strudel is an attempt to make live coding more accessible, by creating a system that runs entirely in the browser, while opening Tidal's approach to algorithmic patterns [@algorithmicpattern] up to modern audio/visual web technologies. The Strudel REPL is a live code editor dedicated to manipulating strudel patterns while they play, with builtin visual feedback. While Strudel is written in JavaScript, the API is optimized for simplicity and readability by applying code transformations on the syntax tree level, allowing language operations that would otherwise be impossible. The application supports multiple ways to output sound, including Tone.js, Web Audio nodes, OSC (Open Sound Control) messages, Web Serial and Web MIDI. The project is split into multiple packages, allowing granular reuse in other applications. Apart from TidalCycles, Strudel draws inspiration from many prior existing projects like TidalVortex [@tidalvortex], Gibber [@gibber], Estuary [@estuary], Hydra [@hydra], Wags [@wags] and Feedforward [@feedforward].
+This paper introduces Strudel (or sometimes 'StrudelCycles'), an alternative implementation of the Tidal (or 'TidalCycles') live coding system, using the JavaScript programming language. Strudel is an attempt to make live coding more accessible, by creating a system that runs entirely in the browser, while opening Tidal's approach to algorithmic patterns [@mcleanAlgorithmicPattern2020a] up to modern audio/visual web technologies. The Strudel REPL is a live code editor dedicated to manipulating Strudel patterns while they play, with builtin visual feedback. While Strudel is written in JavaScript, the API is optimized for simplicity and readability by applying code transformations on the syntax tree level, allowing language operations that would otherwise be impossible. The application supports multiple ways to output sound, including Tone.js, Web Audio nodes, OSC (Open Sound Control) messages, Web Serial and Web MIDI. The project is split into multiple packages, allowing granular reuse in other applications. Apart from TidalCycles, Strudel draws inspiration from many prior existing projects like TidalVortex [@mcleanTidalVortexZero2022], Gibber [@robertsGibberLiveCoding2012], Estuary [@ogbornEstuaryBrowserbasedCollaborative2017], Hydra [@jackHydra2022], Ocarina [@solomonPurescriptocarina2022] and Feedforward [@mcleanFeedforward2020].
 
 # Porting from Haskell
 
-The original Tidal is implemented as a domain specific language (DSL), embedded in the Haskell pure functional programming language, taking advantage of Haskell's terse syntax and advanced, 'strong' type system. Javascript on the other hand, is a multi-paradigm programming language, with a dynamic type system. Because Tidal leans heavily on many of Haskell's more unique features, it was not always clear that it could meaningfully be ported to a multi-paradigm scripting language. However, this already proved to be the case with an earlier port to Python [TidalVortex; @tidalvortex], and we have now successfully implemented Tidal's pure functional representation of patterns in Strudel, including partial application, and functor, applicative and monad structures. Over the past few months since the project started in January 2022, a large part of Tidal's functionality has already been ported, including it's mini-notation for polymetric sequences, and a large part of its library of pattern manipulations. The result is a terse and highly composable system, where just about everything is a pattern, that may be transformed and combined with other patterns in a myriad of ways.
+The original Tidal is implemented as a domain specific language (DSL), embedded in the Haskell pure functional programming language, taking advantage of Haskell's terse syntax and advanced, 'strong' type system. Javascript on the other hand, is a multi-paradigm programming language, with a dynamic type system. Because Tidal leans heavily on many of Haskell's more unique features, it was not always clear that it could meaningfully be ported to a multi-paradigm scripting language. However, this already proved to be the case with an earlier port to Python [TidalVortex; @mcleanTidalVortexZero2022], and we have now successfully implemented Tidal's pure functional representation of patterns in Strudel, including partial application, and functor, applicative and monad structures. Over the past few months since the project started in January 2022, a large part of Tidal's functionality has already been ported, including its mini-notation for polymetric sequences, and a large part of its library of pattern manipulations. The result is a terse and highly composable system, where just about everything is a pattern, that may be transformed and combined with other patterns in a myriad of ways.
 
 # Representing Patterns
 
@@ -81,15 +81,39 @@ slowcat(d3, f3, [a3, c3].euclid(3, 4, 1), g3.fast(2))
 
 Here is a short description of all the functions used:
 
-- slowcat: play elements sequentially, where each lasts one cycle
-- brackets: elements inside brackets are divided equally over the time of their parent
-- euclid(p, s, o): place p pulses evenly over s steps, with offset o [@godfried]
-- fast(n): speed up by n. `g3.fast(2)` will play g3 two times.
-- off(n, f): copy each event, offset it by n cycles and apply function f
-- legato(n): multiply duration of event with n
-- echo(t, n, v): copy each event t times, with n cycles in between each copy, decreasing velocity by v
-- tone(instrument): play back each event with the given Tone.js instrument
-- pianoroll(): visualize events as midi notes in a pianoroll
+- `slowcat`: play elements sequentially, where each lasts one cycle
+- `brackets`: elements inside brackets are divided equally over the time of their parent
+- `euclid(p, s, o)`: place p pulses evenly over s steps, with offset o [@toussaintEuclideanAlgorithmGenerates2005]
+- `fast(n)`: speed up by n. `g3.fast(2)` will play g3 two times.
+- `off(n, f)`: copy each event, offset it by n cycles and apply function f
+- `legato(n)`: multiply duration of event with n
+- `echo(t, n, v)`: copy each event t times, with n cycles in between each copy, decreasing velocity by v
+- `tone(instrument)`: play back each event with the given Tone.js instrument
+- `pianoroll()`: visualize events as midi notes in a pianoroll
+
+# Ways to make Sound
+
+To generate sound, Strudel supports different outputs:
+
+- Tone.js
+- Web Audio API
+- WebDirt, a js recreation of Tidal's *Dirt* sample engine
+- OSC via osc-js
+- MIDI via WebMIDI
+
+Tone.js proved to be limited for the use case of Strudel, where each individual event could potentially have a completely different audio graph.
+While the Web Audio API takes a *fire-and-forget* approach, creating a lot of Tone.js instruments and effects causes performance issues quickly. For that reason, we chose to search for alternatives.
+
+Strudel's Web Audio API output creates a new audio graph for each event. It currently supports basic oscillators, sample playback, envelopes, filters and
+an experimental support for soundfonts.
+
+WebDirt [@ogbornDktr0WebDirt2022] was created as part of the Estuary Live Coding System [@ogbornEstuaryBrowserbasedCollaborative2017], and proved to be a solid choice for handling samples in Strudel as well.
+
+Using OSC, it is possible to send messages to SuperDirt [@SuperDirt2022], which is what Tidal does to generate sound.
+The downside of using OSC is that it requires the user to install SuperCollider and its sc3plugins library, which can be difficult.
+
+The MIDI output can be used to send MIDI messages to either external instruments or to other programs on the same device.
+Web MIDI is currently only supported on Chromium-based browsers.
 
 # Future Outlook
 
@@ -99,42 +123,15 @@ The project is still young, with many features on the horizon. As general guidin
 2. consistent with Tidal's approach to pattern
 3. modular and extensible
 
-The main accessibility advantage over Tidal is the zero install browser environment. It is not yet accessible to screen reader users, but will be soon with the integration of the CodeMirror 6 editor. While Strudel can control Tidal's SuperDirt audio system via OSC, it requires the user to install SuperCollider and its sc3plugins library, which can be difficult. Without SuperDirt, Strudel is able to output sound itself via Tone.js, however this is limited both in terms of available features and runtime performance. For the future, it is planned to integrate alternative sound engines such as glicol [@glicol] and faust [@faust]. To improve compatibility with Tidal, more Tidal functions are planned to be ported, as well as full compatibility with SuperDirt. Besides sound, other ways to render events are being explored, such as graphical, and choreographic output. We are also looking into alternative ways of editing patterns, including multi-user editing for network music, parsing a novel syntax to escape the constraints of javascript, and developing hardware/e-textile interfaces.
+For the future, it is planned to integrate alternative sound engines such as Glicol [@lanChaosprintGlicol2022] and Faust [@FaustProgrammingLanguage2022]. To improve compatibility with Tidal, more Tidal functions are planned to be ported, as well as full compatibility with SuperDirt. Besides sound, other ways to render events are being explored, such as graphical, and choreographic output. We are also looking into alternative ways of editing patterns, including multi-user editing for network music, parsing a novel syntax to escape the constraints of javascript, and developing hardware/e-textile interfaces.
 
 # Links
 
 The Strudel REPL is available at <https://strudel.tidalcycles.org>, including an interactive tutorial.
 The repository is at <https://github.com/tidalcycles/strudel>, all the code is open source under the GPL-3.0 License.
 
-# Technical requirements
-
-- Space for one laptop + small audio interface (20 cm x 20cm), with mains power.
-- Stereo sound system, either placed behind presenter (for direct monitoring) or with additional stereo monitors.
-- Audio from audio interface: stereo pair 6,3mm jack outputs (balanced)
-- Projector / screen (HDMI.)
-
 # Acknowledgments
 
 Thanks to the Strudel and wider Tidal, live coding, webaudio and free/open source software communities for inspiration and support. Alex McLean's work on this project is supported by a UKRI Future Leaders Fellowship [grant number MR/V025260/1].
 
 # References
-
-[@roberts2016]: https://www.tandfonline.com/doi/abs/10.1080/14794713.2016.1227602?journalCode=rpdm20
-[@gibber]: https://quod.lib.umich.edu/i/icmc/bbp2372.2012.011/2/--gibber-live-coding-audio-in-the-browser?page=root;size=150;view=text
-[@alternate-timelines]: https://zenodo.org/record/5788732
-[@tidal.pegjs]: https://www.semanticscholar.org/paper/Bringing-the-TidalCycles-Mini-Notation-to-the-Roberts/74965efadd572ae3f40d14c633a5c8581c1b9f42
-[@tidalvortex]: https://zenodo.org/record/6456380
-[@estuary]: https://www.semanticscholar.org/paper/Estuary%3A-Browser-based-Collaborative-Projectional-Ogborn-Beverley/c6b5d34575d6230dfd8751ca4af8e5f6e44d916b
-[@tidalcycles]: https://dl.acm.org/doi/10.1145/2633638.2633647
-[@hession]: https://www.scopus.com/record/display.uri?eid=2-s2.0-84907386880&origin=inward&txGid=03307e26fba02a27bdc68bda462016f6266316467_Extending_Instruments_with_Live_Algorithms_in_a_Percussion_Code_Duo
-[@spiegel]: https://www.academia.edu/664807/Manipulations_of_musical_patterns
-[@bel]: https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.517.7129
-[@algorithmicpattern]: https://zenodo.org/record/4299661
-[@fabricating]: https://zenodo.org/record/2155745
-[@cyclic-patterns]: https://zenodo.org/record/1548969
-[@feedforward]: https://zenodo.org/record/6353969
-[@godfried]: https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.72.1340
-[@glicol]: https://webaudioconf.com/posts/2021_8/
-[@faust]: https://webaudioconf.com/posts/2019_38/
-[@wags]: https://mikesol.github.io/purescript-wags/
-[@hydra]: https://hydra.ojack.xyz/docs/#/

paper/make.sh

@@ -8,10 +8,10 @@ fi
 
 pandoc -s demo.md \
   --from markdown+auto_identifiers --pdf-engine=xelatex --template tex/latex-template.tex -V colorlinks --number-sections \
-  --filter=pandoc-url2cite --citeproc --pdf-engine=xelatex \
+  --citeproc --pdf-engine=xelatex \
   --dpi=300 -o demo.pdf
 
-pandoc -s demo.md --filter bin/code-filter.py --filter=pandoc-url2cite \
+pandoc -s demo.md --filter bin/code-filter.py \
   --citeproc \
   -t markdown-citations -t markdown-fenced_divs \
   -o demo-preprocessed.md

repl/.gitignore

@@ -23,4 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-oldtunes.mjs
+oldtunes.mjs
+
+public/samples/EMU World

repl/package.json

@@ -7,7 +7,7 @@
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "mocha ./src/test --colors",
+    "test": "NODE_OPTIONS='--experimental-fetch' mocha ./src/test --colors",
     "snapshot": "cd ./src/ && rm -f ./tunes.snapshot.mjs && node ./shoot.mjs > ./tunes.snapshot.mjs",
     "add-license": "cat etc/agpl-header.txt ../docs/static/js/*LICENSE.txt > /tmp/strudel-license.txt && cp /tmp/strudel-license.txt ../docs/static/js/*LICENSE.txt",
     "predeploy": "npm run build",