From 9b765085e04393a3ab0ccb8afd0a255f50aac6f0 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 7 Jul 2023 08:59:36 +0200
Subject: [PATCH] example: using onPaint with @strudel/web

---
 packages/web/examples/repl-example/draw.html | 48 ++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 packages/web/examples/repl-example/draw.html
diff --git a/packages/web/examples/repl-example/draw.html b/packages/web/examples/repl-example/draw.html
new file mode 100644
index 000000000..8d80f845e
--- /dev/null
+++ b/packages/web/examples/repl-example/draw.html
@@ -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>
