add strudel starter template

2026-08-02 13:46:06 -04:00 · 2022-06-16 16:02:43 +02:00
parent badc4bcc2f
commit c785c64599
7 changed files with 1287 additions and 0 deletions
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,4 @@
+# @strudel.cycles/starter
+
+This is a minimal starter template for a project that uses strudel.
+See main.js for the code.
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Strudel Starter</title>
+  </head>
+  <body style="margin: 0; padding: 0">
+    <div id="container" style="background-color: indigo; display: flex; justify-content: center; align-items: center; height: 100vh">
+      <center>
+        <h1>Strudel Starter Template</h1>
+        <button id="start" style="font-size: 3em">start</button>
+      </center>
+    </div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,30 @@
+import { evaluate, evalScope } from '@strudel.cycles/eval';
+import { Scheduler, getAudioContext } from '@strudel.cycles/webaudio';
+
+const ac = getAudioContext();
+
+const scheduler = new Scheduler({
+  audioContext: ac,
+  interval: 0.1,
+  onEvent: (e) => {
+    // console.log('e', e.show());
+    const oscillator = ac.createOscillator();
+    oscillator.type = 'sawtooth';
+    oscillator.frequency.setValueAtTime(e.value, ac.currentTime); // value in hertz
+    oscillator.connect(ac.destination);
+    oscillator.start(e.whole.begin);
+    oscillator.stop(e.whole.end);
+  },
+});
+
+await evalScope(
+  import('@strudel.cycles/core'),
+  import('@strudel.cycles/mini'),
+  // import other strudel packages here
+); // add strudel to eval scope
+
+document.getElementById('start').addEventListener('click', async () => {
+  const { pattern } = await evaluate(`"55 [110,165] 110 [220,275]".mul("<1 <3/4 2/3>>").struct("x(3,8)")`);
+  scheduler.setPattern(pattern);
+  scheduler.start();
+});
@@ -0,0 +1,17 @@
+{
+  "name": "@strudel.cycles/starter",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^2.9.9"
+  },
+  "dependencies": {
+    "@strudel.cycles/eval": "^0.1.1",
+    "@strudel.cycles/webaudio": "^0.1.1"
+  }
+}