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); // 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); // LEGATO SCORE let legatoScore = legatoHistory.reduce((accumulator, currentValue) => accumulator + currentValue, 0) legatoScore /= 60; let legatoText = "LEGATO" + "\n" + legatoScore.toFixed(2); text(legatoText, 276, 79); // 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); }