Merge branch 'main' into default-dict

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

@@ -7,26 +7,33 @@ This program is free software: you can redistribute it and/or modify it under th
 import { Pattern, register, sequence } from './pattern.mjs';
 
 export function createParam(names) {
-  const name = Array.isArray(names) ? names[0] : names;
+  let isMulti = Array.isArray(names);
+  names = !isMulti ? [names] : names;
+  const name = names[0];
 
-  var withVal;
-  if (Array.isArray(names)) {
-    withVal = (xs) => {
-      if (Array.isArray(xs)) {
-        const result = {};
-        xs.forEach((x, i) => {
-          if (i < names.length) {
-            result[names[i]] = x;
-          }
-        });
-        return result;
-      } else {
-        return { [name]: xs };
-      }
-    };
-  } else {
-    withVal = (x) => ({ [name]: x });
-  }
+  const withVal = (xs) => {
+    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
+      xs = xs.value; // grab the unnamed control for this one
+      delete bag.value;
+    }
+    if (isMulti && Array.isArray(xs)) {
+      const result = bag || {};
+      xs.forEach((x, i) => {
+        if (i < names.length) {
+          result[names[i]] = x;
+        }
+      });
+      return result;
+    } else if (bag) {
+      bag[name] = xs;
+      return bag;
+    } else {
+      return { [name]: xs };
+    }
+  };
 
   const func = (...pats) => sequence(...pats).withValue(withVal);
 
@@ -119,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.
  *
@@ -400,19 +417,6 @@ export const { loopEnd, loope } = registerControl('loopEnd', 'loope');
  * s("<bd sd>,hh*3").fast(2).crush("<16 8 7 6 5 4 3 2>")
  *
  */
-// TODO: currently duplicated with "native" legato
-// TODO: superdirt legato will do more: https://youtu.be/dQPmE1WaD1k?t=419
-/**
- * a pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.
- *
- * @name legato
- * @param {number | Pattern} duration between 0 and 1, where 1 is the length of the whole hap time
- * @noAutocomplete
- * @example
- * "c4 eb4 g4 bb4".legato("<0.125 .25 .5 .75 1 2 4>")
- *
- */
-// ['legato'],
 // ['clhatdecay'],
 export const { crush } = registerControl('crush');
 /**
@@ -1170,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');
@@ -1276,7 +1278,10 @@ export const { roomsize, size, sz, rsize } = registerControl('roomsize', 'size',
 // ['sclaves'],
 // ['scrash'],
 /**
- * Wave shaping distortion. CAUTION: it might get loud
+ * (Deprecated) Wave shaping distortion. WARNING: can suddenly get unpredictably loud.
+ * Please use distort instead, which has a more predictable response curve
+ * second option in optional array syntax (ex: ".9:.5") applies a postgain to the output
+ *
  *
  * @name shape
  * @param {number | Pattern} distortion between 0 and 1
@@ -1284,7 +1289,22 @@ export const { roomsize, size, sz, rsize } = registerControl('roomsize', 'size',
  * s("bd sd [~ bd] sd,hh*8").shape("<0 .2 .4 .6 .8>")
  *
  */
-export const { shape } = registerControl('shape');
+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.
+ * 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
+ * @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")
+ *
+ */
+export const { distort, dist } = registerControl(['distort', 'distortvol'], 'dist');
 /**
  * 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)
@@ -1389,8 +1409,6 @@ export const { waveloss } = registerControl('waveloss');
  *
  */
 export const { density } = registerControl('density');
-// TODO: midi effects?
-export const { dur } = registerControl('dur');
 // ['modwheel'],
 export const { expression } = registerControl('expression');
 export const { sustainpedal } = registerControl('sustainpedal');
@@ -1420,7 +1438,6 @@ export const { octersubsub } = registerControl('octersubsub');
 export const { ring } = registerControl('ring');
 export const { ringf } = registerControl('ringf');
 export const { ringdf } = registerControl('ringdf');
-export const { distort } = registerControl('distort');
 export const { freeze } = registerControl('freeze');
 export const { xsdelay } = registerControl('xsdelay');
 export const { tsdelay } = registerControl('tsdelay');
@@ -1455,16 +1472,27 @@ export const { val } = registerControl('val');
 export const { cps } = registerControl('cps');
 /**
  * Multiplies the duration with the given number. Also cuts samples off at the end if they exceed the duration.
- * In tidal, this would be done with legato, [which has a complicated history in strudel](https://github.com/tidalcycles/strudel/issues/111).
- * For now, if you're coming from tidal, just think clip = legato.
  *
  * @name clip
+ * @synonyms legato
  * @param {number | Pattern} factor >= 0
  * @example
  * note("c a f e").s("piano").clip("<.5 1 2>")
  *
  */
-export const { clip } = registerControl('clip');
+export const { clip, legato } = registerControl('clip', 'legato');
+
+/**
+ * Sets the duration of the event in cycles. Similar to clip / legato, it also cuts samples off at the end if they exceed the duration.
+ *
+ * @name duration
+ * @synonyms dur
+ * @param {number | Pattern} seconds >= 0
+ * @example
+ * note("c a f e").s("piano").dur("<.5 1 2>")
+ *
+ */
+export const { duration, dur } = registerControl('duration', 'dur');
 
 // ZZFX
 export const { zrand } = registerControl('zrand');

packages/core/euclid.mjs

@@ -41,11 +41,17 @@ const _bjork = function (n, x) {
 };
 
 export const bjork = function (ons, steps) {
+  const inverted = ons < 0;
+  ons = Math.abs(ons);
   const offs = steps - ons;
   const x = Array(ons).fill([1]);
   const y = Array(offs).fill([0]);
   const result = _bjork([ons, offs], [x, y]);
-  return flatten(result[1][0]).concat(flatten(result[1][1]));
+  const p = flatten(result[1][0]).concat(flatten(result[1][1]));
+  if (inverted) {
+    return p.map((x) => (x === 0 ? 1 : 0));
+  }
+  return p;
 };
 
 /**

packages/core/hap.mjs

@@ -3,6 +3,7 @@ hap.mjs - <short description TODO>
 Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/hap.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 Fraction from './fraction.mjs';
 
 export class Hap {
   /*
@@ -32,7 +33,16 @@ export class Hap {
   }
 
   get duration() {
-    return this.whole.end.sub(this.whole.begin).mul(typeof this.value?.clip === 'number' ? this.value?.clip : 1);
+    let duration;
+    if (typeof this.value?.duration === 'number') {
+      duration = Fraction(this.value.duration);
+    } else {
+      duration = this.whole.end.sub(this.whole.begin);
+    }
+    if (typeof this.value?.clip === 'number') {
+      return duration.mul(this.value.clip);
+    }
+    return duration;
   }
 
   get endClipped() {

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/logger.mjs

@@ -1,6 +1,16 @@
 export const logKey = 'strudel.log';
 
+let debounce = 1000,
+  lastMessage,
+  lastTime;
+
 export function logger(message, type, data = {}) {
+  let t = performance.now();
+  if (lastMessage === message && t - lastTime < debounce) {
+    return;
+  }
+  lastMessage = message;
+  lastTime = t;
   console.log(`%c${message}`, 'background-color: black;color:white;border-radius:15px');
   if (typeof document !== 'undefined' && typeof CustomEvent !== 'undefined') {
     document.dispatchEvent(

packages/core/pattern.mjs

@@ -896,16 +896,15 @@ addToPrototype('weaveWith', function (t, ...funcs) {
 //////////////////////////////////////////////////////////////////////
 // compose matrix functions
 
-// TODO - adopt value.mjs fully..
+function _nonArrayObject(x) {
+  return !Array.isArray(x) && typeof x === 'object';
+}
 function _composeOp(a, b, func) {
-  function _nonFunctionObject(x) {
-    return x instanceof Object && !(x instanceof Function);
-  }
-  if (_nonFunctionObject(a) || _nonFunctionObject(b)) {
-    if (!_nonFunctionObject(a)) {
+  if (_nonArrayObject(a) || _nonArrayObject(b)) {
+    if (!_nonArrayObject(a)) {
       a = { value: a };
     }
-    if (!_nonFunctionObject(b)) {
+    if (!_nonArrayObject(b)) {
       b = { value: b };
     }
     return unionWithObj(a, b, func);
@@ -2064,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)));
 });
 
 /**
@@ -2077,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)));
 });
 
 /**
@@ -2203,12 +2202,6 @@ export const bypass = register('bypass', function (on, pat) {
  */
 export const ribbon = register('ribbon', (offset, cycles, pat) => pat.early(offset).restart(pure(1).slow(cycles)));
 
-// sets absolute duration of haps
-// TODO - fix
-export const duration = register('duration', function (value, pat) {
-  return pat.withHapSpan((span) => new TimeSpan(span.begin, span.begin.add(value)));
-});
-
 export const hsla = register('hsla', (h, s, l, a, pat) => {
   return pat.color(`hsla(${h}turn,${s * 100}%,${l * 100}%,${a})`);
 });
@@ -2228,34 +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 }));
-});
-
-/**
- *
- * Multiplies the hap duration with the given factor.
- * With samples, `clip` might be a better function to use ([more info](https://github.com/tidalcycles/strudel/pull/598))
- * @name legato
- * @memberof Pattern
- * @example
- * note("c3 eb3 g3 c4").legato("<.25 .5 1 2>")
- */
-// TODO - fix
-export const legato = register('legato', function (value, pat) {
-  value = Fraction(value);
-  return pat.withHapSpan((span) => new TimeSpan(span.begin, span.begin.add(span.end.sub(span.begin).mul(value))));
-});
-
 //////////////////////////////////////////////////////////////////////
 // Control-related functions, i.e. ones that manipulate patterns of
 // objects

packages/core/signal.mjs

@@ -244,9 +244,68 @@ export const pickmodF = register('pickmodF', function (lookup, funcs, pat) {
   return pat.apply(pickmod(lookup, funcs));
 });
 
+/** * Similar to `pick`, but it applies an outerJoin instead of an innerJoin.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickOut = register('pickOut', function (lookup, pat) {
+  return _pick(lookup, pat, false).outerJoin();
+});
+
+/** * The same as `pickOut`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickmodOut = register('pickmodOut', function (lookup, pat) {
+  return _pick(lookup, pat, true).outerJoin();
+});
+
+/** * Similar to `pick`, but the choosen pattern is restarted when its index is triggered.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickRestart = register('pickRestart', function (lookup, pat) {
+  return _pick(lookup, pat, false).trigzeroJoin();
+});
+
+/** * The same as `pickRestart`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickmodRestart = register('pickmodRestart', function (lookup, pat) {
+  return _pick(lookup, pat, true).trigzeroJoin();
+});
+
+/** * Similar to `pick`, but the choosen pattern is reset when its index is triggered.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickReset = register('pickReset', function (lookup, pat) {
+  return _pick(lookup, pat, false).trigJoin();
+});
+
+/** * The same as `pickReset`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickmodReset = register('pickmodReset', function (lookup, pat) {
+  return _pick(lookup, pat, true).trigJoin();
+});
+
 /**
 /** * Picks patterns (or plain values) either from a list (by index) or a lookup table (by name).
  * Similar to `pick`, but cycles are squeezed into the target ('inhabited') pattern.
+ * @name inhabit
+ * @synonyms pickSqueeze
  * @param {Pattern} pat
  * @param {*} xs
  * @returns {Pattern}
@@ -257,21 +316,23 @@ export const pickmodF = register('pickmodF', function (lookup, funcs, pat) {
  * @example
  * s("a@2 [a b] a".inhabit({a: "bd(3,8)", b: "sd sd"})).slow(4)
  */
-export const inhabit = register('inhabit', function (lookup, pat) {
-  return _pick(lookup, pat, true).squeezeJoin();
+export const { inhabit, pickSqueeze } = register(['inhabit', 'pickSqueeze'], function (lookup, pat) {
+  return _pick(lookup, pat, false).squeezeJoin();
 });
 
 /** * The same as `inhabit`, but if you pick a number greater than the size of the list,
  * it wraps around, rather than sticking at the maximum value.
  * For example, if you pick the fifth pattern of a list of three, you'll get the
  * second one.
+ * @name inhabitmod
+ * @synonyms pickmodSqueeze
  * @param {Pattern} pat
  * @param {*} xs
  * @returns {Pattern}
  */
 
-export const inhabitmod = register('inhabit', function (lookup, pat) {
-  return _pick(lookup, pat, false).squeezeJoin();
+export const { inhabitmod, pickmodSqueeze } = register(['inhabitmod', 'pickmodSqueeze'], function (lookup, pat) {
+  return _pick(lookup, pat, true).squeezeJoin();
 });
 
 /**

packages/core/test/controls.test.mjs

@@ -25,4 +25,8 @@ describe('controls', () => {
       { s: 'sd', n: 4, gain: 0.5 },
     ]);
   });
+  it('should support nested controls', () => {
+    expect(s(mini('bd').pan(1)).firstCycleValues).toEqual([{ s: 'bd', pan: 1 }]);
+    expect(s(mini('bd:1').pan(1)).firstCycleValues).toEqual([{ s: 'bd', n: 1, pan: 1 }]);
+  });
 });

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);
@@ -134,7 +154,7 @@ export class Drawer {
         this.lastFrame = phase;
         this.visibleHaps = (this.visibleHaps || [])
           // filter out haps that are too far in the past (think left edge of screen for pianoroll)
-          .filter((h) => h.whole?.end >= phase - lookbehind - lookahead)
+          .filter((h) => h.endClipped >= phase - lookbehind - lookahead)
           // add new haps with onset (think right edge bars scrolling in)
           .concat(haps.filter((h) => h.hasOnset()));
         const time = phase - lookahead;

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,15 +1,8 @@
-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
@@ -19,22 +12,38 @@ export async function initHydra(options = {}) {
   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/mini/mini.mjs

@@ -125,7 +125,7 @@ export function patternifyAST(ast, code, onEnter, offset = 0) {
       return enter(ast.source_);
     }
     case 'atom': {
-      if (ast.source_ === '~') {
+      if (ast.source_ === '~' || ast.source_ === '-') {
         return strudel.silence;
       }
       if (!ast.location_) {

packages/mini/test/mini.test.mjs

@@ -117,6 +117,9 @@ describe('mini', () => {
     checkEuclid([11, 24], 'x ~ ~ x ~ x ~ x ~ x ~ x ~ ~ x ~ x ~ x ~ x ~ x ~');
     checkEuclid([13, 24], 'x ~ x x ~ x ~ x ~ x ~ x ~ x x ~ x ~ x ~ x ~ x ~');
   });
+  it('supports the - alias for ~', () => {
+    expect(minS('a - b [- c]')).toEqual(minS('a ~ b [~ c]'));
+  });
   it('supports the ? operator', () => {
     expect(
       mini('a?')

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/sampler.mjs

@@ -251,7 +251,7 @@ export async function onTriggerSample(t, value, onended, bank, resolveUrl) {
     nudge = 0, // TODO: is this in seconds?
     cut,
     loop,
-    clip = undefined, // if 1, samples will be cut off when the hap ends
+    clip = undefined, // if set, samples will be cut off when the hap ends
     n = 0,
     note,
     speed = 1, // sample playback speed

packages/superdough/superdough.mjs

@@ -316,6 +316,9 @@ export const superdough = async (value, deadline, hapDuration) => {
     coarse,
     crush,
     shape,
+    shapevol = 1,
+    distort,
+    distortvol = 1,
     pan,
     vowel,
     delay = 0,
@@ -344,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());
@@ -457,7 +460,8 @@ export const superdough = async (value, deadline, hapDuration) => {
   // 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 }));
+  shape !== undefined && chain.push(getWorklet(ac, 'shape-processor', { shape, postgain: shapevol }));
+  distort !== undefined && chain.push(getWorklet(ac, 'distort-processor', { distort, postgain: distortvol }));
 
   compressorThreshold !== undefined &&
     chain.push(

packages/superdough/worklets.mjs

@@ -1,6 +1,5 @@
+// coarse, crush, and shape processors adapted from dktr0's webdirt: https://github.com/dktr0/WebDirt/blob/5ce3d698362c54d6e1b68acc47eb2955ac62c793/dist/AudioWorklets.js
 // LICENSE GNU General Public License v3.0 see https://github.com/dktr0/WebDirt/blob/main/LICENSE
-// all the credit goes to dktr0's webdirt: https://github.com/dktr0/WebDirt/blob/5ce3d698362c54d6e1b68acc47eb2955ac62c793/dist/AudioWorklets.js
-// <3
 
 class CoarseProcessor extends AudioWorkletProcessor {
   static get parameterDescriptors() {
@@ -9,28 +8,27 @@ class CoarseProcessor extends AudioWorkletProcessor {
 
   constructor() {
     super();
-    this.notStarted = true;
   }
 
   process(inputs, outputs, parameters) {
     const input = inputs[0];
     const output = outputs[0];
-    const coarse = parameters.coarse;
     const blockSize = 128;
-    const hasInput = !(input[0] === undefined);
-    if (hasInput) {
-      this.notStarted = false;
-      output[0][0] = input[0][0];
-      for (let n = 1; n < blockSize; n++) {
-        for (let o = 0; o < output.length; o++) {
-          output[o][n] = n % coarse == 0 ? input[0][n] : output[o][n - 1];
-        }
+
+    let coarse = parameters.coarse[0] ?? 0;
+    coarse = Math.max(1, coarse);
+
+    if (input[0] == null || output[0] == null) {
+      return false;
+    }
+    for (let n = 0; n < blockSize; n++) {
+      for (let i = 0; i < input.length; i++) {
+        output[i][n] = n % coarse === 0 ? input[i][n] : output[i][n - 1];
       }
     }
-    return this.notStarted || hasInput;
+    return true;
   }
 }
-
 registerProcessor('coarse-processor', CoarseProcessor);
 
 class CrushProcessor extends AudioWorkletProcessor {
@@ -40,69 +38,94 @@ class CrushProcessor extends AudioWorkletProcessor {
 
   constructor() {
     super();
-    this.notStarted = true;
   }
 
   process(inputs, outputs, parameters) {
     const input = inputs[0];
     const output = outputs[0];
-    const crush = parameters.crush;
     const blockSize = 128;
-    const hasInput = !(input[0] === undefined);
-    if (hasInput) {
-      this.notStarted = false;
-      if (crush.length === 1) {
-        const x = Math.pow(2, crush[0] - 1);
-        for (let n = 0; n < blockSize; n++) {
-          const value = Math.round(input[0][n] * x) / x;
-          for (let o = 0; o < output.length; o++) {
-            output[o][n] = value;
-          }
-        }
-      } else {
-        for (let n = 0; n < blockSize; n++) {
-          let x = Math.pow(2, crush[n] - 1);
-          const value = Math.round(input[0][n] * x) / x;
-          for (let o = 0; o < output.length; o++) {
-            output[o][n] = value;
-          }
-        }
+
+    let crush = parameters.crush[0] ?? 8;
+    crush = Math.max(1, crush);
+
+    if (input[0] == null || output[0] == null) {
+      return false;
+    }
+    for (let n = 0; n < blockSize; n++) {
+      for (let i = 0; i < input.length; i++) {
+        const x = Math.pow(2, crush - 1);
+        output[i][n] = Math.round(input[i][n] * x) / x;
       }
     }
-    return this.notStarted || hasInput;
+    return true;
   }
 }
 registerProcessor('crush-processor', CrushProcessor);
 
 class ShapeProcessor extends AudioWorkletProcessor {
   static get parameterDescriptors() {
-    return [{ name: 'shape', defaultValue: 0 }];
+    return [
+      { name: 'shape', defaultValue: 0 },
+      { name: 'postgain', defaultValue: 1 },
+    ];
   }
 
   constructor() {
     super();
-    this.notStarted = true;
   }
 
   process(inputs, outputs, parameters) {
     const input = inputs[0];
     const output = outputs[0];
-    const shape0 = parameters.shape[0];
-    const shape1 = shape0 < 1 ? shape0 : 1.0 - 4e-10;
-    const shape = (2.0 * shape1) / (1.0 - shape1);
     const blockSize = 128;
-    const hasInput = !(input[0] === undefined);
-    if (hasInput) {
-      this.notStarted = false;
-      for (let n = 0; n < blockSize; n++) {
-        const value = ((1 + shape) * input[0][n]) / (1 + shape * Math.abs(input[0][n]));
-        for (let o = 0; o < output.length; o++) {
-          output[o][n] = value;
-        }
+
+    let shape = parameters.shape[0];
+    shape = shape < 1 ? shape : 1.0 - 4e-10;
+    shape = (2.0 * shape) / (1.0 - shape);
+    const postgain = Math.max(0.001, Math.min(1, parameters.postgain[0]));
+
+    if (input[0] == null || output[0] == null) {
+      return false;
+    }
+    for (let n = 0; n < blockSize; n++) {
+      for (let i = 0; i < input.length; i++) {
+        output[i][n] = (((1 + shape) * input[i][n]) / (1 + shape * Math.abs(input[i][n]))) * postgain;
       }
     }
-    return this.notStarted || hasInput;
+    return true;
   }
 }
-
 registerProcessor('shape-processor', ShapeProcessor);
+
+class DistortProcessor extends AudioWorkletProcessor {
+  static get parameterDescriptors() {
+    return [
+      { name: 'distort', defaultValue: 0 },
+      { name: 'postgain', defaultValue: 1 },
+    ];
+  }
+
+  constructor() {
+    super();
+  }
+
+  process(inputs, outputs, parameters) {
+    const input = inputs[0];
+    const output = outputs[0];
+    const blockSize = 128;
+
+    const shape = Math.expm1(parameters.distort[0]);
+    const postgain = Math.max(0.001, Math.min(1, parameters.postgain[0]));
+
+    if (input[0] == null || output[0] == null) {
+      return false;
+    }
+    for (let n = 0; n < blockSize; n++) {
+      for (let i = 0; i < input.length; i++) {
+        output[i][n] = (((1 + shape) * input[i][n]) / (1 + shape * Math.abs(input[i][n]))) * postgain;
+      }
+    }
+    return true;
+  }
+}
+registerProcessor('distort-processor', DistortProcessor);

packages/tonal/tonal.mjs

@@ -103,6 +103,8 @@ export const transpose = register('transpose', function (intervalOrSemitones, pa
       const semitones = typeof interval === 'string' ? Interval.semitones(interval) || 0 : interval;
       return hap.withValue(() => hap.value + semitones);
     }
+    if (typeof hap.value === 'object')
+      return hap.withValue(() => ({ ...hap.value, note: Note.simplify(Note.transpose(hap.value.note, interval)) }));
     // TODO: move simplify to player to preserve enharmonics
     // tone.js doesn't understand multiple sharps flats e.g. F##3 has to be turned into G3
     return hap.withValue(() => Note.simplify(Note.transpose(hap.value, interval)));
@@ -133,6 +135,11 @@ export const scaleTranspose = register('scaleTranspose', function (offset /* : n
     if (!hap.context.scale) {
       throw new Error('can only use scaleTranspose after .scale');
     }
+    if (typeof hap.value === 'object')
+      return hap.withValue(() => ({
+        ...hap.value,
+        note: scaleOffset(hap.context.scale, Number(offset), hap.value.note),
+      }));
     if (typeof hap.value !== 'string') {
       throw new Error('can only use scaleTranspose with notes');
     }

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,10 +12,9 @@ setLogger(logger);
 
 const hap2value = (hap) => {
   hap.ensureObjectValue();
-  return { ...hap.value, velocity: hap.context.velocity };
+  return hap.value;
 };
 
-// TODO: bind logger
 export const webaudioOutputTrigger = (t, hap, ct, cps) => superdough(hap2value(hap), t - ct, hap.duration / cps, cps);
 export const webaudioOutput = (hap, deadline, hapDuration) => superdough(hap2value(hap), deadline, hapDuration);