增加音名顯示功能

wiwikuan · Jun 3, 2024 · 4122760 · 4122760
1 parent 3377d1c
commit 4122760
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 12 deletions.
diff --git a/globals.js b/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 displayNoteNames = false; // 白鍵要不要顯示音名 (default: false)
 let cc64now = 0; // 現在的踏板狀態
 let cc67now = 0;
 
@@ -136,6 +137,10 @@ function toggleRainbowMode(cb) {
         select('#colorpicker').removeAttribute('disabled')
 }
 
+function toggleDisplayNoteNames(cb) {
+    displayNoteNames = cb.checked;
+}
+
 function changeColor() {
     keyOnColor = pedaledColor = color(select('#colorpicker').value());
     darkenedColor = keyOnColor.levels.map(x => floor(x * .7));

diff --git a/index.html b/index.html
@@ -35,6 +35,13 @@ <h5>選擇 MIDI 裝置</h5>
                                 <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="display-note-names-checkbox" onclick="toggleDisplayNoteNames(this)">
+                            <label for="display-note-names-checkbox">
+                                <span class="switch-txt" turnOn="On" turnOff="Off"></span>
+                            </label>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/piano-visualizer.js b/piano-visualizer.js
@@ -14,9 +14,7 @@ function draw() {
   pushHistories();
   drawWhiteKeys();
   drawBlackKeys();
-  // drawPedalLines();
-  // drawNotes();
-
+  if (displayNoteNames) {drawNoteNames();};
   drawTexts();
 }
 
@@ -98,6 +96,25 @@ function drawBlackKeys() {
   }
 }
 
+function drawNoteNames() {
+  let noteNames = ["A", "B", "C", "D", "E", "F", "G"]; // 音名數組
+
+  textSize(12); // 設置文字大小
+  noStroke();
+  fill(0, 0, 0, 75); // 設置文字顏色為黑色
+  textAlign(CENTER, CENTER); // 設置文字對齊方式為居中
+  textStyle(NORMAL);
+
+  let wIndex = 0; // 白鍵索引
+  for (let i = 0; i < 52; i++) { // 遍歷所有白鍵
+    let thisX = border + wIndex * (whiteKeyWidth + whiteKeySpace);
+    let thisY = keyAreaY + keyAreaHeight - 11; // 調整文字的垂直位置
+    let noteName = noteNames[i % 7]; // 獲取對應的音名
+    text(noteName, thisX + whiteKeyWidth / 2, thisY); // 繪製音名文字
+    wIndex++;
+  }
+}
+
 function drawTexts() {
   stroke(0, 0, 10, 100);
   fill(0, 0, 100, 90)

diff --git a/style.css b/style.css
@@ -552,7 +552,8 @@ input[type=checkbox] {
     visibility: hidden;
 }
 
-label[for=rainbow-mode-checkbox] {
+label[for=rainbow-mode-checkbox],
+label[for=display-note-names-checkbox] {
     cursor: pointer;
     width: 50px;
     height: 25px;
@@ -563,7 +564,8 @@ label[for=rainbow-mode-checkbox] {
     transition: .3s;
 }
 
-label[for=rainbow-mode-checkbox]:after {
+label[for=rainbow-mode-checkbox]:after,
+label[for=display-note-names-checkbox]:after {
     content: '';
     position: absolute;
     top: 1.25px;
@@ -575,15 +577,18 @@ label[for=rainbow-mode-checkbox]:after {
     transition: .3s;
 }
 
-input:checked + label[for=rainbow-mode-checkbox] {
-	background: #6f42c1;
+input:checked + label[for=rainbow-mode-checkbox],
+input:checked + label[for=display-note-names-checkbox] {
+    background: #6f42c1;
 }
 
-label[for=rainbow-mode-checkbox]:active:after {
-	width: 32.5px;
+label[for=rainbow-mode-checkbox]:active:after,
+label[for=display-note-names-checkbox]:active:after {
+    width: 32.5px;
 }
 
-input:checked + label[for=rainbow-mode-checkbox]:after {
-	left: calc(100% - 1.25px);
-	transform: translateX(-100%);
+input:checked + label[for=rainbow-mode-checkbox]:after,
+input:checked + label[for=display-note-names-checkbox]:after {
+    left: calc(100% - 1.25px);
+    transform: translateX(-100%);
 }