script.js

// Global variables
        let scene, camera, renderer, terrain, audioContext, analyser, dataArray;
        let audioSource, audioElement, microphone, microphoneStream;
        let isPlaying = false, isMicrophoneActive = false;
        let frameCount = 0, lastTime = Date.now();
        let terrainGeometry, terrainMaterial;
        let cameraAngle = 0;
        const terrainSize = 100;
        const terrainSegments = 64;
        
        // Initialize Three.js scene
        function initThreeJS() {
            const container = document.getElementById('container');
            
            // Scene setup
            scene = new THREE.Scene();
            scene.fog = new THREE.Fog(0x000033, 50, 200);
            
            // Camera setup
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 30, 50);
            camera.lookAt(0, 0, 0);
            
            // Renderer setup
            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0x000022, 0.8);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            container.appendChild(renderer.domElement);
            
            // Create terrain
            createTerrain();
            
            // Add lighting
            addLighting();
            
            // Add particles
            addParticleSystem();
            
            // Start render loop
            animate();
        }
        
        function createTerrain() {
            terrainGeometry = new THREE.PlaneGeometry(terrainSize, terrainSize, terrainSegments, terrainSegments);
            terrainGeometry.rotateX(-Math.PI / 2);
            
            // Create custom shader material
            terrainMaterial = new THREE.ShaderMaterial({
                uniforms: {
                    time: { value: 0 },
                    audioData: { value: new THREE.DataTexture(new Uint8Array(256), 256, 1, THREE.RedFormat) },
                    colorIntensity: { value: 0.75 }
                },
                vertexShader: `
                    uniform float time;
                    uniform sampler2D audioData;
                    varying vec3 vPosition;
                    varying vec3 vNormal;
                    varying float vAudioInfluence;
                    
                    void main() {
                        vPosition = position;
                        
                        // Sample audio data based on position
                        float audioSample = texture2D(audioData, vec2((position.x + 50.0) / 100.0, 0.5)).r;
                        vAudioInfluence = audioSample;
                        
                        // Create base wave motion
                        float wave1 = sin(position.x * 0.1 + time) * 2.0;
                        float wave2 = cos(position.z * 0.1 + time * 0.7) * 1.5;
                        
                        // Apply audio influence
                        float audioHeight = audioSample * 20.0;
                        
                        vec3 newPosition = position;
                        newPosition.y += wave1 + wave2 + audioHeight;
                        
                        vNormal = normalize(normalMatrix * normal);
                        
                        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
                    }
                `,
                fragmentShader: `
                    uniform float time;
                    uniform float colorIntensity;
                    varying vec3 vPosition;
                    varying vec3 vNormal;
                    varying float vAudioInfluence;
                    
                    void main() {
                        // Create dynamic colors based on audio and position
                        float r = sin(vPosition.x * 0.1 + time + vAudioInfluence * 10.0) * 0.5 + 0.5;
                        float g = cos(vPosition.z * 0.1 + time * 0.7 + vAudioInfluence * 8.0) * 0.5 + 0.5;
                        float b = sin(time + vAudioInfluence * 6.0) * 0.5 + 0.5;
                        
                        // Apply audio influence to brightness
                        float brightness = 0.3 + vAudioInfluence * colorIntensity;
                        
                        vec3 color = vec3(r, g, b) * brightness;
                        
                        // Add fresnel-like effect
                        float fresnel = pow(1.0 - dot(vNormal, vec3(0.0, 1.0, 0.0)), 2.0);
                        color += fresnel * vec3(0.0, 0.5, 1.0) * vAudioInfluence;
                        
                        gl_FragColor = vec4(color, 1.0);
                    }
                `,
                wireframe: false,
                side: THREE.DoubleSide
            });
            
            terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
            terrain.receiveShadow = true;
            scene.add(terrain);
        }
        
        function addLighting() {
            // Ambient light
            const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
            scene.add(ambientLight);
            
            // Directional light
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(50, 100, 50);
            directionalLight.castShadow = true;
            directionalLight.shadow.mapSize.width = 2048;
            directionalLight.shadow.mapSize.height = 2048;
            scene.add(directionalLight);
            
            // Point lights that react to audio
            for (let i = 0; i < 3; i++) {
                const light = new THREE.PointLight(0xff00ff, 1, 100);
                light.position.set(
                    (Math.random() - 0.5) * 100,
                    20,
                    (Math.random() - 0.5) * 100
                );
                light.userData = { originalIntensity: 1, phase: i * Math.PI * 0.67 };
                scene.add(light);
            }
        }
        
        function addParticleSystem() {
            const particleCount = 1000;
            const particles = new THREE.BufferGeometry();
            const positions = new Float32Array(particleCount * 3);
            const colors = new Float32Array(particleCount * 3);
            
            for (let i = 0; i < particleCount; i++) {
                positions[i * 3] = (Math.random() - 0.5) * 200;
                positions[i * 3 + 1] = Math.random() * 100;
                positions[i * 3 + 2] = (Math.random() - 0.5) * 200;
                
                colors[i * 3] = Math.random();
                colors[i * 3 + 1] = Math.random();
                colors[i * 3 + 2] = Math.random();
            }
            
            particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
            particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));
            
            const particleMaterial = new THREE.PointsMaterial({
                size: 2,
                vertexColors: true,
                transparent: true,
                opacity: 0.6
            });
            
            const particleSystem = new THREE.Points(particles, particleMaterial);
            particleSystem.userData = { originalPositions: positions.slice() };
            scene.add(particleSystem);
        }
        
        // Audio setup
        function initAudio() {
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
            analyser = audioContext.createAnalyser();
            analyser.fftSize = 256;
            dataArray = new Uint8Array(analyser.frequencyBinCount);
            
            // Create spectrum visualizer bars
            const spectrum = document.getElementById('spectrum');
            for (let i = 0; i < analyser.frequencyBinCount; i++) {
                const bar = document.createElement('div');
                bar.className = 'spectrum-bar';
                spectrum.appendChild(bar);
            }
        }
        
        // Generate procedural demo audio
        function generateDemoAudio() {
            if (!audioContext) initAudio();
            
            const duration = 30; // 30 seconds
            const sampleRate = audioContext.sampleRate;
            const buffer = audioContext.createBuffer(1, duration * sampleRate, sampleRate);
            const data = buffer.getChannelData(0);
            
            // Generate complex harmonic content
            for (let i = 0; i < data.length; i++) {
                const t = i / sampleRate;
                let sample = 0;
                
                // Base frequencies with evolving patterns
                sample += Math.sin(2 * Math.PI * 220 * t) * Math.sin(t * 0.5) * 0.3;
                sample += Math.sin(2 * Math.PI * 330 * t) * Math.cos(t * 0.3) * 0.2;
                sample += Math.sin(2 * Math.PI * 440 * t) * Math.sin(t * 0.7) * 0.25;
                
                // Add some rhythm
                sample *= (Math.sin(t * 8) > 0) ? 1 : 0.3;
                
                // Add evolving harmonics
                for (let h = 2; h <= 5; h++) {
                    sample += Math.sin(2 * Math.PI * 220 * h * t) * Math.sin(t * h * 0.1) * (0.1 / h);
                }
                
                data[i] = sample * 0.3;
            }
            
            startAudioBuffer(buffer);
            document.getElementById('trackInfo').textContent = 'Procedural Demo';
        }
        
        function startAudioBuffer(buffer) {
            if (audioSource) {
                audioSource.stop();
            }
            
            audioSource = audioContext.createBufferSource();
            audioSource.buffer = buffer;
            audioSource.loop = true;
            audioSource.connect(analyser);
            analyser.connect(audioContext.destination);
            audioSource.start();
            isPlaying = true;
        }
        
        // File audio handling
        document.getElementById('audioFile').addEventListener('change', handleAudioFile);
        
        function handleAudioFile(event) {
            const file = event.target.files[0];
            if (!file) return;
            
            if (!audioContext) initAudio();
            
            const reader = new FileReader();
            reader.onload = function(e) {
                audioContext.decodeAudioData(e.target.result)
                    .then(buffer => {
                        startAudioBuffer(buffer);
                        document.getElementById('trackInfo').textContent = file.name;
                    })
                    .catch(err => console.error('Error decoding audio:', err));
            };
            reader.readAsArrayBuffer(file);
        }
        
        // Microphone handling
        function toggleMicrophone() {
            if (!isMicrophoneActive) {
                navigator.mediaDevices.getUserMedia({ audio: true })
                    .then(stream => {
                        if (!audioContext) initAudio();
                        
                        microphoneStream = stream;
                        microphone = audioContext.createMediaStreamSource(stream);
                        microphone.connect(analyser);
                        isMicrophoneActive = true;
                        isPlaying = true;
                        document.getElementById('trackInfo').textContent = 'Microphone Input';
                    })
                    .catch(err => console.error('Microphone access denied:', err));
            } else {
                if (microphoneStream) {
                    microphoneStream.getTracks().forEach(track => track.stop());
                }
                if (microphone) {
                    microphone.disconnect();
                }
                isMicrophoneActive = false;
                isPlaying = false;
                document.getElementById('trackInfo').textContent = 'No audio';
            }
        }
        
        // Control handlers
        document.getElementById('sensitivity').addEventListener('input', (e) => {
            document.getElementById('sensitivityVal').textContent = e.target.value;
        });
        
        document.getElementById('colorIntensity').addEventListener('input', (e) => {
            const value = e.target.value / 100;
            document.getElementById('colorIntensityVal').textContent = e.target.value;
            if (terrainMaterial) {
                terrainMaterial.uniforms.colorIntensity.value = value;
            }
        });
        
        document.getElementById('cameraSpeed').addEventListener('input', (e) => {
            document.getElementById('cameraSpeedVal').textContent = e.target.value;
        });
        
        function toggleWaveform() {
            const waveform = document.getElementById('waveformContainer');
            waveform.style.display = waveform.style.display === 'none' ? 'block' : 'none';
        }
        
        function resetCamera() {
            camera.position.set(0, 30, 50);
            camera.lookAt(0, 0, 0);
            cameraAngle = 0;
        }
        
        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            
            const currentTime = Date.now();
            if (frameCount % 60 === 0) {
                const fps = Math.round(1000 / (currentTime - lastTime) * 60);
                document.getElementById('fps').textContent = fps;
                lastTime = currentTime;
            }
            frameCount++;
            
            if (isPlaying && analyser) {
                analyser.getByteFrequencyData(dataArray);
                updateVisualization();
            }
            
            // Update camera movement
            const cameraSpeed = parseFloat(document.getElementById('cameraSpeed').value);
            cameraAngle += 0.005 * cameraSpeed;
            camera.position.x = Math.sin(cameraAngle) * 60;
            camera.position.z = Math.cos(cameraAngle) * 60;
            camera.lookAt(0, 0, 0);
            
            // Update shader time
            if (terrainMaterial) {
                terrainMaterial.uniforms.time.value = currentTime * 0.001;
            }
            
            renderer.render(scene, camera);
        }
        
        function updateVisualization() {
            const sensitivity = parseFloat(document.getElementById('sensitivity').value) / 50;
            
            // Update terrain with audio data
            if (terrainMaterial && dataArray) {
                const audioTexture = new THREE.DataTexture(dataArray, dataArray.length, 1, THREE.RedFormat);
                audioTexture.needsUpdate = true;
                terrainMaterial.uniforms.audioData.value = audioTexture;
            }
            
            // Update spectrum bars
            const spectrumBars = document.querySelectorAll('.spectrum-bar');
            let totalVolume = 0;
            let dominantFreq = 0;
            let maxAmplitude = 0;
            
            for (let i = 0; i < Math.min(dataArray.length, spectrumBars.length); i++) {
                const amplitude = dataArray[i] / 255;
                spectrumBars[i].style.height = (amplitude * 60) + 'px';
                spectrumBars[i].style.opacity = amplitude;
                
                totalVolume += amplitude;
                if (amplitude > maxAmplitude) {
                    maxAmplitude = amplitude;
                    dominantFreq = (i / dataArray.length) * (audioContext.sampleRate / 2);
                }
            }
            
            // Update info display
            document.getElementById('volume').textContent = Math.round((totalVolume / dataArray.length) * 100) + '%';
            document.getElementById('frequency').textContent = Math.round(dominantFreq) + ' Hz';
            
            // Update point lights
            scene.children.forEach(child => {
                if (child instanceof THREE.PointLight && child.userData.originalIntensity !== undefined) {
                    const audioInfluence = (totalVolume / dataArray.length) * sensitivity;
                    child.intensity = child.userData.originalIntensity + audioInfluence * 3;
                    
                    // Color cycling based on audio
                    const hue = (Date.now() * 0.001 + child.userData.phase + audioInfluence * 10) % 1;
                    child.color.setHSL(hue, 1, 0.5);
                }
            });
            
            // Update particles
            const particles = scene.children.find(child => child instanceof THREE.Points);
            if (particles) {
                const positions = particles.geometry.attributes.position;
                const originalPositions = particles.userData.originalPositions;
                
                for (let i = 0; i < positions.count; i++) {
                    const audioIndex = Math.floor((i / positions.count) * dataArray.length);
                    const audioValue = dataArray[audioIndex] / 255 * sensitivity;
                    
                    positions.setY(i, originalPositions[i * 3 + 1] + audioValue * 20);
                }
                positions.needsUpdate = true;
            }
        }
        
        // Window resize handler
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        // Initialize everything
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                document.getElementById('loading').style.display = 'none';
                initThreeJS();
                initAudio();
            }, 1000);
        });