{"title":"K-Nearest Neighbors (KNN) Viz","html":"

\n Neighbors:\n \n 3\n

\n Play Speed:\n \n 1.00x\n

\n Training Data Distribution:\n

\n \n Random\n \n \n Grouped\n \n

\n \n Seed:\n 42\n

\n\n

Enable Sound

","css":"html,\nbody {\n margin: 0;\n padding: 0;\n overflow: hidden;\n height: 100%;\n background: #15181f;\n color: #d0d8e8;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n transition: background-color 0.8s ease;\n}\ncanvas {\n display: block;\n}\n#ui-container {\n position: absolute;\n top: 15px;\n left: 15px;\n background: rgba(15, 20, 30, 0.85);\n padding: 15px 20px;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n align-items: flex-start;\n border: 1px solid rgba(80, 100, 130, 0.5);\n max-width: 250px;\n z-index: 10;\n}\n\n#ui-container label,\n#ui-container .label-like {\n display: block;\n margin-bottom: 5px;\n color: #c0d0e0;\n font-size: 0.95em;\n font-weight: 500;\n}\n\n#kValueLabel,\n#playSpeedValueLabel,\n#currentSeedLabel {\n margin-left: 10px;\n min-width: 45px;\n display: inline-block;\n font-weight: bold;\n color: #e0e8f8;\n text-align: right;\n}\n#currentSeedLabel {\n min-width: 55px;\n}\n\n#kSlider,\n#playSpeedSlider {\n vertical-align: middle;\n cursor: pointer;\n accent-color: #70a0d0;\n width: 150px;\n}\n\n#changeSeedButton {\n padding: 5px 10px;\n background-color: #405060;\n color: #d0d8e8;\n border: 1px solid rgba(100, 120, 160, 0.7);\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.9em;\n margin-top: 5px;\n transition: background-color 0.2s ease;\n}\n#changeSeedButton:hover {\n background-color: #506075;\n}\n\n#ui-container > div:has(.radio-group) {\n}\n#ui-container > div:has(.radio-group) > .label-like {\n width: auto;\n text-align: left;\n}\n\n.radio-group {\n display: flex;\n gap: 15px;\n padding-left: 5px;\n margin-top: 5px;\n}\n.radio-group label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n margin-right: 0;\n font-size: 0.9em;\n cursor: pointer;\n font-weight: normal;\n width: auto;\n text-align: left;\n}\n.radio-group input[type=\"radio\"] {\n vertical-align: middle;\n margin-right: 5px;\n accent-color: #70a0d0;\n cursor: pointer;\n flex-shrink: 0;\n}\n\n#ui-container hr {\n border: none;\n border-top: 1px solid rgba(80, 100, 130, 0.5);\n width: 100%;\n margin: 5px 0;\n}\n\n#audio-toggle-button {\n position: absolute;\n top: 15px;\n right: 15px;\n background-color: rgba(50, 60, 80, 0.9);\n color: #e0e8f8;\n padding: 8px 12px;\n border-radius: 5px;\n font-size: 0.8em;\n text-align: center;\n cursor: pointer;\n z-index: 100;\n border: 1px solid rgba(100, 120, 160, 0.7);\n min-width: 80px;\n}\n#audio-toggle-button:hover {\n background-color: rgba(70, 80, 100, 0.95);\n}\n\n@media (max-width: 600px) {\n #ui-container {\n display: none;\n }\n #audio-toggle-button {\n font-size: 0.75em;\n padding: 6px 10px;\n min-width: 70px;\n }\n}","js":"let scene, camera, renderer, controls;\nconst trainingPoints = [];\nlet fallingTestPoint = null;\nconst voteLines = [];\nlet boundaryPlaneMesh = null;\nlet kValue = 3;\nlet trainingDataMode = \"random\";\n\nlet playSpeedMultiplier = 1.0;\nconst baseFallSpeed = 0.15;\nconst baseDisplayTime = 1000;\nlet currentFallSpeed = baseFallSpeed;\nlet currentDisplayTime = baseDisplayTime;\nconst minDisplayTime = 200;\n\nconst initialSeed = 42;\nlet currentSeed = initialSeed;\nfunction resetSeedToInitial() {\n currentSeed = initialSeed;\n document.getElementById(\"currentSeedLabel\").textContent = currentSeed;\n}\nfunction seededRandom() {\n const a = 1103515245,\n c = 12345,\n m = Math.pow(2, 31);\n currentSeed = (a * currentSeed + c) % m;\n return currentSeed / m;\n}\n\nconst classColors = {\n 0: 0xff8080,\n 1: 0x80ff80,\n 2: 0x8080ff,\n testPredicted0: 0xffb0b0,\n testPredicted1: 0xb0ffb0,\n testPredicted2: 0xb0b0ff,\n testFalling: 0xffffff,\n testLandedNeutral: 0xcccccc,\n boundary0: 0xd9aaaa,\n boundary1: 0xaad9aa,\n boundary2: 0xaaaad9,\n boundaryUndefined: 0x505055,\n};\nconst pointSize = 0.15;\nconst spawnBounds = { xMin: -8, xMax: 8, zMin: -8, zMax: 8, yStart: 10 };\nconst boundaryArea = {\n width: 20,\n height: 20,\n segmentsX: 80,\n segmentsZ: 80,\n};\nconst clusterCenters = {\n 0: new THREE.Vector3(-5, pointSize, -4),\n 1: new THREE.Vector3(5, pointSize, -4),\n 2: new THREE.Vector3(0, pointSize, 6),\n};\nconst clusterSpread = 3.5;\nconst randomSpread = 9.0;\n\nlet audioContext;\nlet isAudioReady = false;\nlet isSoundMuted = true;\nconst baseVolume = 0.15;\nlet masterGain;\nlet reverbNode;\nlet delayNode;\nlet delayFeedback;\nlet ambientLoopTimeout;\nlet lastPredictedClass = -1;\n\nlet currentBoundaryRatios = { 0: 1 / 3, 1: 1 / 3, 2: 1 / 3, \"-1\": 0 };\n\nconst defaultBgColorHex = \"#15181f\";\nconst backgroundColors = {\n 0: \"#251818\",\n 1: \"#182518\",\n 2: \"#181825\",\n \"-1\": defaultBgColorHex,\n};\nlet currentBgColor = new THREE.Color(defaultBgColorHex);\nlet targetBgColor = new THREE.Color(defaultBgColorHex);\n\nconst Notes = {\n C2: 65.41,\n D2: 73.42,\n E2: 82.41,\n F2: 87.31,\n G2: 98.0,\n A2: 110.0,\n B2: 123.47,\n C3: 130.81,\n D3: 146.83,\n E3: 164.81,\n F3: 174.61,\n G3: 196.0,\n A3: 220.0,\n B3: 246.94,\n C4: 261.63,\n D4: 293.66,\n E4: 329.63,\n F4: 349.23,\n G4: 392.0,\n A4: 440.0,\n B4: 493.88,\n C5: 523.25,\n D5: 587.33,\n E5: 659.25,\n F5: 698.46,\n G5: 783.99,\n A5: 880.0,\n B5: 987.77,\n C6: 1046.5,\n D6: 1174.66,\n E6: 1318.51,\n F6: 1396.91,\n G6: 1567.98,\n A6: 1760.0,\n B6: 1975.53,\n};\n\nconst scaleNotes = {\n 0: [Notes[\"C4\"], Notes[\"E4\"], Notes[\"G4\"], Notes[\"A4\"], Notes[\"C5\"]],\n 1: [Notes[\"G4\"], Notes[\"B4\"], Notes[\"D5\"], Notes[\"E5\"], Notes[\"G5\"]],\n 2: [Notes[\"F4\"], Notes[\"A4\"], Notes[\"C5\"], Notes[\"D5\"], Notes[\"F5\"]],\n};\n\nconst classificationChords = {\n 0: [Notes.C4, Notes.E4, Notes.G4],\n 1: [Notes.G4, Notes.B4, Notes.D5],\n 2: [Notes.F4, Notes.A4, Notes.C5],\n};\n\nconst beamOscillatorType = \"triangle\";\nconst beamSoundBaseSettings = {\n baseDuration: 0.07,\n volMult: 0.7,\n minDuration: 0.04,\n};\nconst beamDistanceEffect = { maxDist: 18.0 };\n\nconst ambientScale = [\n Notes[\"C3\"],\n Notes[\"E3\"],\n Notes[\"G3\"],\n Notes[\"A3\"],\n Notes[\"C4\"],\n Notes[\"E4\"],\n];\nconst ambientClassNoteIndices = { 0: [0, 1], 1: [2, 3], 2: [4, 5] };\n\ninit();\nanimate();\n\nfunction init() {\n scene = new THREE.Scene();\n camera = new THREE.PerspectiveCamera(\n 60,\n window.innerWidth / window.innerHeight,\n 0.1,\n 1000\n );\n camera.position.set(0, 13, 15);\n camera.lookAt(0, 1, 0);\n renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setClearColor(currentBgColor);\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n document.body.appendChild(renderer.domElement);\n document.body.style.backgroundColor =\n \"#\" + currentBgColor.getHexString();\n\n const ambientLight = new THREE.AmbientLight(0xa0b0c0, 0.8);\n scene.add(ambientLight);\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);\n directionalLight.position.set(10, 15, 8);\n scene.add(directionalLight);\n const hemisphereLight = new THREE.HemisphereLight(\n 0xccccff,\n 0x606090,\n 0.4\n );\n scene.add(hemisphereLight);\n\n controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.screenSpacePanning = false;\n controls.maxPolarAngle = Math.PI / 2 + 0.2;\n controls.minDistance = 2;\n controls.maxDistance = 50;\n controls.target.set(0, 1, 0);\n controls.autoRotate = true;\n controls.autoRotateSpeed = 0.3;\n\n createDecisionBoundaryPlane();\n\n document\n .getElementById(\"kSlider\")\n .addEventListener(\"input\", handleKChange);\n setupPlaySpeedSlider();\n setupDataModeRadios();\n setupSeedButton();\n setupAudioToggleButton();\n window.addEventListener(\"resize\", onWindowResize);\n resetSeedToInitial();\n regenerateTrainingData(true);\n}\n\nasync function createAudioGraph() {\n masterGain = audioContext.createGain();\n masterGain.gain.value = 0.7;\n reverbNode = audioContext.createConvolver();\n delayNode = audioContext.createDelay(5.0);\n delayFeedback = audioContext.createGain();\n const reverbWet = audioContext.createGain();\n const delayWet = audioContext.createGain();\n const dryGain = audioContext.createGain();\n masterGain.connect(dryGain);\n masterGain.connect(reverbWet);\n masterGain.connect(delayWet);\n reverbWet.gain.value = 0.4;\n delayWet.gain.value = 0.35;\n dryGain.gain.value = 0.65;\n reverbWet.connect(reverbNode);\n delayWet.connect(delayNode);\n delayNode.delayTime.value = 0.55;\n delayFeedback.gain.value = 0.35;\n delayNode.connect(delayFeedback);\n delayFeedback.connect(delayNode);\n const finalMix = audioContext.createGain();\n dryGain.connect(finalMix);\n reverbNode.connect(finalMix);\n delayFeedback.connect(finalMix);\n finalMix.connect(audioContext.destination);\n try {\n reverbNode.buffer = await createImpulseResponse();\n } catch (e) {\n reverbWet.disconnect();\n reverbNode.disconnect();\n }\n}\n\nasync function createImpulseResponse() {\n if (!audioContext) return null;\n const length = 4.5 * audioContext.sampleRate;\n const impulse = audioContext.createBuffer(\n 2,\n length,\n audioContext.sampleRate\n );\n const L = impulse.getChannelData(0);\n const R = impulse.getChannelData(1);\n for (let i = 0; i < length; i++) {\n const env = Math.exp(-i / (audioContext.sampleRate * 1.8));\n L[i] = (Math.random() * 2 - 1) * env;\n R[i] = (Math.random() * 2 - 1) * env;\n }\n return impulse;\n}\n\nasync function initAudioContext() {\n if (!audioContext) {\n try {\n window.AudioContext =\n window.AudioContext || window.webkitAudioContext;\n audioContext = new AudioContext();\n isAudioReady = audioContext.state === \"running\";\n await createAudioGraph();\n if (audioContext.state === \"suspended\") {\n return audioContext\n .resume()\n .then(() => {\n isAudioReady = true;\n return true;\n })\n .catch((e) => {\n isAudioReady = false;\n return false;\n });\n } else if (isAudioReady) {\n return Promise.resolve(true);\n }\n } catch (e) {\n isAudioReady = false;\n return Promise.resolve(false);\n }\n } else if (audioContext.state === \"suspended\") {\n return audioContext\n .resume()\n .then(() => {\n isAudioReady = true;\n return true;\n })\n .catch((e) => {\n isAudioReady = false;\n return false;\n });\n }\n return Promise.resolve(true);\n}\n\nfunction setupAudioToggleButton() {\n const button = document.getElementById(\"audio-toggle-button\");\n if (!button) return;\n button.addEventListener(\"click\", async () => {\n if (!isAudioReady) {\n const success = await initAudioContext();\n if (success && masterGain) {\n isSoundMuted = false;\n button.textContent = \"Mute Sound\";\n masterGain.gain.setTargetAtTime(\n 0.7,\n audioContext.currentTime,\n 0.01\n );\n playTone(Notes[\"A4\"], 0.1, \"sine\", 0.1, 0.01, 0.05, 0);\n startAmbientLoop();\n } else {\n button.textContent = \"Enable Sound\";\n isSoundMuted = true;\n if (masterGain) {\n masterGain.gain.setTargetAtTime(\n 0,\n audioContext.currentTime,\n 0.01\n );\n }\n }\n } else {\n isSoundMuted = !isSoundMuted;\n button.textContent = isSoundMuted ? \"Unmute Sound\" : \"Mute Sound\";\n if (!isSoundMuted) {\n if (masterGain) {\n masterGain.gain.setTargetAtTime(\n 0.7,\n audioContext.currentTime,\n 0.01\n );\n }\n startAmbientLoop();\n } else {\n stopAmbientLoop();\n if (masterGain) {\n masterGain.gain.setTargetAtTime(\n 0,\n audioContext.currentTime,\n 0.01\n );\n }\n }\n }\n });\n if (isSoundMuted && masterGain) {\n masterGain.gain.setTargetAtTime(0, audioContext.currentTime, 0.01);\n } else if (!isSoundMuted && masterGain) {\n masterGain.gain.setTargetAtTime(0.7, audioContext.currentTime, 0.01);\n }\n}\n\nfunction playTone(\n freq,\n durationSec,\n type = \"sine\",\n volMultiplier = 1.0,\n attackTime = 0.01,\n releaseTime = 0.1,\n detuneValue = 0,\n startTimeOffset = 0\n) {\n if (\n !isAudioReady ||\n isSoundMuted ||\n !audioContext ||\n audioContext.state !== \"running\" ||\n !masterGain\n ) {\n return;\n }\n const oscillator = audioContext.createOscillator();\n const gainNode = audioContext.createGain();\n oscillator.type = type;\n oscillator.frequency.setValueAtTime(freq, audioContext.currentTime);\n oscillator.detune.setValueAtTime(detuneValue, audioContext.currentTime);\n gainNode.connect(masterGain);\n const peakVol = baseVolume * volMultiplier;\n const startPlayTime = audioContext.currentTime + startTimeOffset;\n attackTime = Math.min(attackTime, durationSec / 2);\n releaseTime = Math.min(releaseTime, durationSec - attackTime);\n const attackEndTime = startPlayTime + attackTime;\n const decayStartTime = Math.max(\n attackEndTime,\n startPlayTime + durationSec - releaseTime\n );\n const endTime = startPlayTime + durationSec;\n gainNode.gain.setValueAtTime(0, startPlayTime);\n gainNode.gain.linearRampToValueAtTime(peakVol, attackEndTime);\n if (decayStartTime <= endTime) {\n gainNode.gain.setValueAtTime(peakVol, decayStartTime);\n gainNode.gain.linearRampToValueAtTime(0, endTime);\n } else {\n gainNode.gain.linearRampToValueAtTime(0, endTime);\n }\n oscillator.connect(gainNode);\n oscillator.start(startPlayTime);\n oscillator.stop(endTime + 0.1);\n setTimeout(() => {\n if (oscillator && typeof oscillator.disconnect === \"function\")\n oscillator.disconnect();\n if (gainNode && typeof gainNode.disconnect === \"function\")\n gainNode.disconnect();\n }, (durationSec + startTimeOffset + 0.2) * 1000);\n}\n\nfunction startAmbientLoop() {\n stopAmbientLoop();\n if (!isAudioReady || isSoundMuted) {\n return;\n }\n const triggerNote = () => {\n let freq;\n const r0 = currentBoundaryRatios[0];\n const r1 = currentBoundaryRatios[1];\n const r2 = currentBoundaryRatios[2];\n const totalRatio = r0 + r1 + r2;\n if (totalRatio > 0.01) {\n const normR0 = r0 / totalRatio;\n const normR1 = r1 / totalRatio;\n const rand = seededRandom();\n let targetClass;\n if (rand < normR0) {\n targetClass = 0;\n } else if (rand < normR0 + normR1) {\n targetClass = 1;\n } else {\n targetClass = 2;\n }\n const indices = ambientClassNoteIndices[targetClass];\n const chosenIndex =\n indices[Math.floor(seededRandom() * indices.length)];\n freq = ambientScale[chosenIndex];\n } else {\n const noteIndex = Math.floor(seededRandom() * ambientScale.length);\n freq = ambientScale[noteIndex];\n }\n const duration = 4.0 + seededRandom() * 5.0;\n const attack = 1.0 + seededRandom() * 1.5;\n const release = 1.5 + seededRandom() * 2.0;\n const vol = 0.3 + seededRandom() * 0.3;\n const detune = (seededRandom() - 0.5) * 8;\n playTone(freq, duration, \"sine\", vol, attack, release, detune);\n const nextDelay = (3.0 + seededRandom() * 4.0) * 1000;\n ambientLoopTimeout = setTimeout(triggerNote, nextDelay);\n };\n triggerNote();\n}\n\nfunction stopAmbientLoop() {\n clearTimeout(ambientLoopTimeout);\n}\n\nfunction setupPlaySpeedSlider() {\n const playSpeedSlider = document.getElementById(\"playSpeedSlider\");\n const playSpeedValueLabel = document.getElementById(\n \"playSpeedValueLabel\"\n );\n if (!playSpeedSlider || !playSpeedValueLabel) return;\n playSpeedMultiplier = parseFloat(playSpeedSlider.value);\n currentFallSpeed = baseFallSpeed * playSpeedMultiplier;\n currentDisplayTime = Math.max(\n minDisplayTime,\n baseDisplayTime / playSpeedMultiplier\n );\n playSpeedValueLabel.textContent = playSpeedMultiplier.toFixed(2) + \"x\";\n playSpeedSlider.addEventListener(\"input\", (event) => {\n playSpeedMultiplier = parseFloat(event.target.value);\n currentFallSpeed = baseFallSpeed * playSpeedMultiplier;\n currentDisplayTime = Math.max(\n minDisplayTime,\n baseDisplayTime / playSpeedMultiplier\n );\n playSpeedValueLabel.textContent =\n playSpeedMultiplier.toFixed(2) + \"x\";\n });\n}\n\nfunction setupDataModeRadios() {\n document.querySelectorAll('input[name=\"dataMode\"]').forEach((radio) => {\n if (radio && radio.parentElement) {\n radio.addEventListener(\"change\", (event) => {\n if (event.target.checked) {\n trainingDataMode = event.target.value;\n regenerateTrainingData(false);\n }\n });\n }\n });\n}\n\nfunction setupSeedButton() {\n const seedButton = document.getElementById(\"changeSeedButton\");\n const seedLabel = document.getElementById(\"currentSeedLabel\");\n if (!seedButton || !seedLabel) return;\n seedButton.addEventListener(\"click\", () => {\n currentSeed = Math.floor(Math.random() * 9999) + 1;\n seedLabel.textContent = currentSeed;\n regenerateTrainingData(false);\n });\n}\n\nfunction createDecisionBoundaryPlane() {\n const geometry = new THREE.PlaneGeometry(\n boundaryArea.width,\n boundaryArea.height,\n boundaryArea.segmentsX,\n boundaryArea.segmentsZ\n );\n const material = new THREE.MeshBasicMaterial({\n vertexColors: true,\n side: THREE.DoubleSide,\n });\n boundaryPlaneMesh = new THREE.Mesh(geometry, material);\n boundaryPlaneMesh.rotation.x = -Math.PI / 2;\n boundaryPlaneMesh.position.y = -0.1;\n scene.add(boundaryPlaneMesh);\n const colors = new Float32Array(geometry.attributes.position.count * 3);\n const defaultColor = new THREE.Color(classColors.boundaryUndefined);\n for (let i = 0; i < geometry.attributes.position.count; i++) {\n colors.set([defaultColor.r, defaultColor.g, defaultColor.b], i * 3);\n }\n geometry.setAttribute(\"color\", new THREE.BufferAttribute(colors, 3));\n}\n\nfunction handleKChange(event) {\n const kValueLabel = document.getElementById(\"kValueLabel\");\n if (!kValueLabel) return;\n kValue = parseInt(event.target.value, 10);\n kValueLabel.textContent = kValue;\n setTimeout(() => {\n updateDecisionBoundary();\n }, 10);\n}\n\nfunction regenerateTrainingData(isInitialSetup = false) {\n clearTrainingPoints();\n cleanupFallingPoint();\n clearVoteLines();\n addInitialTrainingData(16);\n targetBgColor.set(defaultBgColorHex);\n document.body.style.backgroundColor =\n \"#\" + targetBgColor.getHexString();\n setTimeout(() => {\n updateDecisionBoundary();\n spawnFallingTestPoint();\n }, 50);\n}\n\nfunction clearTrainingPoints() {\n trainingPoints.forEach((tp) => {\n if (tp.mesh) {\n scene.remove(tp.mesh);\n tp.mesh.geometry?.dispose();\n tp.mesh.material?.dispose();\n }\n });\n trainingPoints.length = 0;\n}\n\nfunction cleanupFallingPoint() {\n const pointToClean = fallingTestPoint;\n if (pointToClean && pointToClean.mesh) {\n clearTimeout(pointToClean.removeTimer);\n pointToClean.aborted = true;\n scene.remove(pointToClean.mesh);\n pointToClean.mesh.geometry?.dispose();\n pointToClean.mesh.material?.dispose();\n }\n if (fallingTestPoint === pointToClean) {\n fallingTestPoint = null;\n }\n}\n\nfunction addInitialTrainingData(pointsPerClass) {\n const totalPoints = pointsPerClass * 3;\n for (let i = 0; i < totalPoints; i++) {\n let pos, classId;\n if (trainingDataMode === \"grouped\") {\n classId = Math.floor(i / pointsPerClass);\n const center = clusterCenters[classId];\n const offsetX = (seededRandom() - 0.5) * clusterSpread * 2;\n const offsetZ = (seededRandom() - 0.5) * clusterSpread * 2;\n pos = new THREE.Vector3(\n center.x + offsetX,\n pointSize,\n center.z + offsetZ\n );\n } else {\n const x = (seededRandom() - 0.5) * randomSpread * 2;\n const z = (seededRandom() - 0.5) * randomSpread * 2;\n pos = new THREE.Vector3(x, pointSize, z);\n classId = Math.floor(seededRandom() * 3);\n }\n addPoint(pos, classId);\n }\n updateKSliderMax();\n}\n\nfunction addPoint(position, classId) {\n const geometry = new THREE.SphereGeometry(pointSize, 20, 20);\n const color = classColors[classId];\n const material = new THREE.MeshStandardMaterial({\n color: color,\n metalness: 0.2,\n roughness: 0.6,\n });\n const sphere = new THREE.Mesh(geometry, material);\n sphere.position.copy(position);\n sphere.position.y = Math.max(sphere.position.y, pointSize);\n scene.add(sphere);\n trainingPoints.push({\n position: sphere.position,\n class: classId,\n mesh: sphere,\n });\n return sphere;\n}\n\nfunction spawnFallingTestPoint() {\n cleanupFallingPoint();\n clearVoteLines();\n const x =\n (seededRandom() - 0.5) * (spawnBounds.xMax - spawnBounds.xMin);\n const z =\n (seededRandom() - 0.5) * (spawnBounds.zMax - spawnBounds.zMin);\n const startPos = new THREE.Vector3(x, spawnBounds.yStart, z);\n const geometry = new THREE.SphereGeometry(pointSize * 1.1, 20, 20);\n const material = new THREE.MeshStandardMaterial({\n color: classColors.testFalling,\n metalness: 0.3,\n roughness: 0.5,\n });\n const sphere = new THREE.Mesh(geometry, material);\n sphere.position.copy(startPos);\n scene.add(sphere);\n fallingTestPoint = {\n mesh: sphere,\n targetY: pointSize,\n falling: true,\n removeTimer: null,\n aborted: false,\n };\n}\n\nfunction getKNNPrediction(testPosition, k) {\n if (trainingPoints.length === 0)\n return { predictedClass: -1, neighbors: [] };\n const distances = trainingPoints.map((trainPoint) => ({\n point: trainPoint,\n distance: testPosition.distanceTo(trainPoint.position),\n }));\n distances.sort((a, b) => a.distance - b.distance);\n const currentK = Math.min(k, trainingPoints.length);\n const neighbors = distances.slice(0, currentK);\n if (neighbors.length === 0)\n return { predictedClass: -1, neighbors: [] };\n const votes = { 0: 0, 1: 0, 2: 0 };\n neighbors.forEach((neighbor) => votes[neighbor.point.class]++);\n let predictedClass = -1,\n maxVotes = 0,\n tiedClasses = [];\n for (const classId in votes) {\n if (votes[classId] > maxVotes) {\n maxVotes = votes[classId];\n predictedClass = parseInt(classId, 10);\n tiedClasses = [predictedClass];\n } else if (votes[classId] === maxVotes) {\n tiedClasses.push(parseInt(classId, 10));\n }\n }\n if (tiedClasses.length > 1) {\n for (let i = 0; i < neighbors.length; i++) {\n if (tiedClasses.includes(neighbors[i].point.class)) {\n predictedClass = neighbors[i].point.class;\n break;\n }\n }\n if (!tiedClasses.includes(predictedClass)) {\n predictedClass = Math.min(...tiedClasses);\n }\n }\n return { predictedClass, neighbors: neighbors.map((n) => n.point) };\n}\n\nfunction updateDecisionBoundary() {\n if (\n !boundaryPlaneMesh?.geometry?.attributes?.position ||\n !boundaryPlaneMesh?.geometry?.attributes?.color\n )\n return;\n const geometry = boundaryPlaneMesh.geometry;\n const positions = geometry.attributes.position;\n const colors = geometry.attributes.color;\n const tempTestPos = new THREE.Vector3();\n const matrixWorld = boundaryPlaneMesh.matrixWorld;\n const hasPoints = trainingPoints.length > 0;\n const currentKValue = document.getElementById(\"kSlider\")\n ? parseInt(document.getElementById(\"kSlider\").value, 10)\n : kValue;\n const classCounts = { 0: 0, 1: 0, 2: 0, \"-1\": 0 };\n const totalVertices = positions.count;\n for (let i = 0; i < totalVertices; i++) {\n tempTestPos.fromBufferAttribute(positions, i);\n tempTestPos.applyMatrix4(matrixWorld);\n tempTestPos.y = 0;\n let predictedClass = -1;\n if (hasPoints) {\n predictedClass = getKNNPrediction(\n tempTestPos,\n currentKValue\n ).predictedClass;\n }\n classCounts[predictedClass]++;\n let boundaryColor;\n switch (predictedClass) {\n case 0:\n boundaryColor = classColors.boundary0;\n break;\n case 1:\n boundaryColor = classColors.boundary1;\n break;\n case 2:\n boundaryColor = classColors.boundary2;\n break;\n default:\n boundaryColor = classColors.boundaryUndefined;\n }\n const colorObj = new THREE.Color(boundaryColor);\n colors.setXYZ(i, colorObj.r, colorObj.g, colorObj.b);\n }\n colors.needsUpdate = true;\n if (totalVertices > 0) {\n currentBoundaryRatios = {\n 0: classCounts[0] / totalVertices,\n 1: classCounts[1] / totalVertices,\n 2: classCounts[2] / totalVertices,\n \"-1\": classCounts[\"-1\"] / totalVertices,\n };\n } else {\n currentBoundaryRatios = { 0: 1 / 3, 1: 1 / 3, 2: 1 / 3, \"-1\": 0 };\n }\n}\n\nfunction delay(ms) {\n return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\nasync function classifyLandedPoint(landedPointData) {\n if (!landedPointData || landedPointData.aborted) {\n return;\n }\n const currentPointData = landedPointData;\n const landedPosition = currentPointData.mesh.position.clone();\n clearVoteLines();\n playTone(Notes[\"A2\"], 0.4, \"sine\", 0.6, 0.15, 0.25, 0);\n const tempLineMaterial = new THREE.LineBasicMaterial({\n color: 0xffffff,\n linewidth: 1,\n });\n const sequentialDelay = 150;\n\n if (trainingPoints.length > 0) {\n for (const trainPoint of trainingPoints) {\n if (currentPointData.aborted) {\n break;\n }\n const points = [landedPosition, trainPoint.position.clone()];\n const geometry = new THREE.BufferGeometry().setFromPoints(points);\n const tempLine = new THREE.Line(geometry, tempLineMaterial);\n scene.add(tempLine);\n const scale = scaleNotes[trainPoint.class] || scaleNotes[0];\n const oscillatorType = beamOscillatorType;\n const dist = landedPosition.distanceTo(trainPoint.position);\n const maxDist = beamDistanceEffect.maxDist;\n const distFactor = Math.min(dist, maxDist) / maxDist;\n const normalizedDist = Math.pow(distFactor, 0.6);\n const scaleIndex = Math.min(\n scale.length - 1,\n Math.floor(normalizedDist * scale.length)\n );\n const targetFreq = scale[scaleIndex];\n const baseDuration = beamSoundBaseSettings.baseDuration;\n const targetDuration = Math.max(\n beamSoundBaseSettings.minDuration,\n baseDuration * (0.7 + 0.6 * normalizedDist)\n );\n playTone(\n targetFreq,\n targetDuration,\n oscillatorType,\n beamSoundBaseSettings.volMult,\n 0.01,\n 0.04,\n (seededRandom() - 0.5) * 4\n );\n const calculatedDelay = sequentialDelay / playSpeedMultiplier;\n await delay(calculatedDelay);\n if (currentPointData.aborted) {\n scene.remove(tempLine);\n tempLine.geometry?.dispose();\n break;\n }\n scene.remove(tempLine);\n tempLine.geometry?.dispose();\n }\n }\n tempLineMaterial.dispose();\n if (currentPointData.aborted) {\n clearVoteLines();\n return;\n }\n\n const classificationResult = getKNNPrediction(landedPosition, kValue);\n const { predictedClass, neighbors } = classificationResult;\n const newTargetColorHex =\n backgroundColors[predictedClass] || defaultBgColorHex;\n targetBgColor.set(newTargetColorHex);\n document.body.style.backgroundColor = \"#\" + newTargetColorHex;\n\n const chord = classificationChords[predictedClass];\n if (predictedClass !== -1 && predictedClass !== lastPredictedClass) {\n if (chord && audioContext) {\n const chordAttack = 0.1;\n const chordRelease = 1.0;\n const chordVol = 0.35;\n const strumDelay = 0.04;\n chord.forEach((noteFreq, index) => {\n playTone(\n noteFreq,\n chordAttack + chordRelease,\n \"sine\",\n chordVol,\n chordAttack,\n chordRelease,\n 0,\n index * strumDelay\n );\n });\n }\n lastPredictedClass = predictedClass;\n } else if (predictedClass === -1) {\n lastPredictedClass = -1;\n }\n\n if (predictedClass !== -1) {\n if (currentPointData.mesh?.material) {\n currentPointData.mesh.material.color.set(\n classColors[`testPredicted${predictedClass}`]\n );\n }\n } else {\n if (currentPointData.mesh?.material) {\n currentPointData.mesh.material.color.set(\n classColors.testLandedNeutral\n );\n }\n }\n\n drawVoteLines(landedPosition, neighbors);\n\n currentPointData.removeTimer = setTimeout(() => {\n if (!currentPointData.aborted) {\n spawnFallingTestPoint();\n targetBgColor.set(defaultBgColorHex);\n document.body.style.backgroundColor = \"#\" + defaultBgColorHex;\n }\n }, currentDisplayTime);\n}\n\nfunction drawVoteLines(targetPosition, neighborPoints) {\n clearVoteLines();\n const material = new THREE.LineBasicMaterial({\n color: 0xffffff,\n linewidth: 1,\n });\n neighborPoints.forEach((neighbor) => {\n const points = [targetPosition.clone(), neighbor.position.clone()];\n const geometry = new THREE.BufferGeometry().setFromPoints(points);\n const line = new THREE.Line(geometry, material.clone());\n scene.add(line);\n voteLines.push(line);\n });\n}\n\nfunction clearVoteLines() {\n voteLines.forEach((line) => {\n scene.remove(line);\n line.geometry?.dispose();\n line.material?.dispose();\n });\n voteLines.length = 0;\n}\n\nfunction updateKSliderMax() {\n const kSlider = document.getElementById(\"kSlider\");\n const kValueLabel = document.getElementById(\"kValueLabel\");\n if (!kSlider || !kValueLabel) return;\n const maxK = Math.max(1, trainingPoints.length);\n kSlider.max = maxK;\n let currentSliderValue = parseInt(kSlider.value);\n if (currentSliderValue > maxK) {\n kSlider.value = maxK;\n currentSliderValue = maxK;\n }\n if (kValue > maxK) {\n kValue = maxK;\n } else if (trainingPoints.length === 0) {\n kSlider.value = 1;\n currentSliderValue = 1;\n kValue = 1;\n }\n kValue = currentSliderValue;\n kValueLabel.textContent = kValue;\n}\n\nfunction onWindowResize() {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n}\n\nfunction animate(time) {\n requestAnimationFrame(animate);\n controls.update();\n currentBgColor.lerp(targetBgColor, 0.03);\n renderer.setClearColor(currentBgColor);\n const point = fallingTestPoint;\n if (point && point.falling) {\n const currentY = point.mesh.position.y;\n const targetY = point.targetY;\n if (currentY > targetY) {\n point.mesh.position.y = Math.max(\n targetY,\n currentY - currentFallSpeed\n );\n }\n if (point.mesh.position.y <= targetY && point.falling) {\n point.mesh.position.y = targetY;\n point.falling = false;\n if (!point.aborted) {\n classifyLandedPoint(point);\n }\n }\n }\n renderer.render(scene, camera);\n}","js_external":"https://cdn.jsdelivr.net/npm/three@0.138.0/build/three.min.js;https://cdn.jsdelivr.net/npm/three@0.138.0/examples/js/controls/OrbitControls.js"}