| | <!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> |
