Commit cb754fe1 authored by Tomáš Hübelbauer's avatar Tomáš Hübelbauer

Colorize and fade pressed keys

parent c4da68ef
......@@ -152,8 +152,8 @@ function* getTempos(track) {
const channelColors = [
undefined,
[ '#abcdef', '#0080ff' ],
[ '#fedcba', '#ff8000' ],
[ [ 171, 205, 239 ], [ 0, 128, 255 ] ],
[ [ 254, 220, 186 ], [ 255, 128, 0 ] ],
];
// https://stackoverflow.com/a/23071105/2715716
......@@ -174,6 +174,7 @@ function render(canvas, channels, tempos, time) {
const keyboardHeight = height / 5; // 20 % of the height
height -= keyboardHeight;
let pressedNotes = {};
let channelNumber = 0;
for (const notes of channels) {
channelNumber++;
......@@ -182,11 +183,19 @@ function render(canvas, channels, tempos, time) {
for (const note of notes) {
const { x, y, w, h } = getNoteXYWH(note, unit, top);
if (y + h < 0 || y > height) continue;
let color;
switch (note.color) {
case COLOR_WHITE: context.fillStyle = channelColors[channelNumber][0]; break;
case COLOR_BLACK: context.fillStyle = channelColors[channelNumber][1]; break;
case COLOR_WHITE: color = channelColors[channelNumber][0]; break;
case COLOR_BLACK: color = channelColors[channelNumber][1]; break;
default: throw new Error(`Invalid color ${note.color}, should be ${COLOR_WHITE} or ${COLOR_BLACK}.`);
}
if (y <= height && y + h > height) {
const ratio = 1 - (((y + h) - height) / h);
pressedNotes[note.name + note.octave] = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${ratio})`;
}
context.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`;
context.fillRect(x, y, w, h);
}
......@@ -218,6 +227,11 @@ function render(canvas, channels, tempos, time) {
}
context.fillRect(number * unit, height, noteWidth, noteHeight);
if (pressedNotes[note.name + note.octave]) {
context.fillStyle = pressedNotes[note.name + note.octave];
context.fillRect(number * unit, height, noteWidth, noteHeight);
}
context.strokeRect(number * unit, height, noteWidth, noteHeight);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment