| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MS1-V</title> |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| body { |
| overflow: hidden; |
| background: #000; |
| font-family: 'Orbitron', sans-serif; |
| } |
| canvas { |
| position: fixed; |
| top: 0; |
| left: 0; |
| } |
| .title-screen { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: #000; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| flex-direction: column; |
| color: #0ff; |
| text-align: center; |
| z-index: 20; |
| transition: opacity 1s ease-in-out; |
| } |
| .title-screen h1 { |
| font-size: 5em; |
| margin-bottom: 20px; |
| } |
| .title-screen button { |
| padding: 15px 30px; |
| background: rgba(0, 255, 255, 0.2); |
| border: 2px solid #0ff; |
| color: #0ff; |
| cursor: pointer; |
| font-size: 1.2em; |
| border-radius: 10px; |
| transition: all 0.3s; |
| } |
| .title-screen button:hover { |
| background: #0ff; |
| color: #000; |
| } |
| .interface { |
| position: fixed; |
| top: 20px; |
| left: 20px; |
| background: rgba(0, 0, 0, 0.8); |
| border: 2px solid #0ff; |
| padding: 20px; |
| color: #0ff; |
| z-index: 10; |
| display: none; |
| border-radius: 15px; |
| backdrop-filter: blur(5px); |
| } |
| .controls { |
| margin-top: 15px; |
| display: flex; |
| gap: 10px; |
| } |
| .controls button { |
| flex: 1; |
| padding: 12px; |
| background: rgba(0, 255, 255, 0.2); |
| border: 1px solid #0ff; |
| color: #0ff; |
| cursor: pointer; |
| transition: all 0.3s; |
| border-radius: 8px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| .controls button:hover { |
| background: #0ff; |
| color: #000; |
| } |
| .toggle-button { |
| position: fixed; |
| top: 20px; |
| right: 20px; |
| padding: 12px 20px; |
| background: rgba(0, 255, 255, 0.2); |
| color: #0ff; |
| border: 1px solid #0ff; |
| cursor: pointer; |
| z-index: 10; |
| border-radius: 8px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| .toggle-button:hover { |
| background: #0ff; |
| color: #000; |
| } |
| .track-list { |
| margin-top: 20px; |
| } |
| .track-list select { |
| padding: 10px; |
| background: rgba(0, 255, 255, 0.2); |
| border: 1px solid #0ff; |
| color: #0ff; |
| border-radius: 8px; |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="title-screen" id="titleScreen"> |
| <h1>MS1-V</h1> |
| <button id="startButton">Start</button> |
| </div> |
| <button class="toggle-button">Controls</button> |
| <div class="interface"> |
| <input type="file" id="audioFile" accept="audio/*"> |
| <div class="track-list"> |
| <label for="trackSelect">Select Track:</label> |
| <select id="trackSelect"> |
| <option value="">Select a track</option> |
| <option value="track1.mp3">Track 1</option> |
| <option value="track2.mp3">Track 2</option> |
| <option value="track3.mp3">Track 3</option> |
| </select> |
| </div> |
| <div class="controls"> |
| <button id="play">Play</button> |
| <button id="pause">Pause</button> |
| <button id="stop">Stop</button> |
| </div> |
| </div> |
| <script> |
| const scene = new THREE.Scene(); |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000); |
| const renderer = new THREE.WebGLRenderer({ antialias: true }); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| document.body.appendChild(renderer.domElement); |
| |
| let isDragging = false; |
| let previousMousePosition = { x: 0, y: 0 }; |
| let cameraAngle = { x: 0, y: 0 }; |
| const cameraDistance = 100; |
| |
| document.addEventListener('mousedown', (e) => { |
| isDragging = true; |
| previousMousePosition = { x: e.clientX, y: e.clientY }; |
| }); |
| |
| document.addEventListener('mousemove', (e) => { |
| if (!isDragging) return; |
| |
| const deltaMove = { |
| x: e.clientX - previousMousePosition.x, |
| y: e.clientY - previousMousePosition.y |
| }; |
| |
| cameraAngle.x += deltaMove.y * 0.005; |
| cameraAngle.y += deltaMove.x * 0.005; |
| |
| cameraAngle.x = Math.max(-Math.PI/2, Math.min(Math.PI/2, cameraAngle.x)); |
| |
| previousMousePosition = { x: e.clientX, y: e.clientY }; |
| }); |
| |
| document.addEventListener('mouseup', () => { |
| isDragging = false; |
| }); |
| |
| const lineMaterial = new THREE.LineBasicMaterial({ |
| color: 0x00ffff, |
| transparent: true, |
| opacity: 0.3, |
| blending: THREE.AdditiveBlending |
| }); |
| |
| function createBassPattern(frequency, intensity) { |
| const pattern = new THREE.Group(); |
| const geometry = new THREE.TorusKnotGeometry(10 * intensity, 2, 100, 16); |
| const material = new THREE.MeshBasicMaterial({ |
| color: 0x00ffff, |
| wireframe: true, |
| transparent: true, |
| opacity: intensity |
| }); |
| const torusKnot = new THREE.Mesh(geometry, material); |
| pattern.add(torusKnot); |
| |
| for(let i = 0; i < 3; i++) { |
| const sphereGeo = new THREE.SphereGeometry(5 * intensity, 32, 32); |
| const sphereMat = new THREE.MeshBasicMaterial({ |
| color: 0x00ffff, |
| wireframe: true, |
| transparent: true, |
| opacity: intensity * 0.5 |
| }); |
| const sphere = new THREE.Mesh(sphereGeo, sphereMat); |
| sphere.position.setFromSphericalCoords( |
| 20 * intensity, |
| i * Math.PI * 2/3, |
| frequency * Math.PI |
| ); |
| pattern.add(sphere); |
| } |
| return pattern; |
| } |
| |
| function createParticleSystem(count, size, spread) { |
| const geometry = new THREE.BufferGeometry(); |
| const positions = new Float32Array(count * 3); |
| const colors = new Float32Array(count * 3); |
| const scales = new Float32Array(count); |
| |
| for(let i = 0; i < count * 3; i += 3) { |
| positions[i] = (Math.random() - 0.5) * spread; |
| positions[i + 1] = (Math.random() - 0.5) * spread; |
| positions[i + 2] = (Math.random() - 0.5) * spread; |
| scales[i/3] = Math.random(); |
| } |
| |
| geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); |
| geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); |
| geometry.setAttribute('scale', new THREE.BufferAttribute(scales, 1)); |
| |
| const material = new THREE.PointsMaterial({ |
| size: size, |
| vertexColors: true, |
| blending: THREE.AdditiveBlending, |
| transparent: true, |
| opacity: 0.8, |
| }); |
| |
| const particles = new THREE.Points(geometry, material); |
| const lines = new THREE.LineSegments(new THREE.BufferGeometry(), lineMaterial); |
| |
| return { particles, lines }; |
| } |
| |
| const innerSystem = createParticleSystem(3000, 0.5, 80); |
| const midSystem = createParticleSystem(4000, 0.3, 150); |
| const outerSystem = createParticleSystem(5000, 0.2, 200); |
| const bassSystem = createParticleSystem(2000, 1.0, 100); |
| |
| let bassPattern = null; |
| |
| [innerSystem, midSystem, outerSystem, bassSystem].forEach(system => { |
| scene.add(system.particles); |
| scene.add(system.lines); |
| }); |
| |
| camera.position.z = cameraDistance; |
| |
| function updateParticleSystem(system, frequencyData, baseIndex, scale, bass, time) { |
| const positions = system.particles.geometry.attributes.position.array; |
| const colors = system.particles.geometry.attributes.color.array; |
| const scales = system.particles.geometry.attributes.scale.array; |
| |
| const evolutionFactor = Math.sin(time * 0.0005) * 0.5 + 0.5; |
| |
| const linePositions = []; |
| const lineIndices = []; |
| |
| for(let i = 0; i < positions.length; i += 3) { |
| const freqIndex = (baseIndex + Math.floor(i/30)) % frequencyData.length; |
| const frequency = frequencyData[freqIndex] / 255; |
| |
| const angle = (i/3) * 0.1 + time * 0.001; |
| const radius = scale * (0.5 + 0.5 * frequency); |
| |
| if(bass > 0.7) { |
| const bassImpact = Math.pow(bass - 0.7, 2); |
| positions[i] = Math.cos(angle) * radius * Math.sin(angle * 2 + evolutionFactor) * (1 + bassImpact); |
| positions[i + 1] = Math.sin(angle) * radius * Math.cos(angle * 3 + evolutionFactor) * (1 + bassImpact); |
| positions[i + 2] = Math.cos(angle * 2) * radius * Math.sin(angle + evolutionFactor) * (1 + bassImpact); |
| } else { |
| positions[i] *= 1 + frequency * 0.02 * (1 + evolutionFactor); |
| positions[i + 1] *= 1 + frequency * 0.02 * (1 + evolutionFactor); |
| positions[i + 2] *= 1 + frequency * 0.02 * (1 + evolutionFactor); |
| } |
| |
| const distance = Math.sqrt(positions[i]**2 + positions[i+1]**2 + positions[i+2]**2); |
| if(distance > scale) { |
| positions[i] *= scale/distance; |
| positions[i+1] *= scale/distance; |
| positions[i+2] *= scale/distance; |
| } |
| |
| colors[i] = Math.sin(frequency * Math.PI + bass + evolutionFactor) * 0.5 + 0.5; |
| colors[i + 1] = Math.cos(frequency * Math.PI * 0.5 + bass + evolutionFactor) * 0.5 + 0.5; |
| colors[i + 2] = frequency + bass * 0.5; |
| |
| scales[i/3] = frequency * (2 + bass * 2) * (1 + evolutionFactor); |
| |
| if(i % 9 === 0) { |
| linePositions.push(positions[i], positions[i+1], positions[i+2]); |
| if(linePositions.length > 6) { |
| lineIndices.push(linePositions.length/3 - 2, linePositions.length/3 - 1); |
| } |
| } |
| } |
| |
| const lineGeometry = new THREE.BufferGeometry(); |
| lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3)); |
| lineGeometry.setIndex(lineIndices); |
| system.lines.geometry.dispose(); |
| system.lines.geometry = lineGeometry; |
| |
| system.particles.geometry.attributes.position.needsUpdate = true; |
| system.particles.geometry.attributes.color.needsUpdate = true; |
| system.particles.geometry.attributes.scale.needsUpdate = true; |
| } |
| |
| let audioContext, audioAnalyser, audioSource; |
| let audioElement = new Audio(); |
| |
| document.getElementById('audioFile').addEventListener('change', function(event) { |
| audioElement.src = URL.createObjectURL(event.target.files[0]); |
| }); |
| |
| document.getElementById('trackSelect').addEventListener('change', function(event) { |
| audioElement.src = event.target.value; |
| }); |
| |
| document.getElementById('startButton').addEventListener('click', () => { |
| document.getElementById('titleScreen').style.opacity = 0; |
| setTimeout(() => { |
| document.getElementById('titleScreen').style.display = 'none'; |
| }, 1000); |
| }); |
| |
| document.getElementById('play').addEventListener('click', () => audioElement.play()); |
| document.getElementById('pause').addEventListener('click', () => audioElement.pause()); |
| document.getElementById('stop').addEventListener('click', () => { |
| audioElement.pause(); |
| audioElement.currentTime = 0; |
| }); |
| |
| document.querySelector('.toggle-button').addEventListener('click', () => { |
| const interfaceDiv = document.querySelector('.interface'); |
| interfaceDiv.style.display = interfaceDiv.style.display === 'none' ? 'block' : 'none'; |
| }); |
| |
| audioElement.addEventListener('play', () => { |
| audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
| audioSource = audioContext.createMediaElementSource(audioElement); |
| audioAnalyser = audioContext.createAnalyser(); |
| audioSource.connect(audioAnalyser); |
| audioAnalyser.connect(audioContext.destination); |
| audioAnalyser.fftSize = 2048; |
| const bufferLength = audioAnalyser.frequencyBinCount; |
| const dataArray = new Uint8Array(bufferLength); |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| const time = Date.now(); |
| audioAnalyser.getByteFrequencyData(dataArray); |
| |
| const bass = Math.max(...dataArray.slice(0, 10)) / 255; |
| const mid = Math.max(...dataArray.slice(10, 100)) / 255; |
| const treble = Math.max(...dataArray.slice(100, 200)) / 255; |
| |
| camera.position.x = cameraDistance * Math.sin(cameraAngle.y) * Math.cos(cameraAngle.x); |
| camera.position.y = cameraDistance * Math.sin(cameraAngle.x); |
| camera.position.z = cameraDistance * Math.cos(cameraAngle.y) * Math.cos(cameraAngle.x); |
| camera.lookAt(scene.position); |
| |
| if(bass > 0.7) { |
| if(!bassPattern) { |
| bassPattern = createBassPattern(bass, bass - 0.7); |
| scene.add(bassPattern); |
| } |
| bassPattern.scale.set(1 + bass, 1 + bass, 1 + bass); |
| bassPattern.rotation.x += 0.02; |
| bassPattern.rotation.y += 0.03; |
| } else if(bassPattern) { |
| scene.remove(bassPattern); |
| bassPattern = null; |
| } |
| |
| updateParticleSystem(innerSystem, dataArray, 0, 80, bass, time); |
| updateParticleSystem(midSystem, dataArray, 100, 150, bass, time); |
| updateParticleSystem(outerSystem, dataArray, 200, 200, bass, time); |
| updateParticleSystem(bassSystem, dataArray.slice(0, 10), 0, 100 * bass, bass, time); |
| |
| innerSystem.particles.rotation.y += 0.003 * (1 + bass * 0.5); |
| midSystem.particles.rotation.x += 0.002 * (1 + mid * 0.5); |
| outerSystem.particles.rotation.z += 0.001 * (1 + treble * 0.5); |
| if(bassSystem.particles) { |
| bassSystem.particles.rotation.y -= 0.005 * (1 + bass); |
| } |
| |
| renderer.render(scene, camera); |
| } |
| animate(); |
| }); |
| |
| window.addEventListener('resize', () => { |
| camera.aspect = window.innerWidth / window.innerHeight; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
