Add Velocity Mode
When toggled, the color of each note will be affected by its velocity. Suitable when practicing this kind of stuff: https://wiwi.video/w/uuwkerA14WnDnysFCh6q4z?start=11m1s
This commit is contained in:
jxzhe
parent
3377d1cf35
commit
810bae60b8
GPG key ID:
111C00916C1641E5
4 changed files with 68 additions and 34 deletions
16
globals.js
16
globals.js
|
|
@ -17,6 +17,7 @@ let bRadius = 4; // 黑鍵圓角(default: 4)
|
|||
let keyAreaY = 3; // 白鍵從 Y 軸座標多少開始？(default: 3)
|
||||
let keyAreaHeight = 70; // 白鍵多高？(default: 70)
|
||||
let rainbowMode = false; // 彩虹模式 (default: false)
|
||||
let velocityMode = false; // 力度模式 (default: false)
|
||||
let cc64now = 0; // 現在的踏板狀態
|
||||
let cc67now = 0;
|
||||
|
||||
|
|
@ -92,9 +93,9 @@ function noteOn(pitch, velocity) {
|
|||
totalIntensityScore += velocity;
|
||||
|
||||
// piano visualizer
|
||||
isKeyOn[pitch] = 1;
|
||||
isKeyOn[pitch] = velocity;
|
||||
if (nowPedaling) {
|
||||
isPedaled[pitch] = 1;
|
||||
isPedaled[pitch] = velocity;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -136,9 +137,12 @@ function toggleRainbowMode(cb) {
|
|||
select('#colorpicker').removeAttribute('disabled')
|
||||
}
|
||||
|
||||
function toggleVelocityMode(cb) {
|
||||
velocityMode = cb.checked;
|
||||
}
|
||||
|
||||
function changeColor() {
|
||||
keyOnColor = pedaledColor = color(select('#colorpicker').value());
|
||||
darkenedColor = keyOnColor.levels.map(x => floor(x * .7));
|
||||
pedaledColor = color(`rgb(${darkenedColor[0]}, ${darkenedColor[1]}, ${darkenedColor[2]})`)
|
||||
console.log(pedaledColor.levels);
|
||||
keyOnColor = color(select('#colorpicker').value());
|
||||
let darkenedColor = keyOnColor.levels.map(x => floor(x * .7));
|
||||
pedaledColor = color(`rgb(${darkenedColor[0]}, ${darkenedColor[1]}, ${darkenedColor[2]})`);
|
||||
}
|
||||
|
|
@ -31,7 +31,14 @@
|
|||
<div style="display: flex; align-items: center;">
|
||||
<span style="margin-right: 5px;">彩虹模式</span>
|
||||
<input type="checkbox" id="rainbow-mode-checkbox" onclick="toggleRainbowMode(this)">
|
||||
<label for="rainbow-mode-checkbox">
|
||||
<label for="rainbow-mode-checkbox" class="custom-checkbox">
|
||||
<span class="switch-txt" turnOn="On" turnOff="Off"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span style="margin-right: 5px;">力度模式</span>
|
||||
<input type="checkbox" id="velocity-mode-checkbox" onclick="toggleVelocityMode(this)">
|
||||
<label for="velocity-mode-checkbox" class="custom-checkbox">
|
||||
<span class="switch-txt" turnOn="On" turnOff="Off"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,16 +49,28 @@ function drawWhiteKeys() {
|
|||
for (let i = 21; i < 109; i++) {
|
||||
if (isBlack[i % 12] == 0) {
|
||||
// it's a white key
|
||||
if (isKeyOn[i] == 1 && !rainbowMode) {
|
||||
fill(keyOnColor); // keypressed
|
||||
} else if (isKeyOn[i] == 1 && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100, 100, 100); // rainbowMode
|
||||
} else if (isPedaled[i] == 1 && !rainbowMode) {
|
||||
fill(pedaledColor); // pedaled
|
||||
} else if (isPedaled[i] == 1 && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100, 70, 100); // pedaled rainbowMode
|
||||
if (velocityMode) {
|
||||
let m = max(isKeyOn[i], isPedaled[i]) * .9 + .1;
|
||||
if ((isKeyOn[i] || isPedaled[i]) && !rainbowMode) {
|
||||
let whitenedColor = keyOnColor.levels.map(x => floor(x * m + 255 * (1 - m)));
|
||||
fill(`rgb(${whitenedColor[0]}, ${whitenedColor[1]}, ${whitenedColor[2]})`); // keypressed
|
||||
} else if ((isKeyOn[i] || isPedaled[i]) && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100 * m, 100, 100); // rainbowMode
|
||||
} else {
|
||||
fill(0, 0, 100); // white key
|
||||
}
|
||||
} else {
|
||||
fill(0, 0, 100); // white key
|
||||
if (isKeyOn[i] && !rainbowMode) {
|
||||
fill(keyOnColor); // keypressed
|
||||
} else if (isKeyOn[i] && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100, 100, 100); // rainbowMode
|
||||
} else if (isPedaled[i] && !rainbowMode) {
|
||||
fill(pedaledColor); // pedaled
|
||||
} else if (isPedaled[i] && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100, 70, 100); // pedaled rainbowMode
|
||||
} else {
|
||||
fill(0, 0, 100); // white key
|
||||
}
|
||||
}
|
||||
let thisX = border + wIndex * (whiteKeyWidth + whiteKeySpace);
|
||||
rect(thisX, keyAreaY, whiteKeyWidth, keyAreaHeight, radius);
|
||||
|
|
@ -80,16 +92,28 @@ function drawBlackKeys() {
|
|||
|
||||
if (isBlack[i % 12] > 0) {
|
||||
// it's a black key
|
||||
if (isKeyOn[i] == 1 && !rainbowMode) {
|
||||
fill(keyOnColor); // keypressed
|
||||
} else if (isKeyOn[i] == 1 && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100, 100, 100); // rainbowMode
|
||||
} else if (isPedaled[i] == 1 && !rainbowMode) {
|
||||
fill(pedaledColor); // pedaled
|
||||
} else if (isPedaled[i] == 1 && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100, 70, 100); // pedaled rainbowMode
|
||||
if (velocityMode) {
|
||||
let m = max(isKeyOn[i], isPedaled[i]) * .9 + .1;
|
||||
if ((isKeyOn[i] || isPedaled[i]) && !rainbowMode) {
|
||||
let darkenedColor = keyOnColor.levels.map(x => floor(x * m));
|
||||
fill(`rgb(${darkenedColor[0]}, ${darkenedColor[1]}, ${darkenedColor[2]})`); // keypressed
|
||||
} else if ((isKeyOn[i] || isPedaled[i]) && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100, 100 * m, 100); // rainbowMode
|
||||
} else {
|
||||
fill(0, 0, 0); // black key
|
||||
}
|
||||
} else {
|
||||
fill(0, 0, 0); // white key
|
||||
if (isKeyOn[i] && !rainbowMode) {
|
||||
fill(keyOnColor); // keypressed
|
||||
} else if (isKeyOn[i] && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100, 100, 100); // rainbowMode
|
||||
} else if (isPedaled[i] && !rainbowMode) {
|
||||
fill(pedaledColor); // pedaled
|
||||
} else if (isPedaled[i] && rainbowMode) {
|
||||
fill(map(i, 21, 108, 0, 1080) % 360, 100, 70, 100); // pedaled rainbowMode
|
||||
} else {
|
||||
fill(0, 0, 0); // black key
|
||||
}
|
||||
}
|
||||
|
||||
let thisX = border + (wIndex - 1) * (whiteKeyWidth + whiteKeySpace) + isBlack[i % 12];
|
||||
|
|
@ -147,7 +171,7 @@ function pushHistories() {
|
|||
shortTermTotal.push(notesThisFrame);
|
||||
shortTermTotal.shift();
|
||||
notesThisFrame = 0;
|
||||
legatoHistory.push(isKeyOn.reduce((accumulator, currentValue) => accumulator + currentValue, 0));
|
||||
legatoHistory.push(isKeyOn.reduce((accumulator, currentValue) => accumulator + !!currentValue, 0));
|
||||
legatoHistory.shift();
|
||||
|
||||
|
||||
|
|
@ -183,8 +207,7 @@ function getPressedKeys(returnString = true) {
|
|||
let pressedOrPedaled = [];
|
||||
|
||||
for (let i = 0; i < isKeyOn.length; i++) {
|
||||
pressedOrPedaled[i] = isKeyOn[i] === 1 || isPedaled[i] === 1 ? 1 : 0;
|
||||
|
||||
pressedOrPedaled[i] = isKeyOn[i] || isPedaled[i];
|
||||
}
|
||||
|
||||
let noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']; // default if sharp
|
||||
|
|
@ -196,7 +219,7 @@ function getPressedKeys(returnString = true) {
|
|||
const pressedKeys = [];
|
||||
|
||||
for (let i = 0; i < pressedOrPedaled.length; i++) {
|
||||
if (pressedOrPedaled[i] === 1) {
|
||||
if (pressedOrPedaled[i]) {
|
||||
const noteName = noteNames[i % 12];
|
||||
const octave = Math.floor(i / 12) - 1;
|
||||
pressedKeys.push(`${noteName}${octave}`);
|
||||
|
|
|
|||
10
style.css
10
style.css
|
|
@ -552,7 +552,7 @@ input[type=checkbox] {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
label[for=rainbow-mode-checkbox] {
|
||||
label.custom-checkbox {
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
|
|
@ -563,7 +563,7 @@ label[for=rainbow-mode-checkbox] {
|
|||
transition: .3s;
|
||||
}
|
||||
|
||||
label[for=rainbow-mode-checkbox]:after {
|
||||
label.custom-checkbox:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1.25px;
|
||||
|
|
@ -575,15 +575,15 @@ label[for=rainbow-mode-checkbox]:after {
|
|||
transition: .3s;
|
||||
}
|
||||
|
||||
input:checked + label[for=rainbow-mode-checkbox] {
|
||||
input:checked + label.custom-checkbox {
|
||||
background: #6f42c1;
|
||||
}
|
||||
|
||||
label[for=rainbow-mode-checkbox]:active:after {
|
||||
label.custom-checkbox:active:after {
|
||||
width: 32.5px;
|
||||
}
|
||||
|
||||
input:checked + label[for=rainbow-mode-checkbox]:after {
|
||||
input:checked + label.custom-checkbox:after {
|
||||
left: calc(100% - 1.25px);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
Loading…
Reference in a new issue