elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-24 12:08:28 +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 { funk42 } from './tunes';
import { pianoroll, getDrawOptions, Drawer } from '@strudel.cycles/core'; import { pianoroll, getDrawOptions, Drawer } from '@strudel.cycles/core';
import './style.css'; import './style.css';
import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
const repl = initStrudel(); const initAudio = initAudioOnFirstClick();
const canvas = document.getElementById('roll');
canvas.width = canvas.width * 2;
canvas.height = canvas.height * 2;
const editor = new StrudelMirror({ const editor = new StrudelMirror({
root: document.getElementById('editor'), root: document.getElementById('editor'),
@ -18,8 +16,26 @@ const editor = new StrudelMirror({
onStop, 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() { async function onEvaluate() {
const { evaluate, scheduler } = await repl; const { evaluate, scheduler } = await repl;
await initAudio;
editor.flash(); editor.flash();
if (!scheduler.started) { if (!scheduler.started) {
scheduler.stop(); scheduler.stop();
@ -37,15 +53,17 @@ async function onStop() {
drawer.stop(); drawer.stop();
} }
const drawTime = [-2, 2];
function drawPianoroll(haps, time) {
pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0 }) });
}
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
let drawer = new Drawer( let drawer = new Drawer((haps, time) => {
(haps, time, { drawTime }) => { const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.whole.end);
const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.whole.end); editor.highlight(currentFrame);
editor.highlight(currentFrame); drawPianoroll(haps, time);
pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0 }) }); }, drawTime);
},
[-2, 2],
);
document.getElementById('play').addEventListener('click', () => onEvaluate()); document.getElementById('play').addEventListener('click', () => onEvaluate());
document.getElementById('stop').addEventListener('click', async () => onStop()); 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(); const ctx = getAudioContext();
export async function initStrudel(options = {}) { export async function initStrudel(options = {}) {
@ -18,7 +17,7 @@ export async function initStrudel(options = {}) {
import('@strudel.cycles/webaudio'), import('@strudel.cycles/webaudio'),
); );
await Promise.all([initAudio, loadModules, registerSynthSounds(), registerSoundfonts()]); await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
return repl({ return repl({
defaultOutput: webaudioOutput, defaultOutput: webaudioOutput,