updated html

FAYCX · Jul 29, 2024 · a22dfb0 · a22dfb0
1 parent f6682c5
commit a22dfb0
Showing 1 changed file with 26 additions and 32 deletions.
diff --git a/webcam_theremin.html b/webcam_theremin.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Webcam Hand Theremin Instrument</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ml5.js Handpose p5 Webcam Theremin</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/ml5.js"></script>
@@ -26,11 +27,23 @@
         font-family: 'Helvetica', sans-serif;
         font-weight: bold;
       }
-      #startButton {
-        padding: 10px 20px;
-        font-size: 16px;
+
+      #H2 {
+        margin-bottom: 20px;
+        font-size: 18px;
+        color: #333;
+        text-align: center;
+        font-family: 'Helvetica', sans-serif;
+      }
+
+      #reminder {
         margin-bottom: 20px;
+        font-size: 14px;
+        color: #666;
+        text-align: center;
+        font-family: 'Helvetica', sans-serif;
       }
+
       #sketch-container {
         display: flex;
         align-items: center;
@@ -39,12 +52,11 @@
     </style>
   </head>
   <body>
-    <div id="title">Webcam Hand Theremin Instrument</div>
-    <button id="startButton">Start</button>
+    <div id="title">Webcam Handpose Theremin Instrument</div>
+    <div id="H2">by Fay Cai (<a href="https://www.faycai.com" target="_blank">www.faycai.com</a>)</div>
+    <div id="reminder">Note: Please raise one of your hands to play the instrument</div>
     <div id="sketch-container"></div>
     <script>
-      console.log("Script is running"); // Initial debug step
-
       let handpose;
       let video;
       let hands = [];
@@ -53,51 +65,33 @@
       let letters = ["G", "A", "B", "C", "D", "E", "F#", "G"];
 
       let osc;
-
-      document.getElementById("startButton").addEventListener("click", function() {
-        console.log("Start button clicked"); // Debug step
-        userStartAudio(); // Ensure audio context is started
-        setup();
-        this.style.display = 'none'; // Hide the button after starting
-      });
+      let amp;
 
       function preload() {
-        console.log("Preload start"); // Debugging step 2
         handpose = ml5.handpose();
-        console.log("Handpose loaded"); // Debugging step 3
       }
 
       function setup() {
-        console.log("Setup is running"); // Debug step 4
         let canvas = createCanvas(640, 480);
         canvas.parent('sketch-container');
-        console.log("Canvas created"); // Debugging step 5
 
         osc = new p5.Oscillator();
 
-        video = createCapture(VIDEO, videoReady);
+        video = createCapture(VIDEO);
         video.size(width, height);
         video.hide();
-        console.log("Video capture started"); // Debugging step 6
+
+        handpose.detect(video, gotHands);
 
         osc.start();
         osc.amp(0.1);
-        console.log("Oscillator started"); // Debugging step 7
-
-        handpose.on("predict", gotHands);
-      }
-
-      function videoReady() {
-        console.log("Video is ready"); // Debugging step 8
       }
 
       function gotHands(results) {
-        console.log("Handpose predictions received"); // Debugging step 9
         hands = results;
       }
 
       function draw() {
-        console.log("Draw start"); // Debugging step 10
         translate(width, 0);
         scale(-1, 1);
         image(video, 0, 0, width, height);