Merge remote-tracking branch 'origin/main' into claviature

packages/codemirror/codemirror.mjs

@@ -12,7 +12,8 @@ import {
   lineNumbers,
   drawSelection,
 } from '@codemirror/view';
-import { Pattern, Drawer, repl, cleanupDraw } from '@strudel/core';
+import { Pattern, repl } from '@strudel/core';
+import { Drawer, cleanupDraw } from '@strudel/draw';
 import { isAutoCompletionEnabled } from './autocomplete.mjs';
 import { isTooltipEnabled } from './tooltip.mjs';
 import { flash, isFlashEnabled } from './flash.mjs';

packages/codemirror/package.json

@@ -45,6 +45,7 @@
     "@replit/codemirror-vim": "^6.1.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@strudel/core": "workspace:*",
+    "@strudel/draw": "workspace:*",
     "@uiw/codemirror-themes": "^4.21.21",
     "@uiw/codemirror-themes-all": "^4.21.21",
     "nanostores": "^0.9.5"

packages/core/controls.mjs

@@ -15,7 +15,7 @@ export function createParam(names) {
     let bag;
     // check if we have an object with an unnamed control (.value)
     if (typeof xs === 'object' && xs.value !== undefined) {
-      bag = xs; // grab props that are already there
+      bag = { ...xs }; // grab props that are already there
       xs = xs.value; // grab the unnamed control for this one
       delete bag.value;
     }
@@ -28,7 +28,8 @@ export function createParam(names) {
       });
       return result;
     } else if (bag) {
-      return { ...bag, [name]: xs };
+      bag[name] = xs;
+      return bag;
     } else {
       return { [name]: xs };
     }
@@ -125,6 +126,16 @@ export const { note } = registerControl(['note', 'n']);
  *
  */
 export const { accelerate } = registerControl('accelerate');
+/**
+ *
+ * Sets the velocity from 0 to 1. Is multiplied together with gain.
+ * @name velocity
+ * @example
+ * s("hh*8")
+ * .gain(".4!2 1 .4!2 1 .4 1")
+ * .velocity(".4 1")
+ */
+export const { velocity } = registerControl('velocity');
 /**
  * Controls the gain by an exponential amount.
  *
@@ -1163,11 +1174,9 @@ export const { rate } = registerControl('rate');
 export const { slide } = registerControl('slide');
 // TODO: detune? https://tidalcycles.org/docs/patternlib/tutorials/synthesizers/#supersquare
 export const { semitone } = registerControl('semitone');
-// TODO: dedup with synth param, see https://tidalcycles.org/docs/reference/synthesizers/#superpiano
-// ['velocity'],
+
 // TODO: synth param
 export const { voice } = registerControl('voice');
-
 // voicings // https://github.com/tidalcycles/strudel/issues/506
 // chord to voice, like C Eb Fm7 G7. the symbols can be defined via addVoicings
 export const { chord } = registerControl('chord');

packages/core/evaluate.mjs

@@ -22,6 +22,7 @@ export const evalScope = async (...args) => {
       globalThis[name] = value;
     });
   });
+  return modules;
 };
 
 function safeEval(str, options = {}) {

packages/core/index.mjs

@@ -22,10 +22,6 @@ export * from './repl.mjs';
 export * from './cyclist.mjs';
 export * from './logger.mjs';
 export * from './time.mjs';
-export * from './draw.mjs';
-export * from './animate.mjs';
-export * from './pianoroll.mjs';
-export * from './spiral.mjs';
 export * from './ui.mjs';
 export { default as drawLine } from './drawLine.mjs';
 // below won't work with runtime.mjs (json import fails)

packages/core/pattern.mjs

@@ -2063,7 +2063,7 @@ export const { echoWith, echowith, stutWith, stutwith } = register(
  * s("bd sd").echo(3, 1/6, .8)
  */
 export const echo = register('echo', function (times, time, feedback, pat) {
-  return pat._echoWith(times, time, (pat, i) => pat.velocity(Math.pow(feedback, i)));
+  return pat._echoWith(times, time, (pat, i) => pat.gain(Math.pow(feedback, i)));
 });
 
 /**
@@ -2076,7 +2076,7 @@ export const echo = register('echo', function (times, time, feedback, pat) {
  * s("bd sd").stut(3, .8, 1/6)
  */
 export const stut = register('stut', function (times, feedback, time, pat) {
-  return pat._echoWith(times, time, (pat, i) => pat.velocity(Math.pow(feedback, i)));
+  return pat._echoWith(times, time, (pat, i) => pat.gain(Math.pow(feedback, i)));
 });
 
 /**
@@ -2221,19 +2221,6 @@ export const { color, colour } = register(['color', 'colour'], function (color,
   return pat.withContext((context) => ({ ...context, color }));
 });
 
-/**
- *
- * Sets the velocity from 0 to 1. Is multiplied together with gain.
- * @name velocity
- * @example
- * s("hh*8")
- * .gain(".4!2 1 .4!2 1 .4 1")
- * .velocity(".4 1")
- */
-export const velocity = register('velocity', function (velocity, pat) {
-  return pat.withContext((context) => ({ ...context, velocity: (context.velocity || 1) * velocity }));
-});
-
 //////////////////////////////////////////////////////////////////////
 // Control-related functions, i.e. ones that manipulate patterns of
 // objects

packages/csound/index.mjs

@@ -152,12 +152,14 @@ export const csoundm = register('csoundm', (instrument, pat) => {
     const p2 = tidal_time - getAudioContext().currentTime;
     const p3 = hap.duration.valueOf() + 0;
     const frequency = getFrequency(hap);
+    let { gain = 1, velocity = 0.9 } = hap.value;
+    velocity = gain * velocity;
     // Translate frequency to MIDI key number _without_ rounding.
     const C4 = 261.62558;
     let octave = Math.log(frequency / C4) / Math.log(2.0) + 8.0;
     const p4 = octave * 12.0 - 36.0;
     // We prefer floating point precision, but over the MIDI range [0, 127].
-    const p5 = 127 * (hap.context?.velocity ?? 0.9);
+    const p5 = 127 * velocity;
     // The Strudel controls as a string.
     const p6 = Object.entries({ ...hap.value, frequency })
       .flat()

packages/desktopbridge/midibridge.mjs

@@ -7,9 +7,9 @@ const CC_MESSAGE = 0xb0;
 
 Pattern.prototype.midi = function (output) {
   return this.onTrigger((time, hap, currentTime, cps) => {
-    const { note, nrpnn, nrpv, ccn, ccv } = hap.value;
+    let { note, nrpnn, nrpv, ccn, ccv, velocity = 0.9, gain = 1 } = hap.value;
     const offset = (time - currentTime) * 1000;
-    const velocity = Math.floor((hap.context?.velocity ?? 0.9) * 100); // TODO: refactor velocity
+    velocity = Math.floor(gain * velocity * 100);
     const duration = Math.floor((hap.duration.valueOf() / cps) * 1000 - 10);
     const roundedOffset = Math.round(offset);
     const midichan = (hap.value.midichan ?? 1) - 1;

packages/draw/README.md

@@ -0,0 +1,9 @@
+# @strudel/canvas
+
+Helpers for drawing with the Canvas API and Strudel
+
+## Install
+
+```sh
+npm i @strudel/canvas --save
+```

packages/draw/animate.mjs

@@ -1,11 +1,14 @@
-import { Pattern, getDrawContext, silence, register, pure, createParams } from './index.mjs';
+import { Pattern, silence, register, pure, createParams } from '@strudel/core';
+import { getDrawContext } from './draw.mjs';
 
 let clearColor = '#22222210';
 
 Pattern.prototype.animate = function ({ callback, sync = false, smear = 0.5 } = {}) {
   window.frame && cancelAnimationFrame(window.frame);
   const ctx = getDrawContext();
-  const { clientWidth: ww, clientHeight: wh } = ctx.canvas;
+  let { clientWidth: ww, clientHeight: wh } = ctx.canvas;
+  ww *= window.devicePixelRatio;
+  wh *= window.devicePixelRatio;
   let smearPart = smear === 0 ? '99' : Number((1 - smear) * 100).toFixed(0);
   smearPart = smearPart.length === 1 ? `0${smearPart}` : smearPart;
   clearColor = `#200010${smearPart}`;

packages/draw/draw.mjs

@@ -1,31 +1,32 @@
 /*
 draw.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/draw.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/canvas/draw.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/>.
 */
 
-import { Pattern, getTime, State, TimeSpan } from './index.mjs';
+import { Pattern, getTime, State, TimeSpan } from '@strudel/core';
 
-export const getDrawContext = (id = 'test-canvas') => {
+export const getDrawContext = (id = 'test-canvas', options) => {
+  let { contextType = '2d', pixelated = false, pixelRatio = window.devicePixelRatio } = options || {};
   let canvas = document.querySelector('#' + id);
   if (!canvas) {
-    const scale = 2; // 2 = crisp on retina screens
     canvas = document.createElement('canvas');
     canvas.id = id;
-    canvas.width = window.innerWidth * scale;
-    canvas.height = window.innerHeight * scale;
+    canvas.width = window.innerWidth * pixelRatio;
+    canvas.height = window.innerHeight * pixelRatio;
     canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0';
+    pixelated && (canvas.style.imageRendering = 'pixelated');
     document.body.prepend(canvas);
     let timeout;
     window.addEventListener('resize', () => {
       timeout && clearTimeout(timeout);
       timeout = setTimeout(() => {
-        canvas.width = window.innerWidth * scale;
-        canvas.height = window.innerHeight * scale;
+        canvas.width = window.innerWidth * pixelRatio;
+        canvas.height = window.innerHeight * pixelRatio;
       }, 200);
     });
   }
-  return canvas.getContext('2d');
+  return canvas.getContext(contextType);
 };
 
 Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) {
@@ -61,6 +62,25 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) {
   return this;
 };
 
+// this is a more generic helper to get a rendering callback for the currently active haps
+// TODO: this misses events that are prolonged with clip or duration (would need state)
+Pattern.prototype.onFrame = function (fn, offset = 0) {
+  if (typeof window === 'undefined') {
+    return this;
+  }
+  if (window.strudelAnimation) {
+    cancelAnimationFrame(window.strudelAnimation);
+  }
+  const animate = () => {
+    const t = getTime() + offset;
+    const haps = this.queryArc(t, t);
+    fn(haps, t, this);
+    window.strudelAnimation = requestAnimationFrame(animate);
+  };
+  requestAnimationFrame(animate);
+  return this;
+};
+
 export const cleanupDraw = (clearScreen = true) => {
   const ctx = getDrawContext();
   clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width);

packages/draw/index.mjs

@@ -0,0 +1,5 @@
+export * from './animate.mjs';
+export * from './color.mjs';
+export * from './draw.mjs';
+export * from './pianoroll.mjs';
+export * from './spiral.mjs';

packages/draw/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@strudel/draw",
+  "version": "1.0.1",
+  "description": "Helpers for drawing with Strudel",
+  "main": "index.mjs",
+  "type": "module",
+  "publishConfig": {
+    "main": "dist/index.mjs"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "titdalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave"
+  ],
+  "author": "Felix Roos <flix91@gmail.com>",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {
+    "@strudel/core": "workspace:*"
+  },
+  "devDependencies": {
+    "vite": "^5.0.10"
+  }
+}

packages/draw/pianoroll.mjs

@@ -1,10 +1,10 @@
 /*
 pianoroll.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/pianoroll.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/canvas/pianoroll.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/>.
 */
 
-import { Pattern, noteToMidi, getDrawContext, freqToMidi, isNote } from './index.mjs';
+import { Pattern, noteToMidi, freqToMidi } from '@strudel/core';
 
 const scale = (normalized, min, max) => normalized * (max - min) + min;
 const getValue = (e) => {
@@ -187,7 +187,8 @@ export function pianoroll({
     color = isActive ? active : inactive;
     ctx.fillStyle = fillCurrent ? color : 'transparent';
     ctx.strokeStyle = color;
-    ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1;
+    const { velocity = 1, gain = 1 } = event.value || {};
+    ctx.globalAlpha = velocity * gain;
     const timeProgress = (event.whole.begin - (flipTime ? to : from)) / timeExtent;
     const timePx = scale(timeProgress, ...timeRange);
     let durationPx = scale(event.duration / timeExtent, 0, timeAxis);

packages/draw/spiral.mjs

@@ -1,4 +1,4 @@
-import { Pattern } from './index.mjs';
+import { Pattern } from '@strudel/core';
 
 // polar coords -> xy
 function fromPolar(angle, radius, cx, cy) {

packages/draw/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import { dependencies } from './package.json';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'index.mjs'),
+      formats: ['es'],
+      fileName: (ext) => ({ es: 'index.mjs' })[ext],
+    },
+    rollupOptions: {
+      external: [...Object.keys(dependencies)],
+    },
+    target: 'esnext',
+  },
+});

packages/hydra/hydra.mjs

@@ -1,40 +1,49 @@
-import { getDrawContext } from '@strudel/core';
+import { getDrawContext } from '@strudel/draw';
+import { controls } from '@strudel/core';
 
 let latestOptions;
-
-function appendCanvas(c) {
-  const { canvas: testCanvas } = getDrawContext();
-  c.canvas.id = 'hydra-canvas';
-  c.canvas.style.position = 'fixed';
-  c.canvas.style.top = '0px';
-  testCanvas.after(c.canvas);
-  return testCanvas;
-}
+let hydra;
 
 export async function initHydra(options = {}) {
   // reset if options have changed since last init
   if (latestOptions && JSON.stringify(latestOptions) !== JSON.stringify(options)) {
-    document.getElementById('hydra-canvas').remove();
+    document.getElementById('hydra-canvas')?.remove();
   }
   latestOptions = options;
   //load and init hydra
   if (!document.getElementById('hydra-canvas')) {
-    console.log('reinit..');
     const {
       src = 'https://unpkg.com/hydra-synth',
       feedStrudel = false,
+      contextType = 'webgl',
+      pixelRatio = 1,
+      pixelated = true,
       ...hydraConfig
-    } = { detectAudio: false, ...options };
+    } = {
+      detectAudio: false,
+      ...options,
+    };
+    const { canvas } = getDrawContext('hydra-canvas', { contextType, pixelRatio, pixelated });
+    hydraConfig.canvas = canvas;
 
     await import(/* @vite-ignore */ src);
-    const hydra = new Hydra(hydraConfig);
+    hydra = new Hydra(hydraConfig);
     if (feedStrudel) {
       const { canvas } = getDrawContext();
       canvas.style.display = 'none';
       hydra.synth.s0.init({ src: canvas });
     }
-    appendCanvas(hydra);
   }
 }
 
+export function clearHydra() {
+  if (hydra) {
+    hydra.hush();
+  }
+  globalThis.s0?.clear();
+  document.getElementById('hydra-canvas')?.remove();
+  globalThis.speed = controls.speed;
+  globalThis.shape = controls.shape;
+}
+
 export const H = (p) => () => p.queryArc(getTime(), getTime())[0].value;

packages/hydra/package.json

@@ -34,6 +34,7 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "@strudel/core": "workspace:*",
+    "@strudel/draw": "workspace:*",
     "hydra-synth": "^1.3.29"
   },
   "devDependencies": {

packages/midi/midi.mjs

@@ -125,8 +125,9 @@ Pattern.prototype.midi = function (output) {
     const timeOffsetString = `+${offset}`;
 
     // destructure value
-    const { note, nrpnn, nrpv, ccn, ccv, midichan = 1, midicmd } = hap.value;
-    const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity
+    let { note, nrpnn, nrpv, ccn, ccv, midichan = 1, midicmd, gain = 1, velocity = 0.9 } = hap.value;
+
+    velocity = gain * velocity;
 
     // note off messages will often a few ms arrive late, try to prevent glitching by subtracting from the duration length
     const duration = Math.floor((hap.duration.valueOf() / cps) * 1000 - 10);

packages/repl/package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "@strudel/codemirror": "workspace:*",
     "@strudel/core": "workspace:*",
+    "@strudel/draw": "workspace:*",
     "@strudel/hydra": "workspace:*",
     "@strudel/midi": "workspace:*",
     "@strudel/mini": "workspace:*",

packages/repl/prebake.mjs

@@ -6,6 +6,7 @@ export async function prebake() {
   const modulesLoading = evalScope(
     // import('@strudel/core'),
     core,
+    import('@strudel/draw'),
     import('@strudel/mini'),
     import('@strudel/tonal'),
     import('@strudel/webaudio'),

packages/repl/repl-component.mjs

@@ -1,4 +1,5 @@
-import { getDrawContext, silence } from '@strudel/core';
+import { silence } from '@strudel/core';
+import { getDrawContext } from '@strudel/draw';
 import { transpiler } from '@strudel/transpiler';
 import { getAudioContext, webaudioOutput } from '@strudel/webaudio';
 import { StrudelMirror, codemirrorSettings } from '@strudel/codemirror';

packages/superdough/README.md

@@ -65,7 +65,7 @@ superdough({ s: 'bd', delay: 0.5 }, 0, 1);
   - `bandf`: band pass filter cutoff
   - `bandq`: band pass  filter resonance
   - `crush`: amplitude bit crusher using given number of bits
-  - `shape`: distortion effect from 0 (none) to 1 (full). might get loud!
+  - `distort`: distortion effect. might get loud!
   - `pan`: stereo panning from 0 (left) to 1 (right)
   - `phaser`: sets the speed of the modulation
   - `phaserdepth`: the amount the signal is affected by the phaser effect.

packages/superdough/superdough.mjs

@@ -347,7 +347,7 @@ export const superdough = async (value, deadline, hapDuration) => {
   //music programs/audio gear usually increments inputs/outputs from 1, so imitate that behavior
   channels = (Array.isArray(channels) ? channels : [channels]).map((ch) => ch - 1);
 
-  gain *= velocity; // legacy fix for velocity
+  gain *= velocity; // velocity currently only multiplies with gain. it might do other things in the future
   let toDisconnect = []; // audio nodes that will be disconnected when the source has ended
   const onended = () => {
     toDisconnect.forEach((n) => n?.disconnect());

packages/tonal/index.mjs

@@ -5,3 +5,5 @@ export * from './tonal.mjs';
 export * from './voicings.mjs';
 
 import './ireal.mjs';
+
+export const packageName = '@strudel/tonal';

packages/tonal/voicings.mjs

@@ -77,8 +77,13 @@ export const voicingRegistry = {
   lefthand: { dictionary: lefthand, range: ['F3', 'A4'], mode: 'below', anchor: 'a4' },
   triads: { dictionary: triads, mode: 'below', anchor: 'a4' },
   guidetones: { dictionary: guidetones, mode: 'above', anchor: 'a4' },
-  default: { dictionary: defaultDictionary, mode: 'below', anchor: 'a4' },
+  legacy: { dictionary: defaultDictionary, mode: 'below', anchor: 'a4' },
 };
+
+let defaultDict = 'ireal';
+export const setDefaultVoicings = (dict) => (defaultDict = dict);
+// e.g. typeof setDefaultVoicings !== 'undefined' && setDefaultVoicings('legacy');
+
 export const setVoicingRange = (name, range) => addVoicings(name, voicingRegistry[name].dictionary, range);
 
 /**
@@ -193,7 +198,7 @@ export const voicing = register('voicing', function (pat) {
     .fmap((value) => {
       // destructure voicing controls out
       value = typeof value === 'string' ? { chord: value } : value;
-      let { dictionary = 'default', chord, anchor, offset, mode, n, octaves, ...rest } = value;
+      let { dictionary = defaultDict, chord, anchor, offset, mode, n, octaves, ...rest } = value;
       dictionary =
         typeof dictionary === 'string' ? voicingRegistry[dictionary] : { dictionary, mode: 'below', anchor: 'c5' };
       try {
@@ -234,3 +239,8 @@ Object.keys(simple).forEach((symbol) => {
 
 registerVoicings('ireal', simple);
 registerVoicings('ireal-ext', complex);
+
+export function resetVoicings() {
+  lastVoicing = undefined;
+  setDefaultVoicings('ireal');
+}

packages/webaudio/package.json

@@ -34,6 +34,7 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "@strudel/core": "workspace:*",
+    "@strudel/draw": "workspace:*",
     "superdough": "workspace:*"
   },
   "devDependencies": {

packages/webaudio/scope.mjs

@@ -1,4 +1,5 @@
-import { Pattern, getDrawContext, clamp } from '@strudel/core';
+import { Pattern, clamp } from '@strudel/core';
+import { getDrawContext } from '../draw/index.mjs';
 import { analyser, getAnalyzerData } from 'superdough';
 
 export function drawTimeScope(

packages/webaudio/webaudio.mjs

@@ -12,7 +12,7 @@ setLogger(logger);
 
 const hap2value = (hap) => {
   hap.ensureObjectValue();
-  return { ...hap.value, velocity: hap.context.velocity };
+  return hap.value;
 };
 
 export const webaudioOutputTrigger = (t, hap, ct, cps) => superdough(hap2value(hap), t - ct, hap.duration / cps, cps);

pnpm-lock.yaml

@@ -140,28 +140,6 @@ importers:
         specifier: ^5.0.10
         version: 5.0.10
 
-  packages/claviature:
-    dependencies:
-      '@strudel/core':
-        specifier: workspace:*
-        version: link:../core
-      claviature:
-        specifier: ^0.1.0
-        version: 0.1.0
-      solid-element:
-        specifier: ^1.8.0
-        version: 1.8.0(solid-js@1.8.15)
-      solid-js:
-        specifier: ^1.8.15
-        version: 1.8.15
-      vite-plugin-solid:
-        specifier: ^2.10.1
-        version: 2.10.1(solid-js@1.8.15)(vite@5.0.11)
-    devDependencies:
-      vite:
-        specifier: ^5.0.10
-        version: 5.0.11(@types/node@20.10.6)
-
   packages/codemirror:
     dependencies:
       '@codemirror/autocomplete':
@@ -203,6 +181,9 @@ importers:
       '@strudel/core':
         specifier: workspace:*
         version: link:../core
+      '@strudel/draw':
+        specifier: workspace:*
+        version: link:../draw
       '@uiw/codemirror-themes':
         specifier: ^4.21.21
         version: 4.21.21(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)
@@ -255,6 +236,16 @@ importers:
         specifier: ^1.5.3
         version: 1.5.3
 
+  packages/draw:
+    dependencies:
+      '@strudel/core':
+        specifier: workspace:*
+        version: link:../core
+    devDependencies:
+      vite:
+        specifier: ^5.0.10
+        version: 5.0.11(@types/node@20.10.6)
+
   packages/embed: {}
 
   packages/hydra:
@@ -262,6 +253,9 @@ importers:
       '@strudel/core':
         specifier: workspace:*
         version: link:../core
+      '@strudel/draw':
+        specifier: workspace:*
+        version: link:../draw
       hydra-synth:
         specifier: ^1.3.29
         version: 1.3.29
@@ -329,6 +323,9 @@ importers:
       '@strudel/core':
         specifier: workspace:*
         version: link:../core
+      '@strudel/draw':
+        specifier: workspace:*
+        version: link:../draw
       '@strudel/hydra':
         specifier: workspace:*
         version: link:../hydra
@@ -480,6 +477,9 @@ importers:
       '@strudel/core':
         specifier: workspace:*
         version: link:../core
+      '@strudel/draw':
+        specifier: workspace:*
+        version: link:../draw
       superdough:
         specifier: workspace:*
         version: link:../superdough
@@ -560,6 +560,9 @@ importers:
       '@strudel/desktopbridge':
         specifier: workspace:*
         version: link:../packages/desktopbridge
+      '@strudel/draw':
+        specifier: workspace:*
+        version: link:../packages/draw
       '@strudel/hydra':
         specifier: workspace:*
         version: link:../packages/hydra
@@ -13708,28 +13711,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-solid@2.10.1(solid-js@1.8.15)(vite@5.0.11):
-    resolution: {integrity: sha512-kfVdNLWaJqaJVL52U6iCCKNW/nXE7bS1VVGOWPGllOkJfcNILymVSY0LCBLSnyy0iYnRtrXpiHm14rMuzeC7CA==}
-    peerDependencies:
-      '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.*
-      solid-js: ^1.7.2
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
-    peerDependenciesMeta:
-      '@testing-library/jest-dom':
-        optional: true
-    dependencies:
-      '@babel/core': 7.23.7
-      '@types/babel__core': 7.20.5
-      babel-preset-solid: 1.8.15(@babel/core@7.23.7)
-      merge-anything: 5.1.7
-      solid-js: 1.8.15
-      solid-refresh: 0.6.3(solid-js@1.8.15)
-      vite: 5.0.11(@types/node@20.10.6)
-      vitefu: 0.2.5(vite@5.0.11)
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /vite@5.0.10:
     resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==}
     engines: {node: ^18.0.0 || >=20.0.0}

test/__snapshots__/examples.test.mjs.snap

@@ -2131,38 +2131,38 @@ exports[`runs examples > example "early" example index 0 1`] = `
 
 exports[`runs examples > example "echo" example index 0 1`] = `
 [
-  "[ -1/3 ⇜ (0/1 → 1/6) | s:sd ]",
-  "[ -1/6 ⇜ (0/1 → 1/3) | s:sd ]",
-  "[ 0/1 → 1/2 | s:bd ]",
-  "[ 1/6 → 2/3 | s:bd ]",
-  "[ 1/3 → 5/6 | s:bd ]",
-  "[ 1/2 → 1/1 | s:sd ]",
-  "[ (2/3 → 1/1) ⇝ 7/6 | s:sd ]",
-  "[ (5/6 → 1/1) ⇝ 4/3 | s:sd ]",
-  "[ 2/3 ⇜ (1/1 → 7/6) | s:sd ]",
-  "[ 5/6 ⇜ (1/1 → 4/3) | s:sd ]",
-  "[ 1/1 → 3/2 | s:bd ]",
-  "[ 7/6 → 5/3 | s:bd ]",
-  "[ 4/3 → 11/6 | s:bd ]",
-  "[ 3/2 → 2/1 | s:sd ]",
-  "[ (5/3 → 2/1) ⇝ 13/6 | s:sd ]",
-  "[ (11/6 → 2/1) ⇝ 7/3 | s:sd ]",
-  "[ 5/3 ⇜ (2/1 → 13/6) | s:sd ]",
-  "[ 11/6 ⇜ (2/1 → 7/3) | s:sd ]",
-  "[ 2/1 → 5/2 | s:bd ]",
-  "[ 13/6 → 8/3 | s:bd ]",
-  "[ 7/3 → 17/6 | s:bd ]",
-  "[ 5/2 → 3/1 | s:sd ]",
-  "[ (8/3 → 3/1) ⇝ 19/6 | s:sd ]",
-  "[ (17/6 → 3/1) ⇝ 10/3 | s:sd ]",
-  "[ 8/3 ⇜ (3/1 → 19/6) | s:sd ]",
-  "[ 17/6 ⇜ (3/1 → 10/3) | s:sd ]",
-  "[ 3/1 → 7/2 | s:bd ]",
-  "[ 19/6 → 11/3 | s:bd ]",
-  "[ 10/3 → 23/6 | s:bd ]",
-  "[ 7/2 → 4/1 | s:sd ]",
-  "[ (11/3 → 4/1) ⇝ 25/6 | s:sd ]",
-  "[ (23/6 → 4/1) ⇝ 13/3 | s:sd ]",
+  "[ -1/3 ⇜ (0/1 → 1/6) | s:sd gain:0.8 ]",
+  "[ -1/6 ⇜ (0/1 → 1/3) | s:sd gain:0.6400000000000001 ]",
+  "[ 0/1 → 1/2 | s:bd gain:1 ]",
+  "[ 1/6 → 2/3 | s:bd gain:0.8 ]",
+  "[ 1/3 → 5/6 | s:bd gain:0.6400000000000001 ]",
+  "[ 1/2 → 1/1 | s:sd gain:1 ]",
+  "[ (2/3 → 1/1) ⇝ 7/6 | s:sd gain:0.8 ]",
+  "[ (5/6 → 1/1) ⇝ 4/3 | s:sd gain:0.6400000000000001 ]",
+  "[ 2/3 ⇜ (1/1 → 7/6) | s:sd gain:0.8 ]",
+  "[ 5/6 ⇜ (1/1 → 4/3) | s:sd gain:0.6400000000000001 ]",
+  "[ 1/1 → 3/2 | s:bd gain:1 ]",
+  "[ 7/6 → 5/3 | s:bd gain:0.8 ]",
+  "[ 4/3 → 11/6 | s:bd gain:0.6400000000000001 ]",
+  "[ 3/2 → 2/1 | s:sd gain:1 ]",
+  "[ (5/3 → 2/1) ⇝ 13/6 | s:sd gain:0.8 ]",
+  "[ (11/6 → 2/1) ⇝ 7/3 | s:sd gain:0.6400000000000001 ]",
+  "[ 5/3 ⇜ (2/1 → 13/6) | s:sd gain:0.8 ]",
+  "[ 11/6 ⇜ (2/1 → 7/3) | s:sd gain:0.6400000000000001 ]",
+  "[ 2/1 → 5/2 | s:bd gain:1 ]",
+  "[ 13/6 → 8/3 | s:bd gain:0.8 ]",
+  "[ 7/3 → 17/6 | s:bd gain:0.6400000000000001 ]",
+  "[ 5/2 → 3/1 | s:sd gain:1 ]",
+  "[ (8/3 → 3/1) ⇝ 19/6 | s:sd gain:0.8 ]",
+  "[ (17/6 → 3/1) ⇝ 10/3 | s:sd gain:0.6400000000000001 ]",
+  "[ 8/3 ⇜ (3/1 → 19/6) | s:sd gain:0.8 ]",
+  "[ 17/6 ⇜ (3/1 → 10/3) | s:sd gain:0.6400000000000001 ]",
+  "[ 3/1 → 7/2 | s:bd gain:1 ]",
+  "[ 19/6 → 11/3 | s:bd gain:0.8 ]",
+  "[ 10/3 → 23/6 | s:bd gain:0.6400000000000001 ]",
+  "[ 7/2 → 4/1 | s:sd gain:1 ]",
+  "[ (11/3 → 4/1) ⇝ 25/6 | s:sd gain:0.8 ]",
+  "[ (23/6 → 4/1) ⇝ 13/3 | s:sd gain:0.6400000000000001 ]",
 ]
 `;
 
@@ -6962,38 +6962,38 @@ exports[`runs examples > example "struct" example index 0 1`] = `
 
 exports[`runs examples > example "stut" example index 0 1`] = `
 [
-  "[ -1/3 ⇜ (0/1 → 1/6) | s:sd ]",
-  "[ -1/6 ⇜ (0/1 → 1/3) | s:sd ]",
-  "[ 0/1 → 1/2 | s:bd ]",
-  "[ 1/6 → 2/3 | s:bd ]",
-  "[ 1/3 → 5/6 | s:bd ]",
-  "[ 1/2 → 1/1 | s:sd ]",
-  "[ (2/3 → 1/1) ⇝ 7/6 | s:sd ]",
-  "[ (5/6 → 1/1) ⇝ 4/3 | s:sd ]",
-  "[ 2/3 ⇜ (1/1 → 7/6) | s:sd ]",
-  "[ 5/6 ⇜ (1/1 → 4/3) | s:sd ]",
-  "[ 1/1 → 3/2 | s:bd ]",
-  "[ 7/6 → 5/3 | s:bd ]",
-  "[ 4/3 → 11/6 | s:bd ]",
-  "[ 3/2 → 2/1 | s:sd ]",
-  "[ (5/3 → 2/1) ⇝ 13/6 | s:sd ]",
-  "[ (11/6 → 2/1) ⇝ 7/3 | s:sd ]",
-  "[ 5/3 ⇜ (2/1 → 13/6) | s:sd ]",
-  "[ 11/6 ⇜ (2/1 → 7/3) | s:sd ]",
-  "[ 2/1 → 5/2 | s:bd ]",
-  "[ 13/6 → 8/3 | s:bd ]",
-  "[ 7/3 → 17/6 | s:bd ]",
-  "[ 5/2 → 3/1 | s:sd ]",
-  "[ (8/3 → 3/1) ⇝ 19/6 | s:sd ]",
-  "[ (17/6 → 3/1) ⇝ 10/3 | s:sd ]",
-  "[ 8/3 ⇜ (3/1 → 19/6) | s:sd ]",
-  "[ 17/6 ⇜ (3/1 → 10/3) | s:sd ]",
-  "[ 3/1 → 7/2 | s:bd ]",
-  "[ 19/6 → 11/3 | s:bd ]",
-  "[ 10/3 → 23/6 | s:bd ]",
-  "[ 7/2 → 4/1 | s:sd ]",
-  "[ (11/3 → 4/1) ⇝ 25/6 | s:sd ]",
-  "[ (23/6 → 4/1) ⇝ 13/3 | s:sd ]",
+  "[ -1/3 ⇜ (0/1 → 1/6) | s:sd gain:0.8 ]",
+  "[ -1/6 ⇜ (0/1 → 1/3) | s:sd gain:0.6400000000000001 ]",
+  "[ 0/1 → 1/2 | s:bd gain:1 ]",
+  "[ 1/6 → 2/3 | s:bd gain:0.8 ]",
+  "[ 1/3 → 5/6 | s:bd gain:0.6400000000000001 ]",
+  "[ 1/2 → 1/1 | s:sd gain:1 ]",
+  "[ (2/3 → 1/1) ⇝ 7/6 | s:sd gain:0.8 ]",
+  "[ (5/6 → 1/1) ⇝ 4/3 | s:sd gain:0.6400000000000001 ]",
+  "[ 2/3 ⇜ (1/1 → 7/6) | s:sd gain:0.8 ]",
+  "[ 5/6 ⇜ (1/1 → 4/3) | s:sd gain:0.6400000000000001 ]",
+  "[ 1/1 → 3/2 | s:bd gain:1 ]",
+  "[ 7/6 → 5/3 | s:bd gain:0.8 ]",
+  "[ 4/3 → 11/6 | s:bd gain:0.6400000000000001 ]",
+  "[ 3/2 → 2/1 | s:sd gain:1 ]",
+  "[ (5/3 → 2/1) ⇝ 13/6 | s:sd gain:0.8 ]",
+  "[ (11/6 → 2/1) ⇝ 7/3 | s:sd gain:0.6400000000000001 ]",
+  "[ 5/3 ⇜ (2/1 → 13/6) | s:sd gain:0.8 ]",
+  "[ 11/6 ⇜ (2/1 → 7/3) | s:sd gain:0.6400000000000001 ]",
+  "[ 2/1 → 5/2 | s:bd gain:1 ]",
+  "[ 13/6 → 8/3 | s:bd gain:0.8 ]",
+  "[ 7/3 → 17/6 | s:bd gain:0.6400000000000001 ]",
+  "[ 5/2 → 3/1 | s:sd gain:1 ]",
+  "[ (8/3 → 3/1) ⇝ 19/6 | s:sd gain:0.8 ]",
+  "[ (17/6 → 3/1) ⇝ 10/3 | s:sd gain:0.6400000000000001 ]",
+  "[ 8/3 ⇜ (3/1 → 19/6) | s:sd gain:0.8 ]",
+  "[ 17/6 ⇜ (3/1 → 10/3) | s:sd gain:0.6400000000000001 ]",
+  "[ 3/1 → 7/2 | s:bd gain:1 ]",
+  "[ 19/6 → 11/3 | s:bd gain:0.8 ]",
+  "[ 10/3 → 23/6 | s:bd gain:0.6400000000000001 ]",
+  "[ 7/2 → 4/1 | s:sd gain:1 ]",
+  "[ (11/3 → 4/1) ⇝ 25/6 | s:sd gain:0.8 ]",
+  "[ (23/6 → 4/1) ⇝ 13/3 | s:sd gain:0.6400000000000001 ]",
 ]
 `;
 
@@ -7222,38 +7222,38 @@ exports[`runs examples > example "unit" example index 0 1`] = `
 
 exports[`runs examples > example "velocity" example index 0 1`] = `
 [
-  "[ 0/1 → 1/8 | s:hh gain:0.4 ]",
-  "[ 1/8 → 1/4 | s:hh gain:0.4 ]",
-  "[ 1/4 → 3/8 | s:hh gain:1 ]",
-  "[ 3/8 → 1/2 | s:hh gain:0.4 ]",
-  "[ 1/2 → 5/8 | s:hh gain:0.4 ]",
-  "[ 5/8 → 3/4 | s:hh gain:1 ]",
-  "[ 3/4 → 7/8 | s:hh gain:0.4 ]",
-  "[ 7/8 → 1/1 | s:hh gain:1 ]",
-  "[ 1/1 → 9/8 | s:hh gain:0.4 ]",
-  "[ 9/8 → 5/4 | s:hh gain:0.4 ]",
-  "[ 5/4 → 11/8 | s:hh gain:1 ]",
-  "[ 11/8 → 3/2 | s:hh gain:0.4 ]",
-  "[ 3/2 → 13/8 | s:hh gain:0.4 ]",
-  "[ 13/8 → 7/4 | s:hh gain:1 ]",
-  "[ 7/4 → 15/8 | s:hh gain:0.4 ]",
-  "[ 15/8 → 2/1 | s:hh gain:1 ]",
-  "[ 2/1 → 17/8 | s:hh gain:0.4 ]",
-  "[ 17/8 → 9/4 | s:hh gain:0.4 ]",
-  "[ 9/4 → 19/8 | s:hh gain:1 ]",
-  "[ 19/8 → 5/2 | s:hh gain:0.4 ]",
-  "[ 5/2 → 21/8 | s:hh gain:0.4 ]",
-  "[ 21/8 → 11/4 | s:hh gain:1 ]",
-  "[ 11/4 → 23/8 | s:hh gain:0.4 ]",
-  "[ 23/8 → 3/1 | s:hh gain:1 ]",
-  "[ 3/1 → 25/8 | s:hh gain:0.4 ]",
-  "[ 25/8 → 13/4 | s:hh gain:0.4 ]",
-  "[ 13/4 → 27/8 | s:hh gain:1 ]",
-  "[ 27/8 → 7/2 | s:hh gain:0.4 ]",
-  "[ 7/2 → 29/8 | s:hh gain:0.4 ]",
-  "[ 29/8 → 15/4 | s:hh gain:1 ]",
-  "[ 15/4 → 31/8 | s:hh gain:0.4 ]",
-  "[ 31/8 → 4/1 | s:hh gain:1 ]",
+  "[ 0/1 → 1/8 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 1/8 → 1/4 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 1/4 → 3/8 | s:hh gain:1 velocity:0.4 ]",
+  "[ 3/8 → 1/2 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 1/2 → 5/8 | s:hh gain:0.4 velocity:1 ]",
+  "[ 5/8 → 3/4 | s:hh gain:1 velocity:1 ]",
+  "[ 3/4 → 7/8 | s:hh gain:0.4 velocity:1 ]",
+  "[ 7/8 → 1/1 | s:hh gain:1 velocity:1 ]",
+  "[ 1/1 → 9/8 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 9/8 → 5/4 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 5/4 → 11/8 | s:hh gain:1 velocity:0.4 ]",
+  "[ 11/8 → 3/2 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 3/2 → 13/8 | s:hh gain:0.4 velocity:1 ]",
+  "[ 13/8 → 7/4 | s:hh gain:1 velocity:1 ]",
+  "[ 7/4 → 15/8 | s:hh gain:0.4 velocity:1 ]",
+  "[ 15/8 → 2/1 | s:hh gain:1 velocity:1 ]",
+  "[ 2/1 → 17/8 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 17/8 → 9/4 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 9/4 → 19/8 | s:hh gain:1 velocity:0.4 ]",
+  "[ 19/8 → 5/2 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 5/2 → 21/8 | s:hh gain:0.4 velocity:1 ]",
+  "[ 21/8 → 11/4 | s:hh gain:1 velocity:1 ]",
+  "[ 11/4 → 23/8 | s:hh gain:0.4 velocity:1 ]",
+  "[ 23/8 → 3/1 | s:hh gain:1 velocity:1 ]",
+  "[ 3/1 → 25/8 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 25/8 → 13/4 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 13/4 → 27/8 | s:hh gain:1 velocity:0.4 ]",
+  "[ 27/8 → 7/2 | s:hh gain:0.4 velocity:0.4 ]",
+  "[ 7/2 → 29/8 | s:hh gain:0.4 velocity:1 ]",
+  "[ 29/8 → 15/4 | s:hh gain:1 velocity:1 ]",
+  "[ 15/4 → 31/8 | s:hh gain:0.4 velocity:1 ]",
+  "[ 31/8 → 4/1 | s:hh gain:1 velocity:1 ]",
 ]
 `;
 
@@ -7311,22 +7311,22 @@ exports[`runs examples > example "vibmod" example index 1 1`] = `
 
 exports[`runs examples > example "voicing" example index 0 1`] = `
 [
-  "[ 0/1 → 1/4 | note:64 ]",
-  "[ 1/4 → 1/2 | note:67 ]",
-  "[ 1/2 → 3/4 | note:72 ]",
-  "[ 3/4 → 1/1 | note:76 ]",
-  "[ 1/1 → 5/4 | note:64 ]",
-  "[ 5/4 → 3/2 | note:69 ]",
-  "[ 3/2 → 7/4 | note:72 ]",
-  "[ 7/4 → 2/1 | note:76 ]",
-  "[ 2/1 → 9/4 | note:65 ]",
-  "[ 9/4 → 5/2 | note:69 ]",
-  "[ 5/2 → 11/4 | note:72 ]",
-  "[ 11/4 → 3/1 | note:77 ]",
-  "[ 3/1 → 13/4 | note:62 ]",
-  "[ 13/4 → 7/2 | note:67 ]",
-  "[ 7/2 → 15/4 | note:71 ]",
-  "[ 15/4 → 4/1 | note:74 ]",
+  "[ 0/1 → 1/4 | note:52 ]",
+  "[ 1/4 → 1/2 | note:60 ]",
+  "[ 1/2 → 3/4 | note:64 ]",
+  "[ 3/4 → 1/1 | note:67 ]",
+  "[ 1/1 → 5/4 | note:57 ]",
+  "[ 5/4 → 3/2 | note:60 ]",
+  "[ 3/2 → 7/4 | note:64 ]",
+  "[ 7/4 → 2/1 | note:69 ]",
+  "[ 2/1 → 9/4 | note:53 ]",
+  "[ 9/4 → 5/2 | note:60 ]",
+  "[ 5/2 → 11/4 | note:65 ]",
+  "[ 11/4 → 3/1 | note:69 ]",
+  "[ 3/1 → 13/4 | note:55 ]",
+  "[ 13/4 → 7/2 | note:62 ]",
+  "[ 7/2 → 15/4 | note:67 ]",
+  "[ 15/4 → 4/1 | note:71 ]",
 ]
 `;
 

website/package.json

@@ -28,6 +28,7 @@
     "@strudel/claviature": "workspace:*",
     "@strudel/codemirror": "workspace:*",
     "@strudel/core": "workspace:*",
+    "@strudel/draw": "workspace:*",
     "@strudel/csound": "workspace:*",
     "@strudel/desktopbridge": "workspace:*",
     "@strudel/hydra": "workspace:*",

website/src/docs/Colors.jsx

@@ -1,5 +1,4 @@
-import { colorMap } from '@strudel/core/color.mjs';
-import React from 'react';
+import { colorMap } from '@strudel/draw';
 
 const Colors = () => {
   return (

website/src/docs/MiniRepl.jsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { Icon } from './Icon';
-import { silence, getPunchcardPainter, noteToMidi, _mod } from '@strudel/core';
+import { silence, noteToMidi, _mod } from '@strudel/core';
+import { getPunchcardPainter } from '@strudel/draw';
 import { transpiler } from '@strudel/transpiler';
 import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio';
 import { StrudelMirror } from '@strudel/codemirror';

website/src/pages/img/example-[name].png.js

@@ -1,5 +1,5 @@
 import { createCanvas } from 'canvas';
-import { pianoroll } from '@strudel/core';
+import { pianoroll } from '@strudel/draw';
 import { evaluate } from '@strudel/transpiler';
 import '../../../../test/runtime.mjs';
 import * as tunes from '../../repl/tunes.mjs';

website/src/pages/learn/effects.mdx

@@ -238,9 +238,9 @@ Let's break down all pitch envelope controls:
 
 <JsDoc client:idle name="crush" h={0} />
 
-## shape
+## distort
 
-<JsDoc client:idle name="shape" h={0} />
+<JsDoc client:idle name="distort" h={0} />
 
 # Global Effects
 

website/src/pages/learn/synths.mdx

@@ -115,7 +115,7 @@ You can use fm with any of the above waveforms, although the below examples all
 
 Strudel can also use the sampler to load custom waveforms as a replacement of the default waveforms used by WebAudio for the base synth. A default set of more than 1000 wavetables is accessible by default (coming from the [AKWF](https://www.adventurekid.se/akrt/waveforms/adventure-kid-waveforms/) set). You can also import/use your own. A wavetable is a one-cycle waveform, which is then repeated to create a sound at the desired frequency. It is a classic but very effective synthesis technique.
 
-Any sample preceded by the `wt_` prefix will be loaded as a wavetable. This means that the `loop` argument will be set to `1` by defalt. You can scan over the wavetable by using `loopBegin` and `loopEnd` as well.
+Any sample preceded by the `wt_` prefix will be loaded as a wavetable. This means that the `loop` argument will be set to `1` by default. You can scan over the wavetable by using `loopBegin` and `loopEnd` as well.
 
 <MiniRepl
   client:idle

website/src/pages/swatch/[name].png.js

@@ -1,5 +1,5 @@
 import { createCanvas } from 'canvas';
-import { pianoroll } from '@strudel/core';
+import { pianoroll } from '@strudel/draw';
 import { evaluate } from '@strudel/transpiler';
 import '../../../../test/runtime.mjs';
 import { getMyPatterns } from '../../my_patterns';

website/src/repl/Repl.jsx

@@ -4,7 +4,8 @@ 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 { code2hash, getDrawContext, logger, silence } from '@strudel/core';
+import { code2hash, logger, silence } from '@strudel/core';
+import { getDrawContext } from '@strudel/draw';
 import cx from '@src/cx.mjs';
 import { transpiler } from '@strudel/transpiler';
 import {
@@ -17,6 +18,7 @@ import {
 import { defaultAudioDeviceName } from '../settings.mjs';
 import { getAudioDevices, setAudioDevice } from './util.mjs';
 import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
+import { clearHydra } from '@strudel/hydra';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { settingsMap, useSettings } from '../settings.mjs';
 import {
@@ -48,6 +50,14 @@ if (typeof window !== 'undefined') {
   isIframe = window.location !== window.parent.location;
 }
 
+async function getModule(name) {
+  if (!modulesLoading) {
+    return;
+  }
+  const modules = await modulesLoading;
+  return modules.find((m) => m.packageName === name);
+}
+
 export function Repl({ embedded = false }) {
   const isEmbedded = embedded || isIframe;
   const { panelPosition, isZen } = useSettings();
@@ -75,6 +85,11 @@ export function Repl({ embedded = false }) {
       onUpdateState: (state) => {
         setReplState({ ...state });
       },
+      onToggle: (playing) => {
+        if (!playing) {
+          clearHydra();
+        }
+      },
       afterEval: (all) => {
         const { code } = all;
         setLatestCode(code);
@@ -163,8 +178,10 @@ export function Repl({ embedded = false }) {
   };
 
   const resetEditor = async () => {
+    (await getModule('@strudel/tonal'))?.resetVoicings();
     resetGlobalEffects();
     clearCanvas();
+    clearHydra();
     resetLoadedSounds();
     editorRef.current.repl.setCps(0.5);
     await prebake(); // declare default samples
@@ -188,15 +205,12 @@ export function Repl({ embedded = false }) {
     logger(`[repl] ✨ loading random tune "${patternData.id}"`);
     setActivePattern(patternData.id);
     setViewingPatternData(patternData);
-    clearCanvas();
-    resetLoadedSounds();
-    resetGlobalEffects();
-    await prebake(); // declare default samples
+    await resetEditor();
     editorRef.current.setCode(code);
     editorRef.current.repl.evaluate(code);
   };
 
-  const handleShare = async () => shareCode(activeCode);
+  const handleShare = async () => shareCode(replState.code);
   const context = {
     embedded,
     started,

website/src/repl/drawings.mjs

@@ -24,7 +24,9 @@ angle(saw)
 `;
 
 // https://strudel.cc/?C31_NrcMfZEO
-export const spiralflower = `const {innerWidth:ww,innerHeight:wh} = window;
+export const spiralflower = `let {innerWidth:ww,innerHeight:wh} = window;
+ww*=window.devicePixelRatio;
+wh*=window.devicePixelRatio;
 const ctx = getDrawContext()
 const piDiv180 = Math.PI / 180;
 function fromPolar(angle, radius, cx, cy) {

website/src/repl/tunes.mjs

@@ -239,8 +239,10 @@ export const wavyKalimba = `// "Wavy kalimba"
 // @license CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
 // @by Felix Roos
 
+setcps(1)
+
 samples({
-  'kalimba': { c5:'https://freesound.org/data/previews/536/536549_11935698-lq.mp3' }
+  'kalimba': { c5:'https://cdn.freesound.org/previews/536/536549_11935698-lq.mp3' }
 })
 const scales = "<C:major C:mixolydian F:lydian [F:minor Db:major]>"
 
@@ -271,19 +273,18 @@ export const festivalOfFingers = `// "Festival of fingers"
 
 const chords = "<Cm7 Fm7 G7 F#7>";
 stack(
-  chord(chords).dict('lefthand').voicing().struct("x(3,8,-1)")
-  .velocity(.5).off(1/7,x=>x.add(note(12)).velocity(.2)),
-  
+  chord(chords).dict('lefthand').voicing()
+  .struct("x(3,8,-1)")
+  .gain(.5).off(1/7,x=>x.add(note(12)).mul(gain(.2))),
   chords.rootNotes(2).struct("x(4,8,-2)").note(),
-  
   chords.rootNotes(4)
   .scale(cat('C minor','F dorian','G dorian','F# mixolydian'))
   .struct("x(3,8,-2)".fast(2))
-  .scaleTranspose("0 4 0 6".early(".125 .5")).layer(scaleTranspose("0,<2 [4,6] [5,7]>/4"))
+  .scaleTranspose("0 4 0 6".early(".125 .5"))
+  .layer(scaleTranspose("0,<2 [4,6] [5,7]>/4"))
   .note()
-  
 ).slow(2)
- .velocity(sine.struct("x*8").add(3/5).mul(2/5).fast(8))
+ .mul(gain(sine.struct("x*8").add(3/5).mul(2/5).fast(8)))
  .piano()`;
 
 // iter, echo, echoWith
@@ -302,14 +303,14 @@ stack(
   "[c2 a1 bb1 ~] ~"
   .echo(2, 1/16, 1)
   .slow(2)
-  .layer(h)
   .note().s('square')
+  .layer(h)
   .clip(.4)
   .cutoff(400).decay(.12).sustain(0)
   ,
   "[g2,[c3 eb3]]".iter(4)
-  .echoWith(4, 1/8, (x,n)=>x.transpose(n*12).velocity(Math.pow(.4,n)))
-  .layer(h).note()
+  .echoWith(4, 1/8, (x,n)=>x.transpose(n*12).gain(Math.pow(.4,n)))
+  .note().layer(h)
   .clip(.1)
 )
   .fast(2/3)
@@ -349,11 +350,11 @@ stack(
   .n().scale(scale),
   n("<0 4>(5,8,-1)").scale(scale).sub(note(12))
 )
-  .velocity(".6 .7".fast(4))
+  .gain(".6 .7".fast(4))
   .add(note(4))
   .piano()
   .clip(2)
-  .velocity(.8)
+  .mul(gain(.8))
   .slow(2)
   .pianoroll()`;
 
@@ -410,16 +411,16 @@ export const randomBells = `// "Random bells"
 // @by Felix Roos
 
 samples({
-  bell: { c6: 'https://freesound.org/data/previews/411/411089_5121236-lq.mp3' },
-  bass: { d2: 'https://freesound.org/data/previews/608/608286_13074022-lq.mp3' }
+  bell: { c6: 'https://cdn.freesound.org/previews/411/411089_5121236-lq.mp3' },
+  bass: { d2: 'https://cdn.freesound.org/previews/608/608286_13074022-lq.mp3' }
 })
 
 stack(
   // bells
-  "0".euclidLegato(3,8)
+  n("0").euclidLegato(3,8)
   .echo(3, 1/16, .5)
-  .add(rand.range(0,12))
-  .scale("D:minor:pentatonic").note()
+  .add(n(rand.range(0,12)))
+  .scale("D:minor:pentatonic")
   .velocity(rand.range(.5,1))
   .s('bell').gain(.6).delay(.2).delaytime(1/3).delayfeedback(.8),
   // bass
@@ -462,7 +463,7 @@ samples({
   hh: '561/561241_12517458-lq.mp3',
   hh2:'44/44944_236326-lq.mp3',
   hh3: '44/44944_236326-lq.mp3',
-}, 'https://freesound.org/data/previews/')
+}, 'https://cdn.freesound.org/previews/')
 
 stack(
   "-7 0 -7 7".struct("x(5,8,1)").fast(2).sub(7)
@@ -473,10 +474,9 @@ stack(
   .apply(filter1)
   .lpa(.1).lpenv(2).ftype('24db')
   ,
-  "~@3 [<2 3>,<4 5>]"
+  n("~@3 [<2 3>,<4 5>]")
   .echo(4,1/16,.7)
   .scale(scales)
-  .note()
   .s('square').gain(.7)
   .attack(0.01).decay(0.1).sustain(0)
   .apply(filter1),
@@ -484,12 +484,11 @@ stack(
   .superimpose(sub("5"))
   .fast(1).euclidLegato(3,8)
   .mask("<1 0@7>")
-  .fast(2)
+  .fast(2).n()
   .echo(32, 1/8, .8)
   .scale(scales)
-  .note()
   .s("sawtooth")
-  .gain(sine.range(.1,.4).slow(8))
+  .mul(gain(sine.range(.1,.4).slow(8)))
   .attack(.001).decay(.2).sustain(0)
   .apply(filter2)
 ).stack(
@@ -498,13 +497,14 @@ stack(
     "~ sn",
     "[~ hh3]*2"
   ).s().fast(2).gain(.7)
-).slow(2)
-// strudel disable-highlighting`;
+).slow(2)`;
 
 export const festivalOfFingers3 = `// "Festival of fingers 3"
 // @license CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
 // @by Felix Roos
 
+setcps(1)
+
 n("[-7*3],0,2,6,[8 7]")
   .echoWith(
     4, // echo 4 times
@@ -514,7 +514,7 @@ n("[-7*3],0,2,6,[8 7]")
       .gain(1/(i+1)) // reduce gain
       .clip(1/(i+1))
     )
-  .velocity(perlin.range(.5,.9).slow(8))
+  .mul(gain(perlin.range(.5,.9).slow(8)))
   .stack(n("[22 25]*3")
          .clip(sine.range(.5,2).slow(8))
          .gain(sine.range(.4,.8).slow(5))
@@ -610,15 +610,17 @@ sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
 hh: ['hh27/000_hh27closedhh.wav','hh/000_hh3closedhh.wav'],
 }, 'github:tidalcycles/dirt-samples');
 
-note("<8(3,8) <7 7*2> [4 5@3] 8>".sub(1) // sub 1 -> 1-indexed
+setcps(1)
+
+"<8(3,8) <7 7*2> [4 5@3] 8>".sub(1) // sub 1 -> 1-indexed
 .layer(
 x=>x,
 x=>x.add(7).color('steelblue')
 .off(1/8,x=>x.add("2,4").off(1/8,x=>x.add(5).echo(4,.125,.5)))
 .slow(2),
-).scale('A1 minor'))
+).n().scale('A1 minor')
 .s("flbass").n(0)
-.gain(.3)
+.mul(gain(.3))
 .cutoff(sine.slow(7).range(200,4000))
 .resonance(10)
 //.hcutoff(400)

website/src/repl/util.mjs

@@ -72,6 +72,7 @@ export async function getRandomTune() {
 export function loadModules() {
   let modules = [
     import('@strudel/core'),
+    import('@strudel/draw'),
     import('@strudel/tonal'),
     import('@strudel/mini'),
     import('@strudel/xen'),