visualized from rough keyboard positions

index.html

@@ -2423,20 +2423,24 @@ let notesPlaying = {}
 function webMidiStarted(){
 	let midiStarted = Date.now()
 	console.log("WebMidi enabled!")
-	let myInput = WebMidi.getInputByName("MPK mini Play mk3"); // on Quest 2
-	//let myInput = WebMidi.getInputByName("MPK mini Play mk3:MPK mini Play mk3"); // on desktop
+	//let myInput = WebMidi.getInputByName("MPK mini Play mk3"); // on Quest 2
+	let myInput = WebMidi.getInputByName("MPK mini Play mk3:MPK mini Play mk3"); // on desktop
 	WebMidi.inputs.forEach(input => console.log(input.manufacturer, input.name));
 	myInput.addListener("noteon", e => {
 		let identifierNoOctave = e.note.identifier.slice(0,-1)
-		let b = addBlockCodeExample(identifierNoOctave, ""+ (Date.now()-midiStarted)/10000 + " 1.6 -.5")
+		let pos = ""+ (Object.getOwnPropertyNames(notes).indexOf(identifierNoOctave)/40+e.note.octave/3.3-1.1)+ " 1.2 -.2"
+		let b = addBlockCodeExample(identifierNoOctave, pos)
+		b.setAttribute("rotation", "-90 90 0")
+		b.classList.add("musicalnote") // until now often assumed as single class, probably will lead to bugs
 		let inlineColored = [...b.querySelectorAll(".outlined_object")].map( el => el.setAttribute("color", notes[identifierNoOctave]) )
 		notesPlaying[e.note.identifier] = true;
 		console.log(e.note);
 	}); // for now assuming an arbitrary duration but should rely on notesPlaying
 	myInput.addListener("noteoff", e => { notesPlaying[e.note.identifier] = false; console.log(e.note); }); // could be used for note duration
+	setInterval( _=> pushBackClass("musicalnote", .001), 10)
 }
 
-const notes = {"A":"#f50000", "A#": "#f57a00", "B": "#f5f500", "C": "#7af500", "C#": "#00f500", "D": "#00f57a", "D#": "#00f5f5", "E": "#007af5", "F": "#0000f5", "F#": "#7a00f5", "G": "#f500f5", "G#": "#f5007a"};
+const notes = {"C": "#7af500", "C#": "#00f500", "D": "#00f57a", "D#": "#00f5f5", "E": "#007af5", "F": "#0000f5", "F#": "#7a00f5", "G": "#f500f5", "G#": "#f5007a", "A":"#f50000", "A#": "#f57a00", "B": "#f5f500", };
 
 </script>
 <div id="observablehq-key">