| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { margin: 0; overflow: hidden; background: #000; } |
| #ui { |
| position: fixed; |
| top: 10px; |
| left: 10px; |
| color: #0f0; |
| background: rgba(0,20,0,0.7); |
| padding: 15px; |
| border: 1px solid #0f0; |
| font-family: monospace; |
| z-index: 100; |
| } |
| .control { margin: 10px 0; } |
| #matrix { |
| position: fixed; |
| top: 0; |
| left: 0; |
| z-index: -1; |
| color: #0f0; |
| font-family: monospace; |
| font-size: 12px; |
| opacity: 0.2; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="ui"> |
| <div class="control"> |
| <button onclick="initAudio()">Start Audio</button> |
| </div> |
| <div class="control"> |
| <label>Particle Speed: <input type="range" id="speed" min="1" max="200" value="100"></label> |
| </div> |
| <div class="control"> |
| <label>Energy Level: <input type="range" id="energy" min="1" max="100" value="50"></label> |
| </div> |
| <div class="control"> |
| <label>Power: <input type="range" id="power" min="1" max="100" value="75"></label> |
| </div> |
| <div class="control"> |
| <button onclick="addParticle()">Add Particle</button> |
| <button onclick="addDarkMatter()">Add Dark Matter</button> |
| </div> |
| <div>Particles: <span id="particleCount">0</span></div> |
| </div> |
| <div id="matrix"></div> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script> |
| let scene, camera, renderer, particles = [], darkMatter = [], plasmaParticles = []; |
| let audioContext; |
| const TUBE_RADIUS = 20; |
| |
| function initAudio() { |
| audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
| } |
| |
| function playCollisionSound() { |
| const oscillator1 = audioContext.createOscillator(); |
| const oscillator2 = audioContext.createOscillator(); |
| const gainNode = audioContext.createGain(); |
| |
| oscillator1.connect(gainNode); |
| oscillator2.connect(gainNode); |
| gainNode.connect(audioContext.destination); |
| |
| oscillator1.frequency.setValueAtTime(440 + Math.random() * 220, audioContext.currentTime); |
| oscillator2.frequency.setValueAtTime(220 + Math.random() * 110, audioContext.currentTime); |
| |
| oscillator1.type = 'sine'; |
| oscillator2.type = 'square'; |
| |
| gainNode.gain.setValueAtTime(0.2, audioContext.currentTime); |
| gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); |
| |
| oscillator1.start(); |
| oscillator2.start(); |
| oscillator1.stop(audioContext.currentTime + 0.3); |
| oscillator2.stop(audioContext.currentTime + 0.3); |
| } |
| |
| function init() { |
| initAudio(); |
| scene = new THREE.Scene(); |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); |
| renderer = new THREE.WebGLRenderer({ antialias: true }); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| document.body.appendChild(renderer.domElement); |
| |
| |
| const tubeGeometry = new THREE.TorusGeometry(TUBE_RADIUS, 2, 32, 100); |
| const tubeMaterial = new THREE.MeshPhongMaterial({ |
| color: 0x00ff00, |
| transparent: true, |
| opacity: 0.3, |
| wireframe: true |
| }); |
| const tube = new THREE.Mesh(tubeGeometry, tubeMaterial); |
| scene.add(tube); |
| |
| |
| const light = new THREE.PointLight(0xffffff, 1); |
| light.position.set(0, 0, 50); |
| scene.add(light); |
| scene.add(new THREE.AmbientLight(0x404040)); |
| |
| camera.position.z = 50; |
| |
| |
| initMatrix(); |
| } |
| |
| function initMatrix() { |
| const matrix = document.getElementById('matrix'); |
| const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()"; |
| setInterval(() => { |
| let str = ''; |
| for(let i = 0; i < 50; i++) { |
| for(let j = 0; j < 100; j++) { |
| str += chars[Math.floor(Math.random() * chars.length)]; |
| } |
| str += '\n'; |
| } |
| matrix.textContent = str; |
| }, 50); |
| } |
| |
| function addParticle() { |
| const geometry = new THREE.SphereGeometry(0.3, 16, 16); |
| const material = new THREE.MeshPhongMaterial({ |
| color: 0x00ff00, |
| emissive: 0x00ff00, |
| emissiveIntensity: 0.5 |
| }); |
| |
| const particle = new THREE.Mesh(geometry, material); |
| particle.userData = { |
| angle: Math.random() * Math.PI * 2, |
| speed: Math.random() * 0.02 + 0.01, |
| direction: Math.random() > 0.5 ? 1 : -1, |
| phase: Math.random() * Math.PI * 2, |
| energy: 100 |
| }; |
| |
| particles.push(particle); |
| scene.add(particle); |
| updateParticleCount(); |
| } |
| |
| function addDarkMatter() { |
| const geometry = new THREE.SphereGeometry(1, 32, 32); |
| const material = new THREE.MeshPhongMaterial({ |
| color: 0x000066, |
| transparent: true, |
| opacity: 0.3 |
| }); |
| |
| const dm = new THREE.Mesh(geometry, material); |
| dm.position.set( |
| (Math.random() - 0.5) * TUBE_RADIUS * 2, |
| (Math.random() - 0.5) * TUBE_RADIUS * 2, |
| (Math.random() - 0.5) * TUBE_RADIUS * 2 |
| ); |
| |
| darkMatter.push(dm); |
| scene.add(dm); |
| } |
| |
| function createPlasmaExplosion(position) { |
| const particleCount = 30; |
| for(let i = 0; i < particleCount; i++) { |
| const geometry = new THREE.SphereGeometry(0.1, 8, 8); |
| const material = new THREE.MeshPhongMaterial({ |
| color: 0x00ff00, |
| emissive: 0x00ff00, |
| emissiveIntensity: 1 |
| }); |
| |
| const plasma = new THREE.Mesh(geometry, material); |
| plasma.position.copy(position); |
| |
| const velocity = new THREE.Vector3( |
| (Math.random() - 0.5) * 0.5, |
| (Math.random() - 0.5) * 0.5, |
| (Math.random() - 0.5) * 0.5 |
| ); |
| |
| plasma.userData = { |
| velocity: velocity, |
| lifetime: 100, |
| maxLifetime: 100 |
| }; |
| |
| plasmaParticles.push(plasma); |
| scene.add(plasma); |
| } |
| } |
| |
| function updateParticles() { |
| const speed = document.getElementById('speed').value / 50; |
| const energy = document.getElementById('energy').value / 100; |
| const power = document.getElementById('power').value / 100; |
| |
| |
| particles.forEach((particle, index) => { |
| particle.userData.angle += particle.userData.speed * speed * particle.userData.direction; |
| |
| particle.position.x = Math.cos(particle.userData.angle) * TUBE_RADIUS; |
| particle.position.y = Math.sin(particle.userData.angle) * TUBE_RADIUS; |
| particle.position.z = Math.sin(particle.userData.phase) * 2; |
| |
| particle.userData.phase += 0.01 * particle.userData.direction; |
| |
| |
| for(let i = index + 1; i < particles.length; i++) { |
| const other = particles[i]; |
| if(particle.position.distanceTo(other.position) < 0.6) { |
| createPlasmaExplosion(particle.position); |
| particle.userData.energy -= power * 10; |
| other.userData.energy -= power * 10; |
| playCollisionSound(); |
| } |
| } |
| |
| if(particle.userData.energy <= 0) { |
| scene.remove(particle); |
| particles.splice(index, 1); |
| updateParticleCount(); |
| } |
| }); |
| |
| |
| plasmaParticles.forEach((plasma, index) => { |
| plasma.position.add(plasma.userData.velocity); |
| plasma.userData.lifetime--; |
| plasma.material.opacity = plasma.userData.lifetime / plasma.userData.maxLifetime; |
| |
| if(plasma.userData.lifetime <= 0) { |
| scene.remove(plasma); |
| plasmaParticles.splice(index, 1); |
| } |
| }); |
| } |
| |
| function updateParticleCount() { |
| document.getElementById('particleCount').textContent = particles.length; |
| } |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| updateParticles(); |
| renderer.render(scene, camera); |
| } |
| |
| init(); |
| animate(); |
| </script> |
| </body> |
| </html> |
