hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add examples page with prerendered swatches

Browse source
This commit is contained in:
Felix Roos 2022-12-28 14:40:53 +01:00
parent 1dd0ff13d8
commit 9f058bd88a
6 changed files with 380 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
website/src/pages/examples/index.astro Normal file
View file

@ -0,0 +1,18 @@
---
import * as tunes from '../../../src/repl/tunes.mjs';
---
<body class="bg-slate-800">
<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(tunes).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={`/img/example-${name}.png`} />
</a>
))
}
</div>
</body>

27
website/src/pages/img/example-[name].png.js Normal file
View file

@ -0,0 +1,27 @@
import { createCanvas } from 'canvas';
import { pianoroll } from '@strudel.cycles/core';
import { evaluate } from '@strudel.cycles/transpiler';
import '../../../../test/runtime.mjs';
import * as tunes from '../../repl/tunes.mjs';
export async function get({ params, request }) {
const { name } = params;
const tune = tunes[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 function getStaticPaths() {
return Object.keys(tunes).map((name) => ({
params: {
name,
},
}));
}

2
website/src/pages/learn/getting-started.mdx
View file

@ -42,6 +42,8 @@ This interactive tutorial will guide you through the basics of Strudel.
To see and hear what Strudel can do, visit the [Strudel REPL](https://strudel.tidalcycles.org/) and click the Shuffle icon in the top menu bar.
You can get a feel for Strudel by browsing and editing these examples and clicking the Refresh icon to update.
You can also browse through the examples [here](/examples).
Alternatively, you can get a taste of what Strudel can do by clicking play on this track:
<MiniRepl