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

remove canvas dependency

Browse source
This commit is contained in:
Felix Roos 2024-03-21 08:35:44 +01:00
parent f5c087fc2a
commit 4511732252
7 changed files with 87 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

8
website/src/pages/examples/index.astro
View file

@ -15,14 +15,16 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
<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={`${baseNoTrailing}/#${btoa(tune)}`}>
<a
class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative block w-full h-[160px]"
href={`${baseNoTrailing}/#${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">{getMetadata(tune)['title'] || name}</span>
</div>
<img src={`${baseNoTrailing}/img/example-${name}.png`} />
</a>
))
}
</div>
</body>
../../metadata_parser
../../metadata_parser

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

@ -1,24 +0,0 @@
import { createCanvas } from 'canvas';
import { pianoroll } from '@strudel/draw';
import { evaluate } from '@strudel/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 new Response(buffer);
}
export function getStaticPaths() {
return Object.keys(tunes).map((name) => ({
params: {
name,
},
}));
}

26
website/src/pages/swatch/[name].png.js
View file

@ -1,26 +0,0 @@
import { createCanvas } from 'canvas';
import { pianoroll } from '@strudel/draw';
import { evaluate } from '@strudel/transpiler';
import '../../../../test/runtime.mjs';
import { getMyPatterns } from '../../my_patterns';
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 new Response(buffer);
}
export async function getStaticPaths() {
const patterns = await getMyPatterns();
return Object.keys(patterns).map((name) => ({
params: {
name,
},
}));
}

3
website/src/pages/swatch/index.astro
View file

@ -25,13 +25,12 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
{
Object.entries(myPatterns).map(([name, tune]) => (
<a
class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative"
class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative block w-full h-[160px]"
href={`${baseNoTrailing}/#${btoa(tune as string)}`}
>
<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={`${baseNoTrailing}/swatch/${name}.png`} />
</a>
))
}