This is a working performance model

assets/instruments/instruments.json

@@ -10,7 +10,8 @@
     "midi-channel-name": "conductorOrchestralBass",
     "image": {
       "filename": "bass.svg",
-      "yPos": "13%",
+      "yPos": "2.5%",
+      
       "width": "100",
       "height": "100"
     }
@@ -24,7 +25,7 @@
     "midi-channel-name": "conductorSnare",
     "image": {
       "filename": "snare.svg",
-      "yPos": "26%",
+      "yPos": "7%",
       "width": "100",
       "height": "100"
     }
@@ -32,10 +33,10 @@
   "Surdo": {
     "directory": "/assets/instruments/surdo",
     "filenames": ["surdo-5.mp3", "surdo-6.mp3", "surdo-7.mp3"],
-    "midi-channel-name": "conductorSnare",
+    "midi-channel-name": "conductorSurdo",
     "image": {
       "filename": "surdo.svg",
-      "yPos": "39%",
+      "yPos": "10.5%",
       "width": "100",
       "height": "100"
     }
@@ -46,7 +47,7 @@
     "midi-channel-name": "conductorSurdoNapa",
     "image": {
       "filename": "surdo-napa.svg",
-      "yPos": "42%",
+      "yPos": "12%",
       "width": "100",
       "height": "100"
     }
@@ -62,7 +63,7 @@
     "midi-channel-name": "conductorTimpaniLarge",
     "image": {
       "filename": "timpani-large.svg",
-      "yPos": "55%",
+      "yPos": "14%",
       "width": "100",
       "height": "100"
     }
@@ -77,7 +78,7 @@
     "midi-channel-name": "conductorTimpaniSmall",
     "image": {
       "filename": "timpani-small.svg",
-      "yPos": "68%",
+      "yPos": "18%",
       "width": "100",
       "height": "100"
     }
@@ -92,7 +93,7 @@
     "midi-channel-name": "conductorToms",
     "image": {
       "filename": "toms.svg",
-      "yPos": "62%",
+      "yPos": "42%",
       "width": "100",
       "height": "100"
     }

src/midi.js

@@ -1,5 +1,6 @@
-export async function sendMidiMessage(midiChannelName, sampleNumber) {
+export async function sendMidiMessage(midiChannelName, sampleNumber, midiAccess) {
   try {
+    console.log(midiChannelName, sampleNumber);
     const availableMidiOutputs = midiAccess.outputs.values();
     let midiOut;
 
@@ -16,11 +17,11 @@ export async function sendMidiMessage(midiChannelName, sampleNumber) {
     }
 
     // MIDI Note On (Play Note)
-    midiOut.send([0x90, 36 + sampleNumber, 127]);
+    midiOut.send([0x90, 35 + sampleNumber, 127]);
 
     // MIDI Note Off after 500ms
     setTimeout(() => {
-      midiOut.send([0x80, 36 + sampleNumber, 0]); // Stop Note
+      midiOut.send([0x80, 35 + sampleNumber, 0]); // Stop Note
     }, 500);
   } catch (error) {
     console.error("Failed to get MIDI access:", error);

src/render.js

@@ -7,7 +7,7 @@ export class Renderer {
   sheetWindow;
   canvases = [];
   iconCache = [];
-  iconScale = 0.25;
+  iconScale = 0.20;
 
   constructor() {
     this.numStaves = 6;
@@ -29,31 +29,44 @@ export class Renderer {
 
     for (let i = 1; i <= this.numStaves; i++) {
       const staveWrapper = document.createElement("div");
-
       staveWrapper.classList.add("stave-wrapper");
       staveWrapper.setAttribute("id", `stave-wrapper-${i}`);
       staveWrapper.style.position = "relative";
-
+    
       const staveObject = document.createElement("object");
       staveObject.type = "image/svg+xml";
       staveObject.data = "assets/svg/stave.svg";
-      staveObject.class = "stave-svg";
+      staveObject.className = "stave-svg"; // Fixed className
-
+    
-      this.sheetWindow.appendChild(staveWrapper);
-
       const canvas = document.createElement("canvas");
       canvas.id = `canvas-${i}`;
       canvas.className = "event-canvas";
-
+    
       const ctx = canvas.getContext("2d");
       this.canvases.push({ canvas, ctx });
-
+    
       staveWrapper.appendChild(staveObject);
       staveWrapper.appendChild(canvas);
-
+      this.sheetWindow.appendChild(staveWrapper);
+    
+      // Your exact sizing method + minimal DPR adjustment
       requestAnimationFrame(() => {
-        canvas.width = canvas.offsetWidth;
+        const dpr = window.devicePixelRatio || 1;
-        canvas.height = canvas.offsetHeight;
+        
+        // Keep your offset measurements
+        const displayWidth = canvas.offsetWidth;
+        const displayHeight = canvas.offsetHeight;
+        
+        // Apply to actual canvas buffer
+        canvas.width = Math.round(displayWidth * dpr);
+        canvas.height = Math.round(displayHeight * dpr);
+        
+        // Maintain your display size
+        canvas.style.width = `${displayWidth}px`;
+        canvas.style.height = `${displayHeight}px`;
+        
+        // Scale context to compensate
+        ctx.scale(dpr , dpr);
       });
     }
   }

src/script.js

@@ -10,21 +10,30 @@ document.addEventListener("DOMContentLoaded", async () => {
   await conductor.init();
   const dataStream = new DataStream();
   const instruments = await conductor.instruments;
+  let strikes = 0;
+  const strikeEvery = 2;
+
 
   const renderer = new Renderer();
 
   dataStream.addEventListener("strike", () => {
+    console.log(strikes);
     //** select instrument */
-    const keys = Object.keys(instruments);
+    if (strikes === strikeEvery){
-    const randomIndex = Math.floor(Math.random() * keys.length);
-    const selectedInstrument = instruments[keys[randomIndex]];
 
-    //** select sample */
+      const keys = Object.keys(instruments);
-    const numSamples = selectedInstrument.numSamples;
+      const randomIndex = Math.floor(Math.random() * keys.length);
-    const randomSampleNumber = Math.floor(Math.random() * numSamples);
+      const selectedInstrument = instruments[keys[randomIndex]];
-
+  
-    renderer.placeIcon(selectedInstrument);
+      //** select sample */
-    sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1, midiAccess);
+      const numSamples = selectedInstrument.numSamples;
+      const randomSampleNumber = Math.floor(Math.random() * numSamples);
+  
+      renderer.placeIcon(selectedInstrument);
+      sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1, midiAccess);
+      strikes = 0;
+    }
+    strikes++;
   });
 
   dataStream.init();

styles.css

@@ -2,7 +2,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: rgb(24, 24, 24);
+    background-color: rgb(0,0,0);
     height: 100vh;
     overflow: hidden;
 
@@ -91,11 +91,11 @@ html {
     display: block;
     width: 100%;
     height: 12vh;
-    background-color: rgb(24,24,24);
+    background-color: rgb(0,0,0);
     padding-top: 30px;
     padding-bottom: 20px;
     overflow: visible;
-    z-index: 100;
+    z-index: 9995;
 }
 
 .logo {
@@ -140,7 +140,7 @@ html {
     max-width: 700px;
     height: 70%;
     margin: 0;
-    background-color: rgb(24,24,24);
+    background-color: rgb(0,0,0);
     margin-bottom: 100px;
     overflow: visible;
 }
@@ -181,7 +181,7 @@ html {
     margin-bottom: 80px;
     text-align: center;
     color: white;  
-    background-color: rgb(24,24,24);
+    background-color: rgb(0,0,0);
     /* height: 20vh; */
     font-family: Helvetica;
     font-size: clamp(14px,1.1vw, 18px);
@@ -216,7 +216,7 @@ html {
     bottom: 0;
     width: 2px;
     height: 92%;
-    background-color: red;
+    background-color: rgb(0, 0, 0);
     z-index: 0;
     animation: moveRight 10s linear infinite;
     will-change: transform;