From ee0d835cd88731f05704536536a9ca31b7f8b4e8 Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Tue, 29 Mar 2022 22:16:36 +0200
Subject: [PATCH] add core examples

---
 packages/core/examples/basic.html  | 26 +++++++++++++++++++++++
 packages/core/examples/canvas.html | 34 ++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 packages/core/examples/basic.html
 create mode 100644 packages/core/examples/canvas.html
diff --git a/packages/core/examples/basic.html b/packages/core/examples/basic.html
new file mode 100644
index 00000000..fad59d1b
--- /dev/null
+++ b/packages/core/examples/basic.html
@@ -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>
diff --git a/packages/core/examples/canvas.html b/packages/core/examples/canvas.html
new file mode 100644
index 00000000..685cc56e
--- /dev/null
+++ b/packages/core/examples/canvas.html
@@ -0,0 +1,34 @@
+<body style="margin: 0">
+  <input
+    type="text"
+    id="text"
+    value="cat('orange', 'indigo')"
+    style="width: 100%; font-size: 2em; 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
+      events.forEach((event) => {
+        ctx.fillStyle = event.value;
+        ctx.fillRect(event.whole.begin * canvas.width, 0, event.duration * canvas.width, canvas.height);
+      });
+    }
+  </script>
+</body>
