example: using onPaint with @strudel/web

can now await initStrudel to get scheduler
fix: reset pianoroll linewidth to 1
2026-07-22 05:05:26 -04:00 · 2023-07-07 08:59:36 +02:00 · 2023-07-07 08:57:28 +02:00 · 2023-07-07 08:56:47 +02:00
3 changed files with 53 additions and 1 deletions
@@ -198,6 +198,8 @@ export function pianoroll({
  let from = -cycles * playhead;
  let to = cycles * (1 - playhead);
  ctx.lineWidth = 1;
  if (timeframeProp) {
    console.warn('timeframe is deprecated! use from/to instead');
    from = 0;
@@ -0,0 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="https://strudel.tidalcycles.org/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@strudel/web REPL Example</title>
  </head>
  <body>
    <div id="app"></div>
    <canvas style="background: #000" width="320" height="320" id="canvas"></canvas><br />
    <button id="a">A</button>
    <button id="b">B</button>
    <button id="c">C</button>
    <button id="stop">stop</button>
    <script type="module">
      import { initStrudel } from '@strudel/web';
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      let drawer;
      let init = initStrudel({
        prebake: () => samples('github:tidalcycles/Dirt-Samples/master'),
        onToggle: async (started) => {
          const { scheduler } = await init;
          if (started) {
            drawer.start(scheduler);
          } else {
            drawer.stop();
          }
        },
      }).then(({ scheduler }) => {
        drawer = new Drawer(
          (haps, time, { drawTime }) => {
            scheduler.pattern.context?.onPaint?.(ctx, time, haps, drawTime);
          },
          [-2, 2],
        );
        return { scheduler };
      });
      const click = (id, action) => document.getElementById(id).addEventListener('click', action);
      click('a', () => evaluate(`s('bd,jvbass(3,8)').jux(rev).spiral({size:20})`));
      click('b', () => s('bd*2,hh(3,4),jvbass(5,8,1)').jux(rev).spiral({ size: 20, steady: 0.9 }).play());
      click('c', () => s('bd*2,hh(3,4),jvbass:[0 4](5,8,1)').jux(rev).stack(s('~ sd')).punchcard().play());
      click('stop', () => hush());
    </script>
  </body>
 </html>
@@ -29,7 +29,7 @@ export async function defaultPrebake() {
 let initDone;
 let scheduler;
-export function initStrudel(options = {}) {
+export async function initStrudel(options = {}) {
  initAudioOnFirstClick();
  miniAllStrings();
  const { prebake, ...schedulerOptions } = options;
@@ -39,6 +39,8 @@ export function initStrudel(options = {}) {
    await prebake?.();
  })();
  scheduler = webaudioScheduler(schedulerOptions);
  await initDone;
  return { scheduler };
 }
 window.initStrudel = initStrudel;
Author	SHA1	Message	Date
Felix Roos	9b765085e0	example: using onPaint with @strudel/web	2023-07-07 08:59:36 +02:00
Felix Roos	28b978f95f	can now await initStrudel to get scheduler	2023-07-07 08:57:28 +02:00
Felix Roos	cdf5456b75	fix: reset pianoroll linewidth to 1	2023-07-07 08:56:47 +02:00