elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-24 03:58:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #163 from tidalcycles/pianoroll-fixes

Browse Source 
Pianoroll fixes
This commit is contained in:
Felix Roos 2022-08-02 23:04:34 +02:00 committed by GitHub
commit 12f8902c5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/tone/pianoroll.mjs
View File

@ -22,10 +22,14 @@ Pattern.prototype.pianoroll = function ({
flipTime = 0, flipTime = 0,
flipValues = 0, flipValues = 0,
hideNegative = false, hideNegative = false,
inactive = '#C9E597', // inactive = '#C9E597',
// inactive = '#FFCA28',
inactive = '#7491D2',
active = '#FFCA28', active = '#FFCA28',
// background = '#2A3236', // background = '#2A3236',
background = 'transparent', background = 'transparent',
smear = 0,
playheadColor = 'white',
minMidi = 10, minMidi = 10,
maxMidi = 90, maxMidi = 90,
autorange = 0, autorange = 0,
@ -58,12 +62,14 @@ Pattern.prototype.pianoroll = function ({
flipTime && timeRange.reverse(); flipTime && timeRange.reverse();
flipValues && valueRange.reverse(); flipValues && valueRange.reverse();
const playheadPosition = scale(-from / timeExtent, ...timeRange);
this.draw( this.draw(
(ctx, events, t) => { (ctx, events, t) => {
ctx.fillStyle = background; ctx.fillStyle = background;
ctx.clearRect(0, 0, w, h); ctx.globalAlpha = 1; // reset!
ctx.fillRect(0, 0, w, h); if (!smear) {
ctx.clearRect(0, 0, w, h);
ctx.fillRect(0, 0, w, h);
}
const inFrame = (event) => const inFrame = (event) =>
(!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.whole.end >= t + from; (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.whole.end >= t + from;
events.filter(inFrame).forEach((event) => { events.filter(inFrame).forEach((event) => {
@ -71,15 +77,6 @@ Pattern.prototype.pianoroll = function ({
ctx.fillStyle = event.context?.color || inactive; ctx.fillStyle = event.context?.color || inactive;
ctx.strokeStyle = event.context?.color || active; ctx.strokeStyle = event.context?.color || active;
ctx.globalAlpha = event.context.velocity ?? 1; ctx.globalAlpha = event.context.velocity ?? 1;
ctx.beginPath();
if (vertical) {
ctx.moveTo(0, playheadPosition);
ctx.lineTo(valueAxis, playheadPosition);
} else {
ctx.moveTo(playheadPosition, 0);
ctx.lineTo(playheadPosition, valueAxis);
}
ctx.stroke();
const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange); const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
let durationPx = scale(event.duration / timeExtent, 0, timeAxis); let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
const value = getValue(event); const value = getValue(event);
@ -107,6 +104,19 @@ Pattern.prototype.pianoroll = function ({
} }
isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords); isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
}); });
ctx.globalAlpha = 1; // reset!
const playheadPosition = scale(-from / timeExtent, ...timeRange);
// draw playhead
ctx.strokeStyle = playheadColor;
ctx.beginPath();
if (vertical) {
ctx.moveTo(0, playheadPosition);
ctx.lineTo(valueAxis, playheadPosition);
} else {
ctx.moveTo(playheadPosition, 0);
ctx.lineTo(playheadPosition, valueAxis);
}
ctx.stroke();
}, },
{ {
from: from - overscan, from: from - overscan,