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

pianoroll: flipTime + flipValues

Browse source
This commit is contained in:
Felix Roos 2022-06-05 23:38:22 +02:00
parent ba5cf5ba83
commit ac39a609d7
1 changed files with 11 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/tone/pianoroll.mjs
View file

@ -10,8 +10,10 @@ const scale = (normalized, min, max) => normalized * (max - min) + min;
Pattern.prototype.pianoroll = function ({ Pattern.prototype.pianoroll = function ({
cycles = 4, cycles = 4,
playhead = .5, playhead = 0.5,
overscan = 1, overscan = 1,
flipTime = 0,
flipValues = 0,
inactive = '#C9E597', inactive = '#C9E597',
active = '#FFCA28', active = '#FFCA28',
// background = '#2A3236', // background = '#2A3236',
@ -40,12 +42,14 @@ Pattern.prototype.pianoroll = function ({
const timeAxis = vertical ? h : w; const timeAxis = vertical ? h : w;
const valueAxis = vertical ? w : h; const valueAxis = vertical ? w : h;
// scale normalized value n to max pixels, flippable // scale normalized value n to max pixels, flippable
const timeRange = vertical ? [timeAxis, 0] : [0, timeAxis]; // pixel range for time let timeRange = vertical ? [timeAxis, 0] : [0, timeAxis]; // pixel range for time
const timeExtent = to - from; // number of seconds that fit inside the canvas frame const timeExtent = to - from; // number of seconds that fit inside the canvas frame
const valueRange = vertical ? [0, valueAxis] : [valueAxis, 0]; // pixel range for values const valueRange = vertical ? [0, valueAxis] : [valueAxis, 0]; // pixel range for values
let valueExtent = maxMidi - minMidi + 1; // number of "slots" for values, overwritten if autorange true let valueExtent = maxMidi - minMidi + 1; // number of "slots" for values, overwritten if autorange true
let barThickness = valueAxis / valueExtent; // pixels per value, overwritten if autorange true let barThickness = valueAxis / valueExtent; // pixels per value, overwritten if autorange true
let foldValues = []; let foldValues = [];
flipTime && timeRange.reverse();
flipValues && valueRange.reverse();
// duration to px (on timeAxis) // duration to px (on timeAxis)
const playheadPosition = scale(-from / timeExtent, ...timeRange); const playheadPosition = scale(-from / timeExtent, ...timeRange);
@ -69,7 +73,7 @@ Pattern.prototype.pianoroll = function ({
ctx.lineTo(playheadPosition, valueAxis); ctx.lineTo(playheadPosition, valueAxis);
} }
ctx.stroke(); ctx.stroke();
const timePx = scale((event.whole.begin - 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 valuePx = scale( const valuePx = scale(
@ -81,19 +85,17 @@ Pattern.prototype.pianoroll = function ({
const offset = scale(t / timeExtent, ...timeRange); const offset = scale(t / timeExtent, ...timeRange);
let coords; let coords;
if (vertical) { if (vertical) {
// console.log('durationPx', durationPx);
// swap x/y and width/height of rect
coords = [ coords = [
valuePx + 1, // x valuePx + 1 - (flipValues ? barThickness : 0), // x
timeAxis - durationPx - offset + timePx + margin + 1, // y timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y
barThickness - 2, // width barThickness - 2, // width
durationPx - 2, // height durationPx - 2, // height
]; ];
// console.log(event.value, 'coords', coords); // console.log(event.value, 'coords', coords);
} else { } else {
coords = [ coords = [
timePx - offset + margin + 1, // x timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x
valuePx - barThickness + 1, // y valuePx + 1 - (flipValues ? 0 : barThickness), // y
durationPx - 2, // widith durationPx - 2, // widith
barThickness - 2, // height barThickness - 2, // height
]; ];