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

add lookaheadCycles to fix pianoroll

Browse Source
This commit is contained in:
Felix Roos 2022-03-12 21:58:17 +01:00
parent ffd6ab2cc9
commit 92937fa72e
2 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
repl/src/draw.mjs
View File

@ -14,7 +14,7 @@ export const getDrawContext = (id = 'test-canvas') => {
return canvas.getContext('2d'); return canvas.getContext('2d');
}; };
Pattern.prototype.draw = function (callback, queryDuration) { Pattern.prototype.draw = function (callback, cycleSpan, lookaheadCycles = 1) {
if (window.strudelAnimation) { if (window.strudelAnimation) {
cancelAnimationFrame(window.strudelAnimation); cancelAnimationFrame(window.strudelAnimation);
} }
@ -23,16 +23,16 @@ Pattern.prototype.draw = function (callback, queryDuration) {
events = []; events = [];
const animate = (time) => { const animate = (time) => {
const t = Tone.getTransport().seconds; const t = Tone.getTransport().seconds;
if (queryDuration) { if (cycleSpan) {
const currentCycle = Math.floor(t / queryDuration); const currentCycle = Math.floor(t / cycleSpan);
if (cycle !== currentCycle) { if (cycle !== currentCycle) {
cycle = currentCycle; cycle = currentCycle;
const begin = currentCycle * queryDuration; const begin = currentCycle * cycleSpan;
const end = (currentCycle + 1) * queryDuration; const end = (currentCycle + lookaheadCycles) * cycleSpan;
events = this.add(0).query(new State(new TimeSpan(begin, end))); events = this.add(0).query(new State(new TimeSpan(begin, end)));
} }
} }
callback(ctx, events, t, queryDuration, time); callback(ctx, events, t, cycleSpan, time);
window.strudelAnimation = requestAnimationFrame(animate); window.strudelAnimation = requestAnimationFrame(animate);
}; };
requestAnimationFrame(animate); requestAnimationFrame(animate);

32
repl/src/pianoroll.mjs
View File

@ -12,19 +12,23 @@ Pattern.prototype.pianoroll = function ({
const h = window.innerHeight; const h = window.innerHeight;
const midiRange = maxMidi - minMidi + 1; const midiRange = maxMidi - minMidi + 1;
const height = h / midiRange; const height = h / midiRange;
this.draw((ctx, events, t) => { this.draw(
ctx.fillStyle = background; (ctx, events, t) => {
ctx.fillRect(0, 0, w, h); ctx.fillStyle = background;
events.forEach((event) => { ctx.fillRect(0, 0, w, h);
const isActive = event.whole.begin <= t && event.whole.end >= t; events.forEach((event) => {
ctx.fillStyle = isActive ? active : inactive; const isActive = event.whole.begin <= t && event.whole.end >= t;
const x = Math.round((event.whole.begin / timeframe) * w); ctx.fillStyle = isActive ? active : inactive;
const width = Math.round(((event.whole.end - event.whole.begin) / timeframe) * w); const x = Math.round((event.whole.begin / timeframe) * w);
const y = Math.round(h - ((Number(event.value) - minMidi) / midiRange) * h); const width = Math.round(((event.whole.end - event.whole.begin) / timeframe) * w);
const offset = (t / timeframe) * w; const y = Math.round(h - ((Number(event.value) - minMidi) / midiRange) * h);
const margin = 0; const offset = (t / timeframe) * w;
ctx.fillRect(x - offset + margin + 1, y + 1, width - 2, height - 2); const margin = 0;
}); ctx.fillRect(x - offset + margin + 1, y + 1, width - 2, height - 2);
}, timeframe * 2); });
},
timeframe,
2 // lookaheadCycles
);
return this; return this;
}; };