pianometer/piano-visualizer.js

239 lines
6.9 KiB
JavaScript
Raw Normal View History

2023-03-29 02:16:08 +09:00
function setup() {
createCanvas(1098, 118).parent('piano-visualizer');
colorMode(HSB, 360, 100, 100, 100);
keyOnColor = color(326, 100, 100, 100); // <---- 編輯這裡換「按下時」的顏色![HSB Color Mode]
pedaledColor = color(326, 100, 70, 100); // <---- 編輯這裡換「踏板踩住」的顏色![HSB Color Mode]
smooth(2);
frameRate(60);
initKeys();
}
function draw() {
background(0, 0, 20, 100);
pushHistories();
drawWhiteKeys();
drawBlackKeys();
// drawPedalLines();
// drawNotes();
drawTexts();
}
function calculateSessionTime() {
let currentTime = new Date();
let timeElapsed = currentTime - sessionStartTime;
// Convert time elapsed to hours, minutes, and seconds
let seconds = Math.floor((timeElapsed / 1000) % 60);
let minutes = Math.floor((timeElapsed / (1000 * 60)) % 60);
let hours = Math.floor((timeElapsed / (1000 * 60 * 60)) % 24);
sessionTotalSeconds = Math.floor(timeElapsed / 1000);
// Pad minutes and seconds with leading zeros
let paddedMinutes = String(minutes).padStart(2, '0');
let paddedSeconds = String(seconds).padStart(2, '0');
let timeText = `${hours}:${paddedMinutes}:${paddedSeconds}`;
return timeText;
}
function initKeys() {
for (i = 0; i<128; i++) {
isKeyOn[i] = 0;
isPedaled[i] = 0;
}
}
function drawWhiteKeys() {
let wIndex = 0; // white key index
stroke(0, 0, 0);
strokeWeight(1);
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
} else {
fill(0, 0, 100); // white key
}
let thisX = border + wIndex*(whiteKeyWidth+whiteKeySpace);
rect(thisX, keyAreaY, whiteKeyWidth, keyAreaHeight, radius);
// println(wIndex);
wIndex++;
}
}
}
function drawBlackKeys() {
let wIndex = 0; // white key index
stroke(0, 0, 0);
strokeWeight(1.5);
for (let i = 21; i < 109; i++) {
if (isBlack[i % 12] == 0) {
// it's a white key
wIndex++;
}
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
} else {
fill(0, 0, 0); // white key
}
let thisX = border + (wIndex-1)*(whiteKeyWidth+whiteKeySpace) + isBlack[i % 12];
rect(thisX, keyAreaY-1, blackKeyWidth, blackKeyHeight, bRadius);
}
}
}
function drawTexts() {
stroke(0, 0, 10, 100);
fill(0, 0, 100, 90)
textFont('Monospace');
textStyle(BOLD);
textSize(14);
textAlign(LEFT, TOP);
// TIME
let timeText = "TIME" + "\n" + calculateSessionTime();
text(timeText, 5, 79);
// PEDAL
let pedalText = "PEDALS" + "\nL " + convertNumberToBars(cc67now) + " R " + convertNumberToBars(cc64now)
text(pedalText, 860, 79);
// NOTES
let notesText = "NOTE COUNT" + "\n" + totalNotesPlayed;
text(notesText, 85, 79);
2023-03-29 02:16:08 +09:00
// CALORIES
let caloriesText = "CALORIES" + "\n" + (totalIntensityScore/250).toFixed(3); // 250 Intensity = 1 kcal.
text(caloriesText, 350, 79);
// SHORT-TERM DENSITY
let shortTermDensity = shortTermTotal.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // Sum the array.
if (shortTermDensity > notesSMax) { notesSMax = shortTermDensity };
let shortTermDensityText = "NPS(MAX)" + "\n" + shortTermDensity + " (" + notesSMax + ")";
text(shortTermDensityText, 190, 79);
2023-03-29 02:16:08 +09:00
// LEGATO SCORE
let legatoScore = legatoHistory.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
legatoScore /= 60;
let legatoText = "LEGATO" + "\n" + legatoScore.toFixed(2);
text(legatoText, 276, 79);
2023-03-29 02:16:08 +09:00
// NOW PLAYING
let nowPlayingText = "KEYS" + "\n" + truncateString(getPressedKeys(), 47);
text(nowPlayingText, 440, 79);
}
function pushHistories() {
shortTermTotal.push(notesThisFrame);
shortTermTotal.shift();
notesThisFrame = 0;
legatoHistory.push(isKeyOn.reduce((accumulator, currentValue) => accumulator + currentValue, 0));
legatoHistory.shift();
}
function convertNumberToBars(number) {
if (number < 0 || number > 127) {
throw new Error('Number must be between 0 and 127');
}
const maxBars = 10;
const scaleFactor = 128 / maxBars;
// Calculate the number of bars
const numberOfBars = Math.ceil(number / scaleFactor);
// Create a string with the calculated number of "|" characters
const barString = '|'.repeat(numberOfBars);
// Calculate the number of "." characters required to fill the remaining space
const numberOfDots = maxBars - numberOfBars;
// Create a string with the calculated number of "." characters
const dotString = '.'.repeat(numberOfDots);
// Combine the "|" and "." strings
const combinedString = barString + dotString;
return combinedString;
}
function getPressedKeys() {
let pressedOrPedaled = [];
for (let i = 0; i < isKeyOn.length; i++) {
pressedOrPedaled[i] = isKeyOn[i] === 1 || isPedaled[i] === 1 ? 1 : 0;
}
let noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']; // default if sharp
if ([0, 1, 3, 5, 8, 10].includes(pressedOrPedaled.indexOf(1) % 12)) {
// flat
noteNames = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
}
const pressedKeys = [];
for (let i = 0; i < pressedOrPedaled.length; i++) {
if (pressedOrPedaled[i] === 1) {
const noteName = noteNames[i % 12];
const octave = Math.floor(i / 12) - 1;
pressedKeys.push(`${noteName}${octave}`);
}
}
return pressedKeys.join(' ');
}
function truncateString(str, maxLength = 40) {
if (str.length <= maxLength) {
return str;
}
return str.slice(0, maxLength - 3) + '...';
}
function mouseClicked() {
// Save the canvas content as an image file
if (mouseX < 50 && mouseY < 50) {
saveCanvas('nicechord-pianometer', 'png');
}
if (mouseY > 76) {
if (mouseX <= 84) {
sessionStartTime = new Date();
}
if (mouseX > 84 && mouseX < 170) {
totalNotesPlayed = 0;
}
if (mouseX > 187 && mouseX < 257) {
notesSMax = 0;
}
if (mouseX > 347 && mouseX < 420) {
totalIntensityScore = 0; // RESET CALORIES
}
}
console.log(mouseX, mouseY);
2023-03-29 02:16:08 +09:00
}