Revert "thingie to display current pattern value"

This reverts commit 989b5dcc3a.

packages/core/clockworker.js

@@ -12,6 +12,8 @@ function getTime() {
 let num_cycles_at_cps_change = 0;
 let num_ticks_since_cps_change = 0;
 let num_seconds_at_cps_change = 0;
+let max_cycle = null;
+
 let cps = 0.5;
 // {id: {started: boolean}}
 const clients = new Map();
@@ -39,6 +41,7 @@ const sendTick = (phase, duration, tick, time) => {
     cps,
     time,
     cycle,
+    max_cycle,
   });
   num_ticks_since_cps_change++;
 };
@@ -60,9 +63,10 @@ const stopClock = async (id) => {
 
   const otherClientStarted = Array.from(clients.values()).some((c) => c.started);
   //dont stop the clock if other instances are running...
-  if (!started || otherClientStarted) {
+  // actually do stop it
-    return;
+  // if (!started || otherClientStarted) {
-  }
+  //   return;
+  // }
 
   clock.stop();
   setCycle(0);
@@ -74,6 +78,10 @@ const setCycle = (cycle) => {
   num_cycles_at_cps_change = cycle;
 };
 
+const setMaxCycle = (cycle) => {
+  max_cycle = cycle;
+};
+
 const processMessage = (message) => {
   const { type, payload } = message;
 
@@ -92,6 +100,10 @@ const processMessage = (message) => {
       setCycle(payload.cycle);
       break;
     }
+    case 'setmaxcycle': {
+      setMaxCycle(payload.maxcycle);
+      break;
+    }
     case 'toggle': {
       if (payload.started) {
         startClock(message.id);

packages/core/controls.mjs

@@ -1887,19 +1887,52 @@ export const { roomsize, size, sz, rsize } = registerControl('roomsize', 'size',
 export const { shape } = registerControl(['shape', 'shapevol']);
 /**
  * Wave shaping distortion. CAUTION: it can get loud.
- * Second option in optional array syntax (ex: ".9:.5") applies a postgain to the output.
+ * Second option in optional array syntax (ex: ".9:.5") applies a postgain to the output. Third option sets the waveshaping type.
  * Most useful values are usually between 0 and 10 (depending on source gain). If you are feeling adventurous, you can turn it up to 11 and beyond ;)
  *
  * @name distort
  * @synonyms dist
- * @param {number | Pattern} distortion
+ * @param {number | Pattern} distortion amount of distortion to apply
+ * @param {number | Pattern} volume linear postgain of the distortion
+ * @param {number | string | Pattern} type type of distortion to apply
  * @example
  * s("bd sd [~ bd] sd,hh*8").distort("<0 2 3 10:.5>")
  * @example
  * note("d1!8").s("sine").penv(36).pdecay(.12).decay(.23).distort("8:.4")
+ * @example
+ * s("bd:4*4").bank("tr808").distort("3:0.5:diode")
  *
  */
-export const { distort, dist } = registerControl(['distort', 'distortvol'], 'dist');
+export const { distort, dist } = registerControl(['distort', 'distortvol', 'distorttype'], 'dist');
+
+/**
+ * Postgain for waveshaping distortion.
+ *
+ * @name distortvol
+ * @synonyms distvol
+ * @param {number | Pattern} volume linear postgain of the distortion
+ * @example
+ * s("bd*4").bank("tr909").distort(2).distortvol(0.8)
+ */
+export const { distortvol } = registerControl('distortvol', 'distvol');
+
+/**
+ * Type of waveshaping distortion to apply.
+ *
+ * @name distorttype
+ * @synonyms disttype
+ * @param {number | string | Pattern} type type of distortion to apply
+ * @example
+ * s("bd*4").bank("tr909").distort(2).distorttype("<0 1 2>")
+ *
+ * @example
+ * s("sine").note("F1*2").release(1)
+ *   .penv(24).pdecay(0.05)
+ *   .distort(rand.range(1, 8))
+ *   .distorttype("<fold chebyshev scurve diode asym sinefold>")
+ */
+export const { distorttype } = registerControl('distorttype', 'disttype');
+
 /**
  * Dynamics Compressor. The params are `compressor("threshold:ratio:knee:attack:release")`
  * More info [here](https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode?retiredLocale=de#instance_properties)

packages/core/cyclist.mjs

@@ -14,7 +14,7 @@ export class Cyclist {
     onToggle,
     onError,
     getTime,
-    latency = 0.1,
+    latency = 0.03,
     setInterval,
     clearInterval,
     beforeStart,

packages/core/logger.mjs

@@ -18,7 +18,7 @@ export function logger(message, type, data = {}) {
   }
   lastMessage = message;
   lastTime = t;
-  console.log(`%c${message}`, 'background-color: black;color:white;border-radius:15px');
+  console.log(`${t} %c${message}`, 'background-color: black;color:white;border-radius:15px');
   if (typeof document !== 'undefined' && typeof CustomEvent !== 'undefined') {
     document.dispatchEvent(
       new CustomEvent(logKey, {

packages/core/neocyclist.mjs

@@ -1,6 +1,6 @@
 /*
 neocyclist.mjs - event scheduler like cyclist, except recieves clock pulses from clockworker in order to sync across multiple instances.
-Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/neocyclist.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/neocyclist.mjs>
 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/>.
 */
 
@@ -11,6 +11,7 @@ export class NeoCyclist {
   constructor({ onTrigger, onToggle, getTime }) {
     this.started = false;
     this.cps = 0.5;
+    this.lastTick = 0; // absolute time when last tick (clock callback) happened
     this.getTime = getTime; // get absolute time
     this.time_at_last_tick_message = 0;
     // the clock of the worker and the audio context clock can drift apart over time
@@ -19,16 +20,18 @@ export class NeoCyclist {
     // in order to schedule events consistently.
     this.collator = new ClockCollator({ getTargetClockTime: getTime });
     this.onToggle = onToggle;
-    this.latency = 0.1; // fixed trigger time offset
+    this.latency = -0.1; // fixed trigger time offset
     this.cycle = 0;
+    this.maxcycle = null;
     this.id = Math.round(Date.now() * Math.random());
     this.worker = new SharedWorker(new URL('./clockworker.js', import.meta.url));
     this.worker.port.start();
     this.channel = new BroadcastChannel('strudeltick');
     const tickCallback = (payload) => {
-      const { cps, begin, end, cycle, time } = payload;
+      const { cps, begin, end, cycle, maxcycle, time } = payload;
       this.cps = cps;
       this.cycle = cycle;
+      this.maxcycle = maxcycle;
       const currentTime = this.collator.calculateOffset(time) + time;
       processHaps(begin, end, currentTime);
       this.time_at_last_tick_message = currentTime;

packages/core/pattern.mjs

@@ -3533,3 +3533,76 @@ export const morph = (frompat, topat, bypat) => {
   bypat = reify(bypat);
   return frompat.innerBind((from) => topat.innerBind((to) => bypat.innerBind((by) => _morph(from, to, by))));
 };
+
+/**
+ * Soft-clipping distortion
+ *
+ * @name soft
+ * @param {number | Pattern} distortion amount of distortion to apply
+ * @param {number | Pattern} volume linear postgain of the distortion
+ *
+ */
+/**
+ * Hard-clipping distortion
+ *
+ * @name hard
+ * @param {number | Pattern} distortion amount of distortion to apply
+ * @param {number | Pattern} volume linear postgain of the distortion
+ *
+ */
+/**
+ * Cubic polynomial distortion
+ *
+ * @name cubic
+ * @param {number | Pattern} distortion amount of distortion to apply
+ * @param {number | Pattern} volume linear postgain of the distortion
+ *
+ */
+/**
+ * Diode-emulating distortion
+ *
+ * @name diode
+ * @param {number | Pattern} distortion amount of distortion to apply
+ * @param {number | Pattern} volume linear postgain of the distortion
+ *
+ */
+/**
+ * Asymmetrical diode distortion
+ *
+ * @name asym
+ * @param {number | Pattern} distortion amount of distortion to apply
+ * @param {number | Pattern} volume linear postgain of the distortion
+ *
+ */
+/**
+ * Wavefolding distortion
+ *
+ * @name fold
+ * @param {number | Pattern} distortion amount of distortion to apply
+ * @param {number | Pattern} volume linear postgain of the distortion
+ *
+ */
+/**
+ * Wavefolding distortion composed with sinusoid
+ *
+ * @name sinefold
+ * @param {number | Pattern} distortion amount of distortion to apply
+ * @param {number | Pattern} volume linear postgain of the distortion
+ *
+ */
+/**
+ * Distortion via Chebyshev polynomials
+ *
+ * @name chebyshev
+ * @param {number | Pattern} distortion amount of distortion to apply
+ * @param {number | Pattern} volume linear postgain of the distortion
+ *
+ */
+const distAlgoNames = ['scurve', 'soft', 'hard', 'cubic', 'diode', 'asym', 'fold', 'sinefold', 'chebyshev'];
+for (const name of distAlgoNames) {
+  // Add aliases for distortion algorithms
+  Pattern.prototype[name] = function (args) {
+    const argsPat = reify(args).fmap((v) => (Array.isArray(v) ? [...v, name] : [v, 1, name]));
+    return this.distort(argsPat);
+  };
+}

packages/repl/prebake.mjs

@@ -20,10 +20,13 @@ export async function prebake() {
     // import('@strudel/osc'),
   );
   // load samples
-  const ds = 'https://raw.githubusercontent.com/felixroos/dough-samples/main/';
+  const ds = 'https://raw.githubusercontent.com/felixroos/dough-samples/main';
 
   // TODO: move this onto the strudel repo
-  const ts = 'https://raw.githubusercontent.com/todepond/samples/main/';
+  const ts = 'https://raw.githubusercontent.com/todepond/samples/main';
+
+  const tc = 'https://raw.githubusercontent.com/tidalcycles/uzu-drumkit/main';
+
   await Promise.all([
     modulesLoading,
     registerSynthSounds(),
@@ -36,9 +39,9 @@ export async function prebake() {
     samples(`${ds}/tidal-drum-machines.json`),
     samples(`${ds}/piano.json`),
     samples(`${ds}/Dirt-Samples.json`),
-    samples(`${ds}/uzu-drumkit.json`),
     samples(`${ds}/vcsl.json`),
     samples(`${ds}/mridangam.json`),
+    samples(`${tc}/strudel.json`),
   ]);
 
   aliasBank(`${ts}/tidal-drum-machines-alias.json`);

packages/superdough/audioContext.mjs

@@ -0,0 +1,18 @@
+let audioContext;
+
+export const setDefaultAudioContext = () => {
+  audioContext = new AudioContext();
+  return audioContext;
+};
+
+export const getAudioContext = () => {
+  if (!audioContext) {
+    return setDefaultAudioContext();
+  }
+
+  return audioContext;
+};
+
+export function getAudioContextCurrentTime() {
+  return getAudioContext().currentTime;
+}

packages/superdough/dspworklet.mjs

@@ -1,4 +1,4 @@
-import { getAudioContext } from './superdough.mjs';
+import { getAudioContext } from './audioContext.mjs';
 
 let worklet;
 export async function dspWorklet(ac, code) {

packages/superdough/helpers.mjs

@@ -1,6 +1,7 @@
-import { getAudioContext } from './superdough.mjs';
+import { getAudioContext } from './audioContext.mjs';
 import { clamp, nanFallback, midiToFreq, noteToMidi } from './util.mjs';
 import { getNoiseBuffer } from './noise.mjs';
+import { logger } from './logger.mjs';
 
 export const noises = ['pink', 'white', 'brown', 'crackle'];
 
@@ -381,6 +382,102 @@ export function applyFM(param, value, begin) {
   return { stop };
 }
 
+// Saturation curves
+
+const __squash = (x) => x / (1 + x); // [0, inf) to [0, 1)
+const _mod = (n, m) => ((n % m) + m) % m;
+
+const _scurve = (x, k) => ((1 + k) * x) / (1 + k * Math.abs(x));
+const _soft = (x, k) => Math.tanh(x * (1 + k));
+const _hard = (x, k) => clamp((1 + k) * x, -1, 1);
+
+const _fold = (x, k) => {
+  // Closed form folding for audio rate
+  let y = (1 + 0.5 * k) * x;
+  const window = _mod(y + 1, 4);
+  return 1 - Math.abs(window - 2);
+};
+
+const _sineFold = (x, k) => Math.sin((Math.PI / 2) * _fold(x, k));
+
+const _cubic = (x, k) => {
+  const t = __squash(Math.log1p(k));
+  const cubic = (x - (t / 3) * x * x * x) / (1 - t / 3); // normalized to go from (-1, 1)
+  return _soft(cubic, k);
+};
+
+const _diode = (x, k, asym = false) => {
+  const g = 1 + 2 * k; // gain
+  const t = __squash(Math.log1p(k));
+  const bias = 0.07 * t;
+  const pos = _soft(x + bias, 2 * k);
+  const neg = _soft(asym ? bias : -x + bias, 2 * k);
+  const y = pos - neg;
+  // We divide by the derivative at 0 so that the distortion is roughly
+  // the identity map near 0 => small values are preserved and undistorted
+  const sech = 1 / Math.cosh(g * bias);
+  const sech2 = sech * sech; // derivative of soft (i.e. tanh) is sech^2
+  const denom = Math.max(1e-8, (asym ? 1 : 2) * g * sech2); // g from chain rule; 2 if both pos/neg have x
+  return _soft(y / denom, k);
+};
+
+const _asym = (x, k) => _diode(x, k, true);
+
+const _chebyshev = (x, k) => {
+  const kl = 10 * Math.log1p(k);
+  let tnm1 = 1;
+  let tnm2 = x;
+  let tn;
+  let y = 0;
+  for (let i = 1; i < 64; i++) {
+    if (i < 2) {
+      // Already set inital conditions
+      y += i == 0 ? tnm1 : tnm2;
+      continue;
+    }
+    tn = 2 * x * tnm1 - tnm2; // https://en.wikipedia.org/wiki/Chebyshev_polynomials#Recurrence_definition
+    tnm2 = tnm1;
+    tnm1 = tn;
+    if (i % 2 === 0) {
+      y += Math.min((1.3 * kl) / i, 2) * tn;
+    }
+  }
+  // Soft clip
+  return _soft(y, kl / 20);
+};
+
+export const distortionAlgorithms = {
+  scurve: _scurve,
+  soft: _soft,
+  hard: _hard,
+  cubic: _cubic,
+  diode: _diode,
+  asym: _asym,
+  fold: _fold,
+  sinefold: _sineFold,
+  chebyshev: _chebyshev,
+};
+const _algoNames = Object.freeze(Object.keys(distortionAlgorithms));
+
+export const getDistortionAlgorithm = (algo) => {
+  let index = algo;
+  if (typeof algo === 'string') {
+    index = _algoNames.indexOf(algo);
+    if (index === -1) {
+      logger(`[superdough] Could not find waveshaping algorithm ${algo}.
+        Available options are ${_algoNames.join(', ')}.
+        Defaulting to ${_algoNames[0]}.`);
+      index = 0;
+    }
+  }
+  const name = _algoNames[index % _algoNames.length]; // allow for wrapping if algo was a number
+  return distortionAlgorithms[name];
+};
+
+export const getDistortion = (distort, postgain, algorithm) => {
+  return getWorklet(getAudioContext(), 'distort-processor', { distort, postgain }, { processorOptions: { algorithm } });
+};
+
 export const getFrequencyFromValue = (value, defaultNote = 36) => {
   let { note, freq } = value;
   note = note || defaultNote;

packages/superdough/index.mjs

@@ -11,4 +11,5 @@ export * from './synth.mjs';
 export * from './zzfx.mjs';
 export * from './logger.mjs';
 export * from './dspworklet.mjs';
+export * from './audioContext.mjs';
 export * from './wavetable.mjs';

packages/superdough/noise.mjs

@@ -1,5 +1,5 @@
 import { drywet } from './helpers.mjs';
-import { getAudioContext } from './superdough.mjs';
+import { getAudioContext } from './audioContext.mjs';
 
 let noiseCache = {};
 

packages/superdough/sampler.mjs

@@ -1,5 +1,6 @@
-import { noteToMidi, valueToMidi, getSoundIndex, getCommonSampleInfo } from './util.mjs';
+import { getCommonSampleInfo } from './util.mjs';
-import { getAudioContext, registerSound, registerWaveTable } from './index.mjs';
+import { registerSound, registerWaveTable } from './index.mjs';
+import { getAudioContext } from './audioContext.mjs';
 import { getADSRValues, getParamADSR, getPitchEnvelope, getVibratoOscillator } from './helpers.mjs';
 import { logger } from './logger.mjs';
 

packages/superdough/superdough.mjs

@@ -9,10 +9,11 @@ import './reverb.mjs';
 import './vowel.mjs';
 import { nanFallback, _mod, cycleToSeconds } from './util.mjs';
 import workletsUrl from './worklets.mjs?audioworklet';
-import { createFilter, gainNode, getCompressor, getLfo, getWorklet, effectSend } from './helpers.mjs';
+import { createFilter, gainNode, getCompressor, getDistortion, getLfo, getWorklet, effectSend } from './helpers.mjs';
 import { map } from 'nanostores';
 import { logger } from './logger.mjs';
 import { loadBuffer } from './sampler.mjs';
+import { getAudioContext } from './audioContext.mjs';
 import { SuperdoughAudioController } from './superdoughoutput.mjs';
 
 export const DEFAULT_MAX_POLYPHONY = 128;
@@ -154,6 +155,7 @@ let defaultDefaultValues = {
   phaserdepth: 0.75,
   shapevol: 1,
   distortvol: 1,
+  distorttype: 0,
   delay: 0,
   byteBeatExpression: '0',
   delayfeedback: 0.5,
@@ -200,25 +202,6 @@ export function setVersionDefaults(version) {
 
 export const resetLoadedSounds = () => soundMap.set({});
 
-let audioContext;
-
-export const setDefaultAudioContext = () => {
-  audioContext = new AudioContext({ latencyHint: 'playback' });
-  return audioContext;
-};
-
-export const getAudioContext = () => {
-  if (!audioContext) {
-    return setDefaultAudioContext();
-  }
-
-  return audioContext;
-};
-
-export function getAudioContextCurrentTime() {
-  return getAudioContext().currentTime;
-}
-
 let externalWorklets = [];
 export function registerWorklet(url) {
   externalWorklets.push(url);
@@ -473,6 +456,7 @@ export const superdough = async (value, t, hapDuration, cps = 0.5, cycle = 0.5)
     shapevol = getDefaultValue('shapevol'),
     distort,
     distortvol = getDefaultValue('distortvol'),
+    distorttype = getDefaultValue('distorttype'),
     pan,
     vowel,
     delay = getDefaultValue('delay'),
@@ -646,8 +630,7 @@ export const superdough = async (value, t, hapDuration, cps = 0.5, cycle = 0.5)
   // effects
   coarse !== undefined && chain.push(getWorklet(ac, 'coarse-processor', { coarse }));
   crush !== undefined && chain.push(getWorklet(ac, 'crush-processor', { crush }));
-  shape !== undefined && chain.push(getWorklet(ac, 'shape-processor', { shape, postgain: shapevol }));
+  distort !== undefined && chain.push(getDistortion(distort, distortvol, distorttype));
-  distort !== undefined && chain.push(getWorklet(ac, 'distort-processor', { distort, postgain: distortvol }));
 
   if (tremolosync != null) {
     tremolo = cps * tremolosync;

packages/superdough/synth.mjs

@@ -1,5 +1,6 @@
 import { clamp } from './util.mjs';
-import { registerSound, getAudioContext, soundMap } from './superdough.mjs';
+import { registerSound, soundMap } from './superdough.mjs';
+import { getAudioContext } from './audioContext.mjs';
 import {
   applyFM,
   destroyAudioWorkletNode,

packages/superdough/wavetable.mjs

@@ -1,6 +1,7 @@
 import { getAudioContext, registerSound } from './index.mjs';
 import { getCommonSampleInfo } from './util.mjs';
 import {
+  applyFM,
   applyParameterModulators,
   destroyAudioWorkletNode,
   getADSRValues,
@@ -308,6 +309,7 @@ export async function onTriggerSynth(t, value, onended, tables, cps, frameLen) {
     },
   );
   const vibratoOscillator = getVibratoOscillator(source.parameters.get('detune'), value, t);
+  const fm = applyFM(source.parameters.get('frequency'), value, t);
   const envGain = ac.createGain();
   const node = source.connect(envGain);
   getParamADSR(node.gain, attack, decay, sustain, release, 0, 0.3, t, holdEnd, 'linear');
@@ -318,6 +320,7 @@ export async function onTriggerSynth(t, value, onended, tables, cps, frameLen) {
     () => {
       destroyAudioWorkletNode(source);
       vibratoOscillator?.stop();
+      fm?.stop();
       node.disconnect();
       wtPosModulators?.disconnect();
       wtWarpModulators?.disconnect();

packages/superdough/worklets.mjs

@@ -4,6 +4,7 @@
 
 import OLAProcessor from './ola-processor';
 import FFT from './fft.js';
+import { getDistortionAlgorithm } from './helpers.mjs';
 
 const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 const mod = (n, m) => ((n % m) + m) % m;
@@ -430,9 +431,10 @@ class DistortProcessor extends AudioWorkletProcessor {
     ];
   }
 
-  constructor() {
+  constructor({ processorOptions }) {
     super();
     this.started = false;
+    this.algorithm = getDistortionAlgorithm(processorOptions.algorithm);
   }
 
   process(inputs, outputs, parameters) {
@@ -444,13 +446,12 @@ class DistortProcessor extends AudioWorkletProcessor {
       return false;
     }
     this.started = hasInput;
-
-    const shape = Math.expm1(parameters.distort[0]);
-    const postgain = Math.max(0.001, Math.min(1, parameters.postgain[0]));
-
     for (let n = 0; n < blockSize; n++) {
-      for (let i = 0; i < input.length; i++) {
+      const postgain = clamp(pv(parameters.postgain, n), 0.001, 1);
-        output[i][n] = (((1 + shape) * input[i][n]) / (1 + shape * Math.abs(input[i][n]))) * postgain;
+      const shape = Math.expm1(pv(parameters.distort, n));
+      for (let ch = 0; ch < input.length; ch++) {
+        const x = input[ch][n];
+        output[ch][n] = postgain * this.algorithm(x, shape);
       }
     }
     return true;

packages/superdough/zzfx.mjs

@@ -1,6 +1,7 @@
 //import { ZZFX } from 'zzfx';
 import { midiToFreq, noteToMidi } from './util.mjs';
-import { registerSound, getAudioContext } from './superdough.mjs';
+import { registerSound } from './superdough.mjs';
+import { getAudioContext } from './audioContext.mjs';
 import { buildSamples } from './zzfx_fork.mjs';
 
 export const getZZFX = (value, t) => {

packages/superdough/zzfx_fork.mjs

@@ -1,4 +1,4 @@
-import { getAudioContext } from './superdough.mjs';
+import { getAudioContext } from './audioContext.mjs';
 
 // https://github.com/KilledByAPixel/ZzFX/blob/master/ZzFX.js#L85C5-L180C6
 // changes: replaced this.volume with 1 + using sampleRate from getAudioContext()

test/__snapshots__/examples.test.mjs.snap

@@ -2829,6 +2829,82 @@ exports[`runs examples > example "distort" example index 1 1`] = `
 ]
 `;
 
+exports[`runs examples > example "distort" example index 2 1`] = `
+[
+  "[ 0/1 → 1/4 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 1/4 → 1/2 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 1/2 → 3/4 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 3/4 → 1/1 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 1/1 → 5/4 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 5/4 → 3/2 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 3/2 → 7/4 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 7/4 → 2/1 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 2/1 → 9/4 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 9/4 → 5/2 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 5/2 → 11/4 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 11/4 → 3/1 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 3/1 → 13/4 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 13/4 → 7/2 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 7/2 → 15/4 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+  "[ 15/4 → 4/1 | s:bd n:4 bank:tr808 distort:3 distortvol:0.5 distorttype:diode ]",
+]
+`;
+
+exports[`runs examples > example "distorttype" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | s:bd bank:tr909 distort:2 distorttype:0 ]",
+  "[ 1/4 → 1/2 | s:bd bank:tr909 distort:2 distorttype:0 ]",
+  "[ 1/2 → 3/4 | s:bd bank:tr909 distort:2 distorttype:0 ]",
+  "[ 3/4 → 1/1 | s:bd bank:tr909 distort:2 distorttype:0 ]",
+  "[ 1/1 → 5/4 | s:bd bank:tr909 distort:2 distorttype:1 ]",
+  "[ 5/4 → 3/2 | s:bd bank:tr909 distort:2 distorttype:1 ]",
+  "[ 3/2 → 7/4 | s:bd bank:tr909 distort:2 distorttype:1 ]",
+  "[ 7/4 → 2/1 | s:bd bank:tr909 distort:2 distorttype:1 ]",
+  "[ 2/1 → 9/4 | s:bd bank:tr909 distort:2 distorttype:2 ]",
+  "[ 9/4 → 5/2 | s:bd bank:tr909 distort:2 distorttype:2 ]",
+  "[ 5/2 → 11/4 | s:bd bank:tr909 distort:2 distorttype:2 ]",
+  "[ 11/4 → 3/1 | s:bd bank:tr909 distort:2 distorttype:2 ]",
+  "[ 3/1 → 13/4 | s:bd bank:tr909 distort:2 distorttype:0 ]",
+  "[ 13/4 → 7/2 | s:bd bank:tr909 distort:2 distorttype:0 ]",
+  "[ 7/2 → 15/4 | s:bd bank:tr909 distort:2 distorttype:0 ]",
+  "[ 15/4 → 4/1 | s:bd bank:tr909 distort:2 distorttype:0 ]",
+]
+`;
+
+exports[`runs examples > example "distorttype" example index 1 1`] = `
+[
+  "[ (0/1 → 1/2) ⇝ 1/1 | s:sine note:F1 release:1 penv:24 pdecay:0.05 distort:1 distorttype:fold ]",
+  "[ 0/1 ⇜ (1/2 → 1/1) | s:sine note:F1 release:1 penv:24 pdecay:0.05 distort:1 distorttype:fold ]",
+  "[ (1/1 → 3/2) ⇝ 2/1 | s:sine note:F1 release:1 penv:24 pdecay:0.05 distort:4.6367951557040215 distorttype:chebyshev ]",
+  "[ 1/1 ⇜ (3/2 → 2/1) | s:sine note:F1 release:1 penv:24 pdecay:0.05 distort:4.6367951557040215 distorttype:chebyshev ]",
+  "[ (2/1 → 5/2) ⇝ 3/1 | s:sine note:F1 release:1 penv:24 pdecay:0.05 distort:7.716689839959145 distorttype:scurve ]",
+  "[ 2/1 ⇜ (5/2 → 3/1) | s:sine note:F1 release:1 penv:24 pdecay:0.05 distort:7.716689839959145 distorttype:scurve ]",
+  "[ (3/1 → 7/2) ⇝ 4/1 | s:sine note:F1 release:1 penv:24 pdecay:0.05 distort:2.5210237745195627 distorttype:diode ]",
+  "[ 3/1 ⇜ (7/2 → 4/1) | s:sine note:F1 release:1 penv:24 pdecay:0.05 distort:2.5210237745195627 distorttype:diode ]",
+]
+`;
+
+exports[`runs examples > example "distortvol" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 1/4 → 1/2 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 1/2 → 3/4 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 3/4 → 1/1 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 1/1 → 5/4 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 5/4 → 3/2 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 3/2 → 7/4 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 7/4 → 2/1 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 2/1 → 9/4 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 9/4 → 5/2 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 5/2 → 11/4 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 11/4 → 3/1 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 3/1 → 13/4 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 13/4 → 7/2 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 7/2 → 15/4 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+  "[ 15/4 → 4/1 | s:bd bank:tr909 distort:2 distortvol:0.8 ]",
+]
+`;
+
 exports[`runs examples > example "djf" example index 0 1`] = `
 [
   "[ 0/1 → 1/8 | note:D3 s:supersaw djf:0.5 ]",

website/public/encoder_disc.svg

@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 51448)  -->
+
+<svg
+   version="1.0"
+   id="Layer_1"
+   width="284.46"
+   height="284.46"
+   viewBox="0 0 284.46 284.46"
+   overflow="visible"
+   enable-background="new 0 0 284.46 284.46"
+   xml:space="preserve"
+   sodipodi:version="0.32"
+   inkscape:version="1.4 (1:1.4+202410161351+e7c3feb100)"
+   sodipodi:docname="encoder_disc.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+   id="metadata2068"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs2066">
+	
+
+		
+	
+			
+			
+		
+				
+				
+				
+				
+				
+				
+				
+				
+				
+				
+				
+				
+			
+				
+				
+				
+				
+				
+				
+				
+				
+				
+				
+				
+				
+			</defs><sodipodi:namedview
+   inkscape:window-height="1131"
+   inkscape:window-width="1920"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   borderopacity="1.0"
+   bordercolor="#666666"
+   pagecolor="#ffffff"
+   id="base"
+   inkscape:zoom="1.0549412"
+   inkscape:cx="195.27154"
+   inkscape:cy="-101.90141"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:current-layer="Layer_1"
+   inkscape:showpageshadow="2"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   inkscape:window-maximized="1" />
+<path
+   id="path1"
+   style="fill:#f9f9f9;stroke:none;stroke-width:1.23072"
+   d="M 142.22902,0.61574073 A 141.61462,141.61462 0 0 0 0.61574173,142.22901 141.61462,141.61462 0 0 0 142.22902,283.84425 141.61462,141.61462 0 0 0 283.84425,142.22901 141.61462,141.61462 0 0 0 142.22902,0.61574073 Z m 0,106.22069927 a 35.393924,35.393924 0 0 1 35.39453,35.39257 35.393924,35.393924 0 0 1 -35.39453,35.39455 35.393924,35.393924 0 0 1 -35.39258,-35.39455 35.393924,35.393924 0 0 1 35.39258,-35.39257 z" /><g
+   id="g2"><path
+     d="M 242.47,41.99 242.441,42.02 217.4,67.06 C 198.17,47.83 171.589,35.93 142.23,35.93 V 0.5 c 39.17,0 74.6,15.85 100.24,41.49 z"
+     id="path2015" /><path
+     d="m 142.23,0.5 v 35.43 c -29.37,0 -55.93,11.89 -75.17,31.13 L 42.02,42.02 41.99,41.99 C 67.63,16.35 103.06,0.5 142.23,0.5 Z"
+     id="path2017" /><path
+     d="m 142.23,35.93 v 35.43 c -19.59,0 -37.3,7.92 -50.12,20.75 L 67.06,67.06 C 86.3,47.82 112.86,35.93 142.23,35.93 Z"
+     id="path2019" /><path
+     d="M 67.06,67.06 92.11,92.11 C 79.28,104.93 71.36,122.64 71.36,142.23 H 35.93 c 0,-29.36 11.89,-55.94 31.13,-75.17 z"
+     id="path2021" /><path
+     d="M 92.11,192.35 67.06,217.4 C 47.82,198.171 35.93,171.59 35.93,142.23 h 35.43 c 0,19.589 7.92,37.3 20.75,50.12 z"
+     id="path2023" /><path
+     d="m 142.23,213.09 v 35.44 c -29.37,0 -55.93,-11.891 -75.17,-31.131 l 25.05,-25.05 c 12.82,12.821 30.53,20.741 50.12,20.741 z"
+     id="path2025" /><path
+     d="m 142.23,248.53 v 35.43 c -39.17,0 -74.6,-15.851 -100.24,-41.49 l 0.03,-0.03 25.04,-25.04 c 19.24,19.24 45.8,31.13 75.17,31.13 z"
+     id="path2027" /><path
+     d="m 142.23,283.96 v -35.43 c 29.36,0 55.94,-11.9 75.17,-31.131 l 25.04,25.04 0.029,0.03 C 216.83,268.109 181.4,283.96 142.23,283.96 Z"
+     id="path2029" /><path
+     d="m 177.66,142.229 h 35.43 c 0,19.59 -7.92,37.301 -20.74,50.12 L 167.3,167.3 c 6.4,-6.401 10.36,-15.25 10.36,-25.071 z"
+     id="path2031" /><path
+     d="m 167.3,167.3 25.05,25.05 c -12.819,12.82 -30.529,20.74 -50.12,20.74 v -35.43 c 9.8,0 18.66,-3.95 25.07,-10.36 z"
+     id="path2033" /><path
+     d="m 142.23,177.66 v 35.43 c -19.59,0 -37.3,-7.92 -50.12,-20.74 l 25.05,-25.04 c 6.42,6.41 15.28,10.35 25.07,10.35 z"
+     id="path2035" /><path
+     d="m 117.16,167.3 v 0.01 L 92.11,192.35 C 79.28,179.531 71.36,161.82 71.36,142.23 h 35.43 c 0,9.82 3.96,18.669 10.37,25.07 z"
+     id="path2037" /><path
+     fill="none"
+     stroke="#000000"
+     d="m 142.23,283.96 c -39.17,0 -74.6,-15.851 -100.24,-41.49 C 16.35,216.83 0.5,181.399 0.5,142.229 0.5,103.059 16.35,67.629 41.99,41.989 67.63,16.35 103.06,0.5 142.23,0.5 c 39.17,0 74.6,15.85 100.24,41.49 25.641,25.64 41.49,61.07 41.49,100.24 0,39.17 -15.85,74.601 -41.49,100.24 -25.64,25.639 -61.07,41.49 -100.24,41.49 z"
+     id="path2041" /><path
+     fill="none"
+     stroke="#000000"
+     d="m 248.53,142.229 c 0,-29.35 -11.891,-55.93 -31.13,-75.17 -19.23,-19.23 -45.811,-31.13 -75.17,-31.13 -29.37,0 -55.93,11.89 -75.17,31.13 -19.24,19.23 -31.13,45.81 -31.13,75.17 0,29.36 11.89,55.94 31.13,75.17 19.24,19.24 45.8,31.131 75.17,31.131 29.36,0 55.94,-11.9 75.17,-31.131 19.24,-19.239 31.13,-45.819 31.13,-75.17 z"
+     id="path2043" /><path
+     fill="none"
+     stroke="#000000"
+     d="m 142.23,213.09 c -19.59,0 -37.3,-7.92 -50.12,-20.74 -12.83,-12.819 -20.75,-30.53 -20.75,-50.12 0,-19.59 7.92,-37.3 20.75,-50.12 12.82,-12.83 30.53,-20.75 50.12,-20.75 19.59,0 37.3,7.92 50.12,20.75 12.82,12.82 20.74,30.53 20.74,50.12 0,19.59 -7.92,37.301 -20.74,50.12 -12.82,12.82 -30.53,20.74 -50.12,20.74 z"
+     id="path2045" /><path
+     fill="none"
+     stroke="#000000"
+     d="m 117.16,167.31 c 6.42,6.41 15.28,10.351 25.07,10.351 9.8,0 18.66,-3.95 25.07,-10.36 6.4,-6.4 10.36,-15.25 10.36,-25.07 0,-9.819 -3.95,-18.67 -10.36,-25.07 -6.399,-6.41 -15.27,-10.36 -25.07,-10.36 -9.8,0 -18.66,3.95 -25.08,10.35 -6.4,6.4 -10.36,15.26 -10.36,25.08 0,9.82 3.96,18.67 10.37,25.07"
+     id="path2047" /><path
+     id="polyline2049"
+     style="fill:none;stroke:#000000"
+     d="m 142.23,177.66 v 35.43 35.44 35.43"
+     sodipodi:nodetypes="cccc" /><path
+     id="polyline2051"
+     style="fill:none;stroke:#000000"
+     d="m 167.3,167.3 25.05,25.05 25.05,25.049 25.04,25.04"
+     sodipodi:nodetypes="cccc" /><path
+     id="polyline2053"
+     style="fill:none;stroke:#000000"
+     d="m 177.66,142.229 h 35.43 35.44 35.43"
+     sodipodi:nodetypes="cccc" /><path
+     id="polyline2055"
+     style="fill:none;stroke:#000000"
+     d="M 167.3,117.16 192.35,92.11 217.4,67.06 242.44,42.02"
+     sodipodi:nodetypes="cccc" /><path
+     id="polyline2057"
+     style="fill:none;stroke:#000000"
+     d="M 142.23,106.8 V 71.36 35.93 0.5"
+     sodipodi:nodetypes="cccc" /><path
+     id="polyline2059"
+     style="fill:none;stroke:#000000"
+     d="M 117.15,117.15 92.11,92.11 67.06,67.06 42.02,42.02"
+     sodipodi:nodetypes="cccc" /><path
+     id="polyline2061"
+     style="fill:none;stroke:#000000"
+     d="M 106.79,142.229 H 71.36 35.93 0.5"
+     sodipodi:nodetypes="cccc" /><path
+     id="polyline2063"
+     style="fill:none;stroke:#000000"
+     d="m 117.16,167.3 v 0.01 l -25.05,25.04 -25.05,25.049 -25.04,25.04"
+     sodipodi:nodetypes="ccccc" /></g>
+</svg>

website/src/components/Tap.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+export default function Tap({ initialCps = 0.4, maxSamples = 3 }) {
+  const [timestamps, setTimestamps] = useState([]);
+  const [cps, setCps] = useState(initialCps);
+
+  function addTap(ts = Date.now()) {
+    setTimestamps((prev) => {
+      const next = [...prev, ts].slice(-(maxSamples + 1));
+      calcCps(next);
+      return next;
+    });
+  }
+
+  function calcCps(times) {
+    if (!times || times.length < 2) return;
+    const intervals = [];
+    for (let i = 1; i < times.length; i++) {
+      intervals.push(times[i] - times[i - 1]);
+    }
+
+    const avgMs = intervals.reduce((a, b) => a + b, 0) / intervals.length;
+    const newCps = 1000 / avgMs;
+    if (Number.isFinite(newCps) && newCps > 0 && newCps < 1000) {
+      setCps(newCps);
+    }
+  }
+
+  function handleTap(e) {
+    e && e.preventDefault();
+    addTap();
+  }
+
+  function handleReset(e) {
+    e && e.preventDefault();
+    reset();
+  }
+
+  useEffect(() => {
+    function onKey(e) {
+      if (e.code === 'Space') {
+        e.preventDefault();
+        addTap();
+      } else if (e.code === 'Backspace') {
+        e.preventDefault();
+        reset();
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  function reset() {
+    setTimestamps([]);
+    // setCps(initialCps);
+  }
+
+  return (
+    <div>
+      <div class="flex flex-col items-center p-7 font-medium text-white">
+        <div>{cps.toFixed(2)} cps</div>
+        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={handleTap}>
+          Tap
+        </button>
+      </div>
+    </div>
+  );
+}

website/src/components/Vinyl.jsx

@@ -0,0 +1,59 @@
+/*
+Vinyl.jsx - <short description TODO>
+Copyright (C) 2025 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/App.js>
+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 React, { useState, useEffect } from 'react';
+import { setInterval, clearInterval } from 'worker-timers';
+import { NeoCyclist } from '@strudel/core/neocyclist.mjs';
+import { getAudioContext } from '@strudel/webaudio';
+import { saw } from '@strudel/core';
+import encoder from '../../public/encoder_disc.svg';
+
+console.log(encoder);
+
+const schedulerOptions = {
+  onTrigger: (x) => {},
+  getTime: () => getAudioContext().currentTime,
+  onToggle: (started) => console.log('started: ', started),
+  setInterval,
+  clearInterval,
+  // beforeStart,
+};
+const cyclist = new NeoCyclist(schedulerOptions);
+
+export function Vinyl() {
+  const [isActive, setIsActive] = useState(false);
+  const [cyclepos, setCyclepos] = useState(0);
+  const activate = () => setIsActive(!isActive);
+
+  if (isActive) {
+    if (!cyclist.started) {
+      cyclist.start();
+      // cyclist.setPattern(saw.segment(8));
+    }
+  } else {
+    cyclist.stop();
+  }
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCyclepos(cyclist.cycle);
+    }, 10);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const deg = (cyclepos % 1) * 360;
+
+  const style = {
+    fontSize: '20em',
+    transform: 'rotate(' + deg + 'deg)',
+  };
+  return (
+    <div onClick={activate} style={style}>
+      <center>
+        <img src={encoder.src} />
+      </center>
+    </div>
+  );
+}

website/src/pages/cycler.astro

@@ -0,0 +1,17 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import { Vinyl } from '../components/Vinyl.jsx';
+import Tap from '../components/Tap.jsx';
+---
+
+<html lang="en" class="m-0 dark">
+  <head>
+    <HeadCommon />
+    <title>Strudel Cycler</title>
+  </head>
+  <body class="h-app-height bg-background m-0">
+    <div>Hello there.</div>
+    <Vinyl client:only="react" />
+    <Tap client:only="react" />
+  </body>
+</html>