From e5eacbba0d1816688fa40043e2795f0c99f55154 Mon Sep 17 00:00:00 2001 From: joe Date: Fri, 25 Apr 2025 09:03:54 +0100 Subject: [PATCH] This is a working performance model --- assets/instruments/instruments.json | 17 ++++++------- src/midi.js | 7 +++--- src/render.js | 37 +++++++++++++++++++---------- src/script.js | 27 ++++++++++++++------- styles.css | 12 +++++----- 5 files changed, 62 insertions(+), 38 deletions(-) diff --git a/assets/instruments/instruments.json b/assets/instruments/instruments.json index a080fac..bff503c 100644 --- a/assets/instruments/instruments.json +++ b/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" } diff --git a/src/midi.js b/src/midi.js index a60c744..0f533a0 100644 --- a/src/midi.js +++ b/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); diff --git a/src/render.js b/src/render.js index cbdd4ca..d75d3ef 100644 --- a/src/render.js +++ b/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"; - - this.sheetWindow.appendChild(staveWrapper); - + staveObject.className = "stave-svg"; // Fixed className + 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; - canvas.height = canvas.offsetHeight; + const dpr = window.devicePixelRatio || 1; + + // 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); }); } } diff --git a/src/script.js b/src/script.js index 2e1463c..152e8ba 100644 --- a/src/script.js +++ b/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); - const randomIndex = Math.floor(Math.random() * keys.length); - const selectedInstrument = instruments[keys[randomIndex]]; + if (strikes === strikeEvery){ - //** select sample */ - const numSamples = selectedInstrument.numSamples; - const randomSampleNumber = Math.floor(Math.random() * numSamples); - - renderer.placeIcon(selectedInstrument); - sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1, midiAccess); + const keys = Object.keys(instruments); + const randomIndex = Math.floor(Math.random() * keys.length); + const selectedInstrument = instruments[keys[randomIndex]]; + + //** select sample */ + 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(); diff --git a/styles.css b/styles.css index 9617a4d..71eec1e 100644 --- a/styles.css +++ b/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;