remove pesky ticks and do it right

more lookahead
just increment those ticks
2026-07-14 06:43:47 -04:00 · 2022-04-01 17:42:52 +02:00 · 2022-04-01 16:46:18 +02:00 · 2022-04-01 16:34:43 +02:00 · 2022-04-01 16:25:14 +02:00 · 2022-04-01 16:15:58 +02:00
3 changed files with 298 additions and 0 deletions
@@ -0,0 +1,26 @@
+<input
+  type="text"
+  id="text"
+  value="cat('a', 'b')"
+  style="width: 100%; font-size: 2em; outline: none; margin-bottom: 10px"
+  spellcheck="false"
+/>
+<div id="output"></div>
+<script type="module">
+  const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.0.2');
+  Object.assign(window, strudel); // assign all strudel functions to global scope to use with eval
+  const input = document.getElementById('text');
+  const getEvents = () => {
+    const code = document.getElementById('text').value;
+    const pattern = eval(code);
+    const events = pattern.firstCycle();
+    console.log(code, '->', events);
+    document.getElementById('output').innerHTML = events.map((e) => e.show()).join('<br/>');
+  };
+  getEvents();
+  input.addEventListener('input', () => getEvents());
+</script>
+<p>
+  This page shows how skypack can be used to import strudel core directly into a simple html page. <br />
+  No server, no bundler and no build setup is needed to run this!
+</p>
@@ -0,0 +1,35 @@
+<body style="margin: 0">
+  <input
+    type="text"
+    id="text"
+    value="cat('lime', slowcat('steelblue','darkblue'),'yellow','salmon','black').every(2,rev).fast(16)"
+    style="width: 100%; font-size: 1.5em; background: black; color: white; outline: none; position: absolute; top: 0"
+    spellcheck="false"
+  />
+  <canvas id="canvas"></canvas>
+  <script type="module">
+    const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.0.2');
+    // this adds all strudel functions to the global scope, to be used by eval
+    Object.assign(window, strudel);
+    // setup elements
+    const input = document.getElementById('text');
+    const canvas = document.getElementById('canvas');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    const ctx = canvas.getContext('2d');
+    input.focus(); // autofocus
+    input.setSelectionRange(input.value.length, input.value.length); // move cursor to end
+    paint(input.value); // initial paint
+    input.addEventListener('input', (e) => paint(e.target.value)); // repaint on input
+
+    function paint(code) {
+      const pattern = eval(code); // run code
+      const events = pattern.firstCycle(); // query first cycle
+      ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
+      events.forEach((event) => {
+        ctx.fillStyle = event.value;
+        ctx.fillRect(event.whole.begin * canvas.width, 0, event.duration * canvas.width, canvas.height);
+      });
+    }
+  </script>
+</body>
@@ -0,0 +1,237 @@
+<div style="position: absolute; top: 0; right: 0; padding: 4px">
+  <button id="start" style="margin-bottom: 4px; font-size: 2em">start</button><br />
+  <button id="stop" style="font-size: 2em">stop</button>
+</div>
+<textarea
+  style="font-size: 2em; background: #e8d565; color: #323230; height: 100%; width: 100%; outline: none; border: 0"
+  id="text"
+  spellcheck="false"
+>
+Loading...</textarea
+>
+<script type="module">
+  document.body.style = 'margin: 0';
+  import * as strudel from 'https://cdn.skypack.dev/@strudel.cycles/core@0.0.2';
+  import 'https://cdn.skypack.dev/@strudel.cycles/core@0.0.2/euclid.mjs';
+  const { cat, State, TimeSpan } = strudel;
+  let pattern;
+  Object.assign(window, strudel); // add strudel to eval scope
+  const input = document.getElementById('text');
+
+  let initialCode = `sequence(880, [440, 660], 440, 660)
+.div(slowcat(3,2).slow(2))
+.off(1/8,mul(2))
+.off(1/4,mul(3))
+.legato(2)
+.slow(2)`;
+  try {
+    initialCode = atob(decodeURIComponent(window.location.href.split('#')[1]));
+  } catch (err) {
+    console.warn('failed to decode', err);
+  }
+  input.value = initialCode;
+
+  const evaluate = () => {
+    try {
+      pattern = eval(input.value);
+      window.location.hash = '#' + encodeURIComponent(btoa(input.value)); // update url hash
+    } catch (err) {
+      console.warn(err);
+    }
+  };
+  input.addEventListener('input', () => evaluate());
+
+  // helpers to create a worker dynamically without needing a server / extra file
+  const stringifyFunction = (func) => '(' + func + ')();';
+  const urlifyFunction = (func) =>
+    URL.createObjectURL(new Blob([stringifyFunction(func)], { type: 'text/javascript' }));
+  const createWorker = (func) => new Worker(urlifyFunction(func));
+
+  const interval = 0.1;
+  const lookahead = 0.5;
+
+  // this class is basically the tale of two clocks
+  class Metro {
+    worker;
+    audioContext;
+    interval = 0.2; // query span
+    lastEnd = 0;
+    constructor(audioContext, callback, interval = this.interval) {
+      this.audioContext = audioContext;
+      this.interval = interval;
+      this.worker = createWorker(() => {
+        // we cannot use closures here!
+        let interval;
+        let timerID = null; // this is clock #1 (the sloppy js clock)
+        const clear = () => {
+          if (timerID) {
+            clearInterval(timerID);
+            timerID = null;
+          }
+        };
+        const start = () => {
+          clear();
+          if (!interval) {
+            throw new Error('no interval set! call worker.postMessage({interval}) before starting.');
+          }
+          timerID = setInterval(() => postMessage('tick'), interval * 1000);
+        };
+        self.onmessage = function (e) {
+          if (e.data == 'start') {
+            start();
+          } else if (e.data.interval) {
+            interval = e.data.interval;
+            if (timerID) {
+              start();
+            }
+          } else if (e.data == 'stop') {
+            clear();
+          }
+        };
+      });
+      this.worker.postMessage({ interval });
+      const round = (n, d) => Math.round(n * d) / d;
+      const precision = 100;
+      this.worker.onmessage = (e) => {
+        if (e.data === 'tick') {
+          const begin = this.lastEnd || this.audioContext.currentTime;
+          const end = this.audioContext.currentTime + this.interval; // DONT reference begin here!
+          this.lastEnd = end;
+          // callback with query span, using clock #2 (the audio clock)
+          callback(begin, end);
+        }
+      };
+    }
+    start() {
+      console.log('start...');
+      this.audioContext.resume();
+      this.worker.postMessage('start');
+    }
+    stop() {
+      console.log('stop...');
+      this.worker.postMessage('stop');
+    }
+  }
+
+  const audioContext = new AudioContext();
+  const metro = new Metro(
+    audioContext,
+    (begin, end) => {
+      pattern.query(new State(new TimeSpan(begin, end))).forEach((e) => {
+        if (!e.part.begin.equals(e.whole.begin)) {
+          return;
+        }
+        if (e.context.createAudioNode) {
+          e.context.createAudioNode(e);
+        } else {
+          // fallback sine wave
+          const attack = 0.01;
+          const decay = 0.05;
+          const sustain = 0.5;
+          const release = 0.01;
+          const velocity = (e.context?.velocity || 1) * 0.1;
+          const osc = audioContext.createOscillator();
+          osc.type = 'sine';
+          osc.frequency.value = e.value;
+          osc.start(e.whole.begin);
+          const envelope = adsr(attack, decay, sustain, release, velocity, e.whole.begin, e.whole.end);
+          osc.stop(e.whole.end + release);
+          osc.connect(envelope);
+          envelope.connect(audioContext.destination);
+        }
+      });
+    },
+    interval,
+    lookahead,
+  );
+
+  const adsr = (attack, decay, sustain, release, velocity, begin, end) => {
+    const gainNode = audioContext.createGain();
+    gainNode.gain.setValueAtTime(0, begin);
+    gainNode.gain.linearRampToValueAtTime(velocity, begin + attack); // attack
+    gainNode.gain.linearRampToValueAtTime(sustain * velocity, begin + attack + decay); // sustain start
+    gainNode.gain.setValueAtTime(sustain * velocity, end); // sustain end
+    gainNode.gain.linearRampToValueAtTime(0, end + release); // release
+    // for some reason, using exponential ramping creates little cracklings
+    return gainNode;
+  };
+
+  strudel.Pattern.prototype.withAudioNode = function (createAudioNode) {
+    return this._withEvent((event) => {
+      return event.setContext({
+        ...event.context,
+        createAudioNode: (e) => createAudioNode(e, event.context.createAudioNode?.(event)),
+      });
+    });
+  };
+
+  strudel.Pattern.prototype._osc = function (type) {
+    return this.withAudioNode((e) => {
+      const osc = audioContext.createOscillator();
+      osc.type = type;
+      osc.frequency.value = e.value; // expects frequency..
+      osc.start(e.whole.begin.valueOf() + lookahead);
+      osc.stop(e.whole.end.valueOf() + lookahead); // release?
+      // osc.connect(audioContext.destination);
+      return osc;
+    });
+  };
+  strudel.Pattern.prototype.define('osc', (type, pat) => pat.osc(type), { patternified: true });
+  strudel.Pattern.prototype.adsr = function (a = 0.01, d = 0.05, s = 1, r = 0.01) {
+    return this.withAudioNode((e, node) => {
+      const velocity = e.context?.velocity || 1;
+      const envelope = adsr(
+        a,
+        d,
+        s,
+        r,
+        velocity,
+        e.whole.begin.valueOf() + lookahead,
+        e.whole.end.valueOf() + lookahead,
+      );
+      node?.connect(envelope);
+      return envelope;
+    });
+  };
+  strudel.Pattern.prototype.filter = function (type = 'lowshelf', frequency = 1000, gain = 25) {
+    return this.withAudioNode((e, node) => {
+      const filter = audioContext.createBiquadFilter();
+      filter.type = type;
+      filter.frequency.value = frequency;
+      filter.gain.value = gain;
+      node?.connect(filter);
+      return filter;
+    });
+  };
+
+  strudel.Pattern.prototype.out = function () {
+    const master = audioContext.createGain();
+    master.gain.value = 0.1;
+    master.connect(audioContext.destination);
+    return this.withAudioNode((e, node) => {
+      if (!node) {
+        console.warn('out: no source! call .osc() first');
+      }
+      node?.connect(master);
+    });
+  };
+
+  document.getElementById('start').addEventListener('click', () => metro.start());
+  document.getElementById('stop').addEventListener('click', () => metro.stop());
+  evaluate(); // evaluate initial code
+  /*
+  sequence(1,3/2,1,2).stack(
+stack(5,3,4).velocity(.8).slow(2).legato(.2)
+//.echo(3, 1/4, .5)
+).mul(110) // frequencies
+.div(slowcat(slowcat(2,5/4, 3/2),slowcat(3,4/3)).slow(2))
+.echoWith(
+ 16, // n of partials / cutoff
+ tri2.slow(128).div(2), // time between partials
+ (x,n)=>x // n = partial index 0..n
+  .mul((n+1)*3/2)
+  .legato(2)
+  .velocity(1/((n+1)**1.6)) // amplitude falloff
+ ).legato(2) // note length
+  */
+</script>
Author	SHA1	Message	Date
Felix Roos	3af2210c5e	remove pesky ticks and do it right	2022-04-01 17:42:52 +02:00
Felix Roos	d6aa73fd28	more lookahead	2022-04-01 16:46:18 +02:00
Felix Roos	f0083cfe45	just increment those ticks	2022-04-01 16:34:43 +02:00
Felix Roos	66f32dd678	loosen	2022-04-01 16:25:14 +02:00
Felix Roos	7faf1e1366	remove lastEnd	2022-04-01 16:15:58 +02:00
Felix Roos	e6ae16ca51	use ticks	2022-04-01 16:15:13 +02:00
Felix Roos	6af5250501	loosen tolerances at the right spot...	2022-04-01 15:45:12 +02:00
Felix Roos	7c0dd9a6cc	loosen tolerances	2022-04-01 15:26:02 +02:00
Felix Roos	5f6b2223e1	fix scheduling issues	2022-04-01 15:11:38 +02:00
Felix Roos	864157ac84	add more web audio stuff	2022-03-31 22:53:56 +02:00
Felix Roos	c89ee5ddb3	improve oscillators	2022-03-30 18:21:19 +02:00
Felix Roos	5a255350b4	add scope	2022-03-30 11:56:13 +02:00
Felix Roos	8919524432	clear canvas on update	2022-03-30 11:56:05 +02:00
Felix Roos	f79a64de60	add stripped down scheduler example	2022-03-30 00:46:16 +02:00
Felix Roos	3fdeccdb23	add core examples	2022-03-29 22:20:12 +02:00