elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-11 13:48:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

vanilla-repl-cm6: draw first frame

Browse Source
This commit is contained in:
Felix Roos 2023-05-05 16:17:22 +02:00
parent 9807c4b7a1
commit 5b67fccb1b
2 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/core/examples/vite-vanilla-repl-cm6/main.js
View File

@ -5,11 +5,9 @@ import { initStrudel } from './strudel';
import { funk42 } from './tunes';
import { pianoroll, getDrawOptions, Drawer } from '@strudel.cycles/core';
import './style.css';
import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
const repl = initStrudel();
const canvas = document.getElementById('roll');
canvas.width = canvas.width * 2;
canvas.height = canvas.height * 2;
const initAudio = initAudioOnFirstClick();
const editor = new StrudelMirror({
root: document.getElementById('editor'),
@ -18,8 +16,26 @@ const editor = new StrudelMirror({
onStop,
});
async function drawFirstFrame(editor, repl) {
const { evaluate } = repl;
const pattern = await evaluate(editor.code, false);
const initialHaps = pattern.queryArc(0, drawTime[1]);
drawPianoroll(initialHaps, 0);
return repl;
}
const repl = initStrudel().then(async (repl) => {
await drawFirstFrame(editor, repl);
return repl;
});
const canvas = document.getElementById('roll');
canvas.width = canvas.width * 2;
canvas.height = canvas.height * 2;
async function onEvaluate() {
const { evaluate, scheduler } = await repl;
await initAudio;
editor.flash();
if (!scheduler.started) {
scheduler.stop();
@ -37,15 +53,17 @@ async function onStop() {
drawer.stop();
}
const drawTime = [-2, 2];
function drawPianoroll(haps, time) {
pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0 }) });
}
const ctx = canvas.getContext('2d');
let drawer = new Drawer(
(haps, time, { drawTime }) => {
const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.whole.end);
editor.highlight(currentFrame);
pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0 }) });
},
[-2, 2],
);
let drawer = new Drawer((haps, time) => {
const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.whole.end);
editor.highlight(currentFrame);
drawPianoroll(haps, time);
}, drawTime);
document.getElementById('play').addEventListener('click', () => onEvaluate());
document.getElementById('stop').addEventListener('click', async () => onStop());

5
packages/core/examples/vite-vanilla-repl-cm6/strudel.js
View File

@ -1,6 +1,5 @@
import { getAudioContext, webaudioOutput, initAudioOnFirstClick, registerSynthSounds } from '@strudel.cycles/webaudio';
import { getAudioContext, webaudioOutput, registerSynthSounds } from '@strudel.cycles/webaudio';
const initAudio = initAudioOnFirstClick();
const ctx = getAudioContext();
export async function initStrudel(options = {}) {
@ -18,7 +17,7 @@ export async function initStrudel(options = {}) {
import('@strudel.cycles/webaudio'),
);
await Promise.all([initAudio, loadModules, registerSynthSounds(), registerSoundfonts()]);
await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
return repl({
defaultOutput: webaudioOutput,