elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-26 21:18:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

add my-patterns

Browse Source
This commit is contained in:
Felix Roos 2022-12-28 15:39:42 +01:00
parent 3944a8ed54
commit cb8b65f6f3
4 changed files with 104 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
my-patterns/README.md Normal file
View File

@ -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` !

29
website/src/pages/my-patterns/[name].png.js Normal file
View File

@ -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,
},
}));
}

29
website/src/pages/my-patterns/index.astro Normal file
View File

@ -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>

38
website/src/pages/my-patterns/list.json.js Normal file
View File

@ -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),
};
}