From 0aa2f72a3af06fb80e2338760ce2fd8e98daedd3 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 29 Jan 2023 23:27:35 +0100
Subject: [PATCH] update core examples

---
 packages/core/README.md                       |  7 +-
 packages/core/examples/basic.html             |  4 +-
 packages/core/examples/canvas.html            |  4 +-
 packages/core/examples/repl.html              | 90 -------------------
 packages/core/examples/scheduled.html         | 44 ---------
 packages/core/examples/vanilla.html           | 40 ++++-----
 .../core/examples/vite-vanilla-repl/main.js   | 13 ++-
 .../examples/vite-vanilla-repl/package.json   |  1 +
 .../core/examples/vite-vanilla-repl/tune.mjs  | 10 +--
 packages/core/examples/without-audio.html     | 65 --------------
 pnpm-lock.yaml                                | 15 ++++
 pnpm-workspace.yaml                           |  3 +-
 12 files changed, 48 insertions(+), 248 deletions(-)
 delete mode 100644 packages/core/examples/repl.html
 delete mode 100644 packages/core/examples/scheduled.html
 delete mode 100644 packages/core/examples/without-audio.html

diff --git a/packages/core/README.md b/packages/core/README.md
index 13b80682..8e42800e 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -33,6 +33,7 @@ b: 3/2 - 7/4
 c: 7/4 - 2
 ```
 
-- [play with @strudel.cycles/core on codesandbox](https://codesandbox.io/s/strudel-core-test-qmz6qr?file=/src/index.js).
-- [open color pattern example](https://raw.githack.com/tidalcycles/strudel/package-examples/packages/core/examples/canvas.html)
-- [open minimal repl example](https://raw.githack.com/tidalcycles/strudel/package-examples/packages/core/examples/metro.html)
+- [play with @strudel.cycles/core on codesandbox](https://codesandbox.io/s/strudel-core-test-forked-9ywhv7?file=/src/index.js).
+- [open color pattern example](https://raw.githack.com/tidalcycles/strudel/main/packages/core/examples/canvas.html)
+- [open minimal repl example](https://raw.githack.com/tidalcycles/strudel/main/packages/core/examples/vanilla.html)
+- [open minimal vite example](./examples/vite-vanilla-repl/)
\ No newline at end of file
diff --git a/packages/core/examples/basic.html b/packages/core/examples/basic.html
index fad59d1b..97508132 100644
--- a/packages/core/examples/basic.html
+++ b/packages/core/examples/basic.html
@@ -1,13 +1,13 @@
 <input
   type="text"
   id="text"
-  value="cat('a', 'b')"
+  value="seq('a', ['b', 'c'])"
   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');
+  const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8');
   Object.assign(window, strudel); // assign all strudel functions to global scope to use with eval
   const input = document.getElementById('text');
   const getEvents = () => {
diff --git a/packages/core/examples/canvas.html b/packages/core/examples/canvas.html
index 736c9a22..36d2b8aa 100644
--- a/packages/core/examples/canvas.html
+++ b/packages/core/examples/canvas.html
@@ -2,13 +2,13 @@
   <input
     type="text"
     id="text"
-    value="cat('orange', 'indigo')"
+    value="seq('tomato', 'indigo', ['white', 'steelblue']).fast(4)"
     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');
+    const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8');
     // this adds all strudel functions to the global scope, to be used by eval
     Object.assign(window, strudel);
     // setup elements
diff --git a/packages/core/examples/repl.html b/packages/core/examples/repl.html
deleted file mode 100644
index cc8dd2f5..00000000
--- a/packages/core/examples/repl.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<div style="position: absolute; bottom: 0; right: 0; padding: 4px; width: 100vw; display: flex">
-  <button id="start" style="font-size: 2em">start</button>
-  <button id="stop" style="font-size: 2em">stop</button>
-  <button id="slower" style="font-size: 2em">slower</button>
-  <button id="faster" style="font-size: 2em">faster</button>
-</div>
-<textarea
-  style="font-size: 2em; background: #052b49; color: #fff; 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 '@strudel.cycles/core';
-
-  const { cat, State, TimeSpan, Scheduler, getPlayableNoteValue, getFreq } = strudel;
-  Object.assign(window, strudel); // add strudel to eval scope
-
-  const ctx = new AudioContext();
-  const scheduler = new Scheduler({
-    // audioContext: getAudioContext(),
-    interval: 0.1,
-    onTrigger: (hap, time, duration) => {
-      const freq = getFrequency(hap);
-      const osc = ctx.createOscillator();
-      const gain = 0.2;
-      osc.frequency.value = freq;
-      osc.type = 'triangle';
-      const onset = ctx.currentTime + time;
-      const offset = onset + duration;
-      const attack = 0.05;
-      const release = 0.05;
-      osc.start(onset);
-      osc.stop(offset + release);
-
-      const g = ctx.createGain();
-      g.gain.setValueAtTime(gain, onset);
-      g.gain.linearRampToValueAtTime(gain, onset + attack);
-      g.gain.setValueAtTime(gain, offset - release);
-      g.gain.linearRampToValueAtTime(0, offset);
-      osc.connect(g);
-      g.connect(ctx.destination);
-    },
-  });
-
-  let initialCode = `stack('c4','e4',cat('g4','a4','b4','a4'))
-.add(cat(0,1,2,3,4,3,2,1).slow(8))
-.fast(2)
-.cps(tri.range(1,8).slow(32))`;
-
-  try {
-    const base64 = decodeURIComponent(window.location.href.split('#')[1]);
-    initialCode = atob(base64);
-  } catch (err) {
-    console.warn('failed to decode', err);
-  }
-  const input = document.getElementById('text');
-  input.value = initialCode;
-  const evaluate = () => {
-    try {
-      const pattern = eval(input.value);
-      scheduler.setPattern(pattern);
-      window.location.hash = '#' + encodeURIComponent(btoa(input.value)); // update url hash
-    } catch (err) {
-      console.warn(err);
-    }
-  };
-  evaluate();
-  input.addEventListener('input', () => evaluate());
-  document.getElementById('start').addEventListener('click', async () => {
-    await ctx.resume();
-    scheduler.start();
-  });
-  document.getElementById('stop').addEventListener('click', () => scheduler.stop());
-  document.getElementById('slower').addEventListener('click', () => scheduler.setCps(scheduler.cps - 0.1));
-  document.getElementById('faster').addEventListener('click', () => scheduler.setCps(scheduler.cps + 0.1));
-</script>
-<!--
-  sequence(1,2).mul(55/2) // frequencies
-  .mul(slowcat(1,2))
-  .mul(slowcat(1,3/2,4/3,5/3).slow(8))
-  .fast(3)
-  .freq()
-  .velocity(.5)
-  .s('sawtooth')
-  .cutoff(800)
-  .out()
--->
diff --git a/packages/core/examples/scheduled.html b/packages/core/examples/scheduled.html
deleted file mode 100644
index e27db1d0..00000000
--- a/packages/core/examples/scheduled.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<input
-  type="text"
-  id="text"
-  value="seq('c3','eb3','g3').note().s('sawtooth').out()"
-  style="width: 100%; font-size: 2em; outline: none; margin-bottom: 10px"
-  spellcheck="false"
-/>
-<button id="start">play</button>
-<div id="output"></div>
-<script type="module">
-  const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@latest');
-
-  const controls = await import('https://cdn.skypack.dev/@strudel.cycles/core@latest/controls.mjs');
-  const { getAudioContext, Scheduler } = await import('https://cdn.skypack.dev/@strudel.cycles/webaudio@latest');
-  let scheduler;
-
-  const audioContext = getAudioContext();
-  const latency = 0.2;
-
-  Object.assign(window, strudel);
-  Object.assign(window, controls.default);
-  scheduler = new Scheduler({
-    audioContext,
-    interval: 0.1,
-    latency,
-    onEvent: (hap) => {
-      if (!hap.context.onTrigger) {
-        console.warn('no output chosen. use one of .out() .webdirt() .osc()');
-      }
-    },
-  });
-  let started;
-  document.getElementById('start').addEventListener('click', async () => {
-    const code = document.getElementById('text').value;
-    const pattern = eval(code);
-    const events = pattern._firstCycleValues;
-    console.log(code, '->', events);
-    scheduler.setPattern(pattern);
-    if (!started) {
-      scheduler.start();
-      started = true;
-    }
-  });
-</script>
diff --git a/packages/core/examples/vanilla.html b/packages/core/examples/vanilla.html
index 1f9b1281..233f76f7 100644
--- a/packages/core/examples/vanilla.html
+++ b/packages/core/examples/vanilla.html
@@ -6,46 +6,36 @@
     <title>Buildless Vanilla Strudel REPL</title>
   </head>
   <body style="margin: 0; background: #222">
-    <div style="display: grid; height: 100vh">
+    <div style="display: grid; height: 100vh; grid-template-rows: 32px auto">
+      <button id="start" style="width: 100vw; height: 32px">evaluate</button>
       <textarea
         id="text"
         style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
         spellcheck="false"
       ></textarea>
     </div>
-    <button
-      id="start"
-      style="
-        position: absolute;
-        border-radius: 10px;
-        top: 20px;
-        right: 20px;
-        padding: 20px;
-        border: 2px solid white;
-        background: transparent;
-        color: white;
-        cursor: pointer;
-      "
-    >
-      evaluate
-    </button>
     <div id="output"></div>
     <script type="module">
-      import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel.cycles/core@0.3.2';
-      import { mini } from 'https://cdn.skypack.dev/@strudel.cycles/mini@0.3.2';
-      import { transpiler } from 'https://cdn.skypack.dev/@strudel.cycles/transpiler@0.3.2';
-      import { getAudioContext, webaudioOutput } from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.3.3';
+      import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel.cycles/core@0.6.8';
+      import { mini } from 'https://cdn.skypack.dev/@strudel.cycles/mini@0.6.0';
+      import { transpiler } from 'https://cdn.skypack.dev/@strudel.cycles/transpiler@0.6.0';
+      import {
+        getAudioContext,
+        webaudioOutput,
+        initAudioOnFirstClick,
+      } from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.6.0';
 
+      initAudioOnFirstClick();
       const ctx = getAudioContext();
       const input = document.getElementById('text');
       input.innerHTML = getTune();
 
       evalScope(
         controls,
-        import('https://cdn.skypack.dev/@strudel.cycles/core@0.3.2'),
-        import('https://cdn.skypack.dev/@strudel.cycles/mini@0.3.2'),
-        import('https://cdn.skypack.dev/@strudel.cycles/tonal@0.3.3'),
-        import('https://cdn.skypack.dev/@strudel.cycles/webaudio@0.3.3'),
+        import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8'),
+        import('https://cdn.skypack.dev/@strudel.cycles/mini@0.6.0'),
+        import('https://cdn.skypack.dev/@strudel.cycles/tonal@0.6.0'),
+        import('https://cdn.skypack.dev/@strudel.cycles/webaudio@0.6.0'),
       );
 
       const { evaluate } = repl({
diff --git a/packages/core/examples/vite-vanilla-repl/main.js b/packages/core/examples/vite-vanilla-repl/main.js
index 3724ef95..76203d06 100644
--- a/packages/core/examples/vite-vanilla-repl/main.js
+++ b/packages/core/examples/vite-vanilla-repl/main.js
@@ -1,12 +1,12 @@
-import { controls, repl, evalScope, setStringParser } from '@strudel.cycles/core';
-import { mini } from '@strudel.cycles/mini';
-import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
-// import { transpiler } from '@strudel.cycles/transpiler';
+import { controls, repl, evalScope } from '@strudel.cycles/core';
+import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel.cycles/webaudio';
+import { transpiler } from '@strudel.cycles/transpiler';
 import tune from './tune.mjs';
 
 const ctx = getAudioContext();
 const input = document.getElementById('text');
 input.innerHTML = tune;
+initAudioOnFirstClick();
 
 evalScope(
   controls,
@@ -16,14 +16,13 @@ evalScope(
   import('@strudel.cycles/tonal'),
 );
 
-setStringParser(mini);
-
 const { evaluate } = repl({
   defaultOutput: webaudioOutput,
   getTime: () => ctx.currentTime,
-  // transpiler,
+  transpiler,
 });
 document.getElementById('start').addEventListener('click', () => {
   ctx.resume();
+  console.log('eval', input.value);
   evaluate(input.value);
 });
diff --git a/packages/core/examples/vite-vanilla-repl/package.json b/packages/core/examples/vite-vanilla-repl/package.json
index 854e112b..01510a34 100644
--- a/packages/core/examples/vite-vanilla-repl/package.json
+++ b/packages/core/examples/vite-vanilla-repl/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/mini": "workspace:*",
+    "@strudel.cycles/transpiler": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",
     "@strudel.cycles/tonal": "workspace:*"
   }
diff --git a/packages/core/examples/vite-vanilla-repl/tune.mjs b/packages/core/examples/vite-vanilla-repl/tune.mjs
index 88e8a7fe..acdc0a62 100644
--- a/packages/core/examples/vite-vanilla-repl/tune.mjs
+++ b/packages/core/examples/vite-vanilla-repl/tune.mjs
@@ -1,4 +1,4 @@
-/* export default `await samples('github:tidalcycles/Dirt-Samples/master')
+export default `await samples('github:tidalcycles/Dirt-Samples/master')
 
 stack(
   // amen
@@ -29,11 +29,3 @@ stack(
   ,
   n("0 1").s("east").delay(.5).degradeBy(.8).speed(rand.range(.5,1.5))
 ).reset("<x@7 x(5,8)>")`;
- */
-
-export default `stack(
-  n("c3 [eb3,g3]")
-  .delay("<0 .5>")
-  .delaytime(".16 | .33")
-  .delayfeedback(".6 | .8")
-).sometimes(x=>x.speed("-1"))`;
diff --git a/packages/core/examples/without-audio.html b/packages/core/examples/without-audio.html
deleted file mode 100644
index 9db37c5c..00000000
--- a/packages/core/examples/without-audio.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Buildless Vanilla Strudel REPL</title>
-  </head>
-  <body style="margin: 0; background: #222">
-    <div style="display: grid; height: 100vh">
-      <textarea
-        id="text"
-        style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
-        spellcheck="false"
-      >
-// LOADING</textarea
-      >
-    </div>
-    <button
-      id="start"
-      style="
-        position: absolute;
-        border-radius: 10px;
-        top: 20px;
-        right: 20px;
-        padding: 20px;
-        border: 2px solid white;
-        background: transparent;
-        color: white;
-        cursor: pointer;
-      "
-    >
-      evaluate
-    </button>
-    <div id="output"></div>
-    <script type="module">
-      import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel.cycles/core@0.4.1';
-      import { transpiler } from 'https://cdn.skypack.dev/@strudel.cycles/transpiler@0.4.1';
-
-      const modules = [
-        import('https://cdn.skypack.dev/@strudel.cycles/core@0.4.1'),
-        import('https://cdn.skypack.dev/@strudel.cycles/mini@0.4.1'),
-      ];
-
-      const input = document.getElementById('text');
-
-      Promise.all(modules).then(() => {
-        input.innerHTML = `note("<c3 [d3 e3]>").cutoff(1000)`;
-        document.getElementById('start').addEventListener('click', () => {
-          evaluate(input.value);
-        });
-      });
-      evalScope(controls, ...modules);
-
-      const { evaluate } = repl({
-        defaultOutput: (hap, deadline, duration) => {
-          console.log(deadline, duration, hap.value);
-        },
-        getTime: () => Date.now() / 1000,
-        transpiler,
-        beforeEval: (code) => console.log('evaluate', code),
-        afterEval: (code) => {},
-      });
-    </script>
-  </body>
-</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7ebf8bab..210717b1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,21 @@ importers:
       vite: 3.2.5
       vitest: 0.25.8
 
+  packages/core/examples/vite-vanilla-repl:
+    specifiers:
+      '@strudel.cycles/core': workspace:*
+      '@strudel.cycles/mini': workspace:*
+      '@strudel.cycles/tonal': workspace:*
+      '@strudel.cycles/webaudio': workspace:*
+      vite: ^3.2.0
+    dependencies:
+      '@strudel.cycles/core': link:../..
+      '@strudel.cycles/mini': link:../../../mini
+      '@strudel.cycles/tonal': link:../../../tonal
+      '@strudel.cycles/webaudio': link:../../../webaudio
+    devDependencies:
+      vite: 3.2.5
+
   packages/csound:
     specifiers:
       '@csound/browser': ^6.18.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index fd397ad5..c89e911c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,4 +1,5 @@
 packages:
   # all packages in direct subdirs of packages/
   - "packages/*"
-  - "website/"
\ No newline at end of file
+  - "website/"
+  - "packages/core/examples/vite-vanilla-repl"
\ No newline at end of file