add my-patterns

2026-01-11 13:48:34 +00:00 · 2022-12-28 15:39:42 +01:00 · 2022-12-28 15:39:42 +01:00 · cb8b65f6f3
commit cb8b65f6f3
parent 3944a8ed54
4 changed files with 104 additions and 0 deletions
--- a/my-patterns/README.md
+++ b/my-patterns/README.md
@ -0,0 +1,8 @@
+# my-patterns
+
+This directory can be used to save your own patterns.
+
+0. fork the strudel repo
+1. Save one or more .txt files here.
+2. and run `npm run repl`
+3. open `http://localhost:3000/my-patterns` !
--- a/website/src/pages/my-patterns/[name].png.js
+++ b/website/src/pages/my-patterns/[name].png.js
@ -0,0 +1,29 @@
+import { createCanvas } from 'canvas';
+import { pianoroll } from '@strudel.cycles/core';
+import { evaluate } from '@strudel.cycles/transpiler';
+import '../../../../test/runtime.mjs';
+import { getMyPatterns } from './list.json';
+
+export async function get({ params, request }) {
+  const patterns = await getMyPatterns();
+  const { name } = params;
+  const tune = patterns[name];
+  const { pattern } = await evaluate(tune);
+  const haps = pattern.queryArc(0, 4);
+  const canvas = createCanvas(800, 800);
+  const ctx = canvas.getContext('2d');
+  pianoroll({ time: 4, haps, ctx, playhead: 1, fold: 1, background: 'transparent', playheadColor: 'transparent' });
+  const buffer = canvas.toBuffer('image/png');
+  return {
+    body: buffer,
+    encoding: 'binary',
+  };
+}
+export async function getStaticPaths() {
+  const patterns = await getMyPatterns();
+  return Object.keys(patterns).map((name) => ({
+    params: {
+      name,
+    },
+  }));
+}
--- a/website/src/pages/my-patterns/index.astro
+++ b/website/src/pages/my-patterns/index.astro
@ -0,0 +1,29 @@
+---
+import { getMyPatterns } from './list.json';
+
+import { Content } from '../../../../my-patterns/README.md';
+
+const myPatterns = await getMyPatterns();
+---
+
+<body class="bg-slate-800">
+  {
+    Object.keys(myPatterns).length === 0 && (
+      <div class="prose prose-invert p-2">
+        <Content />
+      </div>
+    )
+  }
+  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 p-2 select-none">
+    {
+      Object.entries(myPatterns).map(([name, tune]) => (
+        <a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`/#${btoa(tune)}`}>
+          <div class="absolute w-full h-full flex justify-center items-center">
+            <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
+          </div>
+          <img src={`/my-patterns/${name}.png`} />
+        </a>
+      ))
+    }
+  </div>
+</body>
--- a/website/src/pages/my-patterns/list.json.js
+++ b/website/src/pages/my-patterns/list.json.js
@ -0,0 +1,38 @@
+import fs from 'fs';
+import path from 'path';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+async function readTextFiles(folder) {
+  const absolutePath = path.resolve(__dirname, folder);
+
+  // Use `fs.promises.readdir()` to get a list of all the files in the folder
+  const files = await fs.promises.readdir(absolutePath);
+
+  // Filter the list of files to only include those with a `.txt` extension
+  const textFiles = files.filter((file) => file.endsWith('.txt'));
+  // Initialize an empty object to store the file contents
+  const fileContents = {};
+
+  // Use `fs.promises.readFile()` to read the contents of each text file
+  for (const file of textFiles) {
+    const filePath = `${absolutePath}/${file}`;
+    const data = await fs.promises.readFile(filePath, 'utf8');
+    fileContents[file] = data;
+  }
+  // Return the object with the filenames as keys and the file contents as values
+  return fileContents;
+}
+
+export function getMyPatterns() {
+  return readTextFiles('../../../../my-patterns');
+}
+
+export async function get({ params, request }) {
+  const all = await getMyPatterns();
+  return {
+    body: JSON.stringify(all),
+  };
+}