ar-gesture-controls.js

// AR Gesture Controls for Music Immersion
// Adds hand tracking and spatial gesture controls

class ARGestureControls {
    constructor(app) {
        this.app = app;
        this.handTracking = null;
        this.gestureRecognizer = null;
        
        // Hand data
        this.leftHand = { position: null, rotation: null, pinching: false };
        this.rightHand = { position: null, rotation: null, pinching: false };
        
        // Virtual controls in 3D space
        this.virtualControls = {};
        this.gestureHistory = [];
        this.lastGestureTime = 0;
        
        // Audio gesture mappings
        this.gestureActions = {
            'wave_up': () => this.adjustVolume(0.1),
            'wave_down': () => this.adjustVolume(-0.1),
            'pinch_twist_cw': () => this.adjustFilter(50),
            'pinch_twist_ccw': () => this.adjustFilter(-50),
            'double_tap': () => this.app.generateMusic(),
            'spread_fingers': () => this.triggerVisualExplosion(),
            'clap': () => this.app.togglePlay(),
            'point_forward': () => this.switchVisualization(),
            'grab_air': () => this.captureAudioMoment()
        };
        
        this.init();
    }
    
    async init() {
        try {
            await this.initHandTracking();
            this.createVirtualControls();
            this.startGestureLoop();
            console.log('AR Gesture Controls initialized');
        } catch (error) {
            console.error('Failed to initialize gesture controls:', error);
        }
    }
    
    async initHandTracking() {
        if (navigator.xr && this.app.isAR) {
            const session = this.app.renderer.xr.getSession();
            if (session) {
                // Request hand tracking if available
                try {
                    const inputSources = session.inputSources;
                    for (const inputSource of inputSources) {
                        if (inputSource.hand) {
                            this.handTracking = inputSource.hand;
                            console.log('Hand tracking available');
                        }
                    }
                } catch (error) {
                    console.log('Hand tracking not available, using fallback');
                }
            }
        }
        
        // Initialize gesture recognition
        this.gestureRecognizer = new GestureRecognizer();
    }
    
    createVirtualControls() {
        // Create 3D control panels floating in AR space
        this.createVolumeControl();
        this.createFilterControl();
        this.createVisualizationSwitcher();
        this.createBeatPads();
        this.createSpatialMixer();
    }
    
    createVolumeControl() {
        // Floating volume slider in AR space
        const geometry = new THREE.BoxGeometry(0.5, 0.05, 0.1);
        const material = new THREE.MeshPhongMaterial({ 
            color: 0x00ff00, 
            transparent: true, 
            opacity: 0.7 
        });
        
        const volumeSlider = new THREE.Mesh(geometry, material);
        volumeSlider.position.set(-1, 1.5, -0.5);
        volumeSlider.userData = { 
            type: 'volumeControl', 
            value: 0.7,
            min: 0,
            max: 1
        };
        
        // Volume indicator
        const indicatorGeometry = new THREE.SphereGeometry(0.03);
        const indicatorMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
        const indicator = new THREE.Mesh(indicatorGeometry, indicatorMaterial);
        indicator.position.x = (volumeSlider.userData.value - 0.5) * 0.4;
        volumeSlider.add(indicator);
        
        this.virtualControls.volumeSlider = volumeSlider;
        this.app.scene.add(volumeSlider);
    }
    
    createFilterControl() {
        // Circular filter control
        const geometry = new THREE.TorusGeometry(0.15, 0.02, 8, 16);
        const material = new THREE.MeshPhongMaterial({ 
            color: 0xff6600, 
            transparent: true, 
            opacity: 0.8 
        });
        
        const filterControl = new THREE.Mesh(geometry, material);
        filterControl.position.set(1, 1.5, -0.5);
        filterControl.userData = { 
            type: 'filterControl', 
            frequency: 1000,
            min: 100,
            max: 5000
        };
        
        this.virtualControls.filterControl = filterControl;
        this.app.scene.add(filterControl);
    }
    
    createVisualizationSwitcher() {
        // Floating orbs for different visualizations
        const vizTypes = ['particles', 'waves', 'fractal', 'geometry', 'tunnel'];
        const group = new THREE.Group();
        
        vizTypes.forEach((type, index) => {
            const geometry = new THREE.SphereGeometry(0.08);
            const material = new THREE.MeshPhongMaterial({
                color: new THREE.Color().setHSL(index / vizTypes.length, 1, 0.6),
                transparent: true,
                opacity: 0.8
            });
            
            const orb = new THREE.Mesh(geometry, material);
            orb.position.set(
                Math.cos(index / vizTypes.length * Math.PI * 2) * 0.3,
                1.8,
                Math.sin(index / vizTypes.length * Math.PI * 2) * 0.3 - 0.7
            );
            orb.userData = { type: 'vizSwitcher', vizType: type };
            
            // Add floating animation
            orb.userData.originalY = orb.position.y;
            orb.userData.floatOffset = index * 0.5;
            
            group.add(orb);
        });
        
        this.virtualControls.vizSwitcher = group;
        this.app.scene.add(group);
    }
    
    createBeatPads() {
        // Drum pads in 3D space
        const padTypes = ['kick', 'snare', 'hihat'];
        const group = new THREE.Group();
        
        padTypes.forEach((type, index) => {
            const geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.02);
            const material = new THREE.MeshPhongMaterial({
                color: index === 0 ? 0xff0000 : index === 1 ? 0x00ff00 : 0x0000ff,
                transparent: true,
                opacity: 0.7
            });
            
            const pad = new THREE.Mesh(geometry, material);
            pad.position.set((index - 1) * 0.4, 1.2, -0.3);
            pad.userData = { type: 'beatPad', drumType: type };
            
            group.add(pad);
        });
        
        this.virtualControls.beatPads = group;
        this.app.scene.add(group);
    }
    
    createSpatialMixer() {
        // 3D mixer panel
        const panelGeometry = new THREE.PlaneGeometry(0.8, 0.6);
        const panelMaterial = new THREE.MeshPhongMaterial({
            color: 0x333333,
            transparent: true,
            opacity: 0.8
        });
        
        const panel = new THREE.Mesh(panelGeometry, panelMaterial);
        panel.position.set(0, 1.3, -0.8);
        panel.rotation.x = -0.3;
        
        // Add knobs and sliders to the panel
        for (let i = 0; i < 4; i++) {
            const knobGeometry = new THREE.CylinderGeometry(0.03, 0.03, 0.01);
            const knobMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
            const knob = new THREE.Mesh(knobGeometry, knobMaterial);
            
            knob.position.set((i - 1.5) * 0.15, 0.01, 0.1);
            knob.userData = { 
                type: 'mixerKnob', 
                parameter: ['reverb', 'delay', 'distortion', 'chorus'][i],
                value: 0.5 
            };
            
            panel.add(knob);
        }
        
        this.virtualControls.spatialMixer = panel;
        this.app.scene.add(panel);
    }
    
    startGestureLoop() {
        const gestureLoop = () => {
            this.updateHandTracking();
            this.recognizeGestures();
            this.updateVirtualControls();
            this.handleInteractions();
            
            requestAnimationFrame(gestureLoop);
        };
        
        gestureLoop();
    }
    
    updateHandTracking() {
        if (!this.handTracking) return;
        
        // Get hand pose data from WebXR
        try {
            const session = this.app.renderer.xr.getSession();
            if (session && session.inputSources) {
                session.inputSources.forEach(inputSource => {
                    if (inputSource.hand) {
                        const hand = inputSource.hand;
                        
                        // Get hand joints
                        const indexTip = hand.get('index-finger-tip');
                        const thumbTip = hand.get('thumb-tip');
                        const wrist = hand.get('wrist');
                        
                        if (indexTip && thumbTip && wrist) {
                            const handData = inputSource.handedness === 'left' ? this.leftHand : this.rightHand;
                            
                            handData.position = new THREE.Vector3().setFromMatrixPosition(indexTip.transform.matrix);
                            handData.rotation = new THREE.Quaternion().setFromRotationMatrix(wrist.transform.matrix);
                            
                            // Detect pinching
                            const distance = handData.position.distanceTo(
                                new THREE.Vector3().setFromMatrixPosition(thumbTip.transform.matrix)
                            );
                            handData.pinching = distance < 0.03; // 3cm threshold
                        }
                    }
                });
            }
        } catch (error) {
            // Fallback to simulated hand tracking for development
            this.simulateHandTracking();
        }
    }
    
    simulateHandTracking() {
        // Simulate hand movement for testing without AR
        const time = performance.now() * 0.001;
        
        this.rightHand.position = new THREE.Vector3(
            Math.sin(time) * 0.3,
            1.5 + Math.cos(time * 2) * 0.1,
            -0.5
        );
        
        this.rightHand.pinching = Math.sin(time * 3) > 0.8;
    }
    
    recognizeGestures() {
        const currentTime = performance.now();
        
        if (currentTime - this.lastGestureTime < 200) return; // Debounce
        
        // Analyze hand movements for gestures
        if (this.rightHand.position) {
            const gesture = this.gestureRecognizer.analyze(this.rightHand, this.leftHand);
            
            if (gesture && this.gestureActions[gesture]) {
                this.gestureActions[gesture]();
                this.lastGestureTime = currentTime;
                this.createGestureEffect(this.rightHand.position);
            }
        }
    }
    
    updateVirtualControls() {
        const time = performance.now() * 0.001;
        
        // Animate visualization switcher orbs
        if (this.virtualControls.vizSwitcher) {
            this.virtualControls.vizSwitcher.children.forEach(orb => {
                orb.position.y = orb.userData.originalY + 
                    Math.sin(time * 2 + orb.userData.floatOffset) * 0.05;
                orb.rotation.y = time;
            });
        }
        
        // Update mixer panel
        if (this.virtualControls.spatialMixer) {
            this.virtualControls.spatialMixer.children.forEach(knob => {
                if (knob.userData.type === 'mixerKnob') {
                    knob.rotation.y = knob.userData.value * Math.PI * 2;
                }
            });
        }
    }
    
    handleInteractions() {
        if (!this.rightHand.position || !this.rightHand.pinching) return;
        
        const raycaster = new THREE.Raycaster();
        const handDirection = new THREE.Vector3(0, 0, -1).applyQuaternion(this.rightHand.rotation);
        
        raycaster.set(this.rightHand.position, handDirection);
        
        // Check intersections with virtual controls
        const allControls = [];
        Object.values(this.virtualControls).forEach(control => {
            if (control.children) {
                allControls.push(...control.children);
            } else {
                allControls.push(control);
            }
        });
        
        const intersects = raycaster.intersectObjects(allControls);
        
        if (intersects.length > 0) {
            const target = intersects[0].object;
            this.handleControlInteraction(target);
        }
    }
    
    handleControlInteraction(control) {
        const userData = control.userData;
        
        switch (userData.type) {
            case 'volumeControl':
                const volumePos = this.rightHand.position.x - control.position.x;
                const normalizedVolume = Math.max(0, Math.min(1, (volumePos + 0.25) / 0.5));
                this.adjustVolume(normalizedVolume - userData.value);
                userData.value = normalizedVolume;
                break;
                
            case 'filterControl':
                const angle = Math.atan2(
                    this.rightHand.position.z - control.position.z,
                    this.rightHand.position.x - control.position.x
                );
                const frequency = 100 + (angle + Math.PI) / (2 * Math.PI) * 4900;
                this.setFilterFrequency(frequency);
                break;
                
            case 'vizSwitcher':
                this.app.switchVisualization(userData.vizType);
                this.createSelectionEffect(control);
                break;
                
            case 'beatPad':
                this.triggerDrum(userData.drumType);
                this.createBeatEffect(control);
                break;
                
            case 'mixerKnob':
                const knobValue = (this.rightHand.position.y - control.parent.position.y) * 2;
                this.adjustEffectParameter(userData.parameter, Math.max(0, Math.min(1, knobValue)));
                userData.value = knobValue;
                break;
        }
    }
    
    // Gesture action implementations
    adjustVolume(delta) {
        const currentVolume = Tone.Destination.volume.value;
        const newVolume = Math.max(-60, Math.min(0, currentVolume + delta * 10));
        Tone.Destination.volume.value = newVolume;
        
        console.log(`Volume adjusted: ${newVolume.toFixed(1)} dB`);
    }
    
    adjustFilter(deltaFreq) {
        if (this.app.effects && this.app.effects.filter) {
            const currentFreq = this.app.effects.filter.frequency.value;
            const newFreq = Math.max(100, Math.min(5000, currentFreq + deltaFreq));
            this.app.effects.filter.frequency.value = newFreq;
            
            console.log(`Filter frequency: ${newFreq.toFixed(0)} Hz`);
        }
    }
    
    setFilterFrequency(frequency) {
        if (this.app.effects && this.app.effects.filter) {
            this.app.effects.filter.frequency.value = frequency;
        }
    }
    
    triggerVisualExplosion() {
        // Create particle explosion effect
        const explosionGeometry = new THREE.SphereGeometry(0.01, 8, 8);
        const explosionMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
        
        for (let i = 0; i < 50; i++) {
            const particle = new THREE.Mesh(explosionGeometry, explosionMaterial);
            particle.position.copy(this.rightHand.position);
            
            const velocity = new THREE.Vector3(
                (Math.random() - 0.5) * 2,
                (Math.random() - 0.5) * 2,
                (Math.random() - 0.5) * 2
            );
            
            particle.userData = { velocity, life: 1.0 };
            this.app.scene.add(particle);
            
            // Animate particle
            const animateParticle = () => {
                particle.position.add(particle.userData.velocity);
                particle.userData.velocity.multiplyScalar(0.98);
                particle.userData.life -= 0.02;
                particle.material.opacity = particle.userData.life;
                
                if (particle.userData.life > 0) {
                    requestAnimationFrame(animateParticle);
                } else {
                    this.app.scene.remove(particle);
                }
            };
            
            animateParticle();
        }
    }
    
    switchVisualization() {
        const vizTypes = ['particles', 'waves', 'fractal', 'geometry', 'tunnel'];
        const currentIndex = vizTypes.indexOf(this.app.currentViz);
        const nextIndex = (currentIndex + 1) % vizTypes.length;
        this.app.switchVisualization(vizTypes[nextIndex]);
    }
    
    captureAudioMoment() {
        // Freeze current visualization state
        console.log('Audio moment captured!');
        
        // Visual feedback
        const flash = document.createElement('div');
        flash.style.position = 'fixed';
        flash.style.top = '0';
        flash.style.left = '0';
        flash.style.width = '100%';
        flash.style.height = '100%';
        flash.style.background = 'rgba(255, 255, 255, 0.5)';
        flash.style.pointerEvents = 'none';
        flash.style.zIndex = '9999';
        
        document.body.appendChild(flash);
        
        setTimeout(() => {
            document.body.removeChild(flash);
        }, 100);
    }
    
    triggerDrum(drumType) {
        if (this.app.drums && this.app.drums[drumType]) {
            this.app.drums[drumType].triggerAttackRelease('8n');
        }
    }
    
    adjustEffectParameter(parameter, value) {
        if (this.app.effects && this.app.effects[parameter]) {
            const effect = this.app.effects[parameter];
            
            switch (parameter) {
                case 'reverb':
                    effect.wet.value = value;
                    break;
                case 'delay':
                    effect.wet.value = value * 0.5;
                    break;
                case 'distortion':
                    effect.distortion = value * 0.8;
                    break;
                case 'chorus':
                    effect.wet.value = value * 0.6;
                    break;
            }
        }
    }
    
    // Visual effects for interactions
    createGestureEffect(position) {
        const effectGeometry = new THREE.RingGeometry(0.05, 0.15, 16);
        const effectMaterial = new THREE.MeshBasicMaterial({
            color: 0x00ffff,
            transparent: true,
            opacity: 0.8
        });
        
        const effect = new THREE.Mesh(effectGeometry, effectMaterial);
        effect.position.copy(position);
        effect.lookAt(this.app.camera.position);
        
        this.app.scene.add(effect);
        
        // Animate effect
        const startTime = performance.now();
        const animateEffect = () => {
            const elapsed = performance.now() - startTime;
            const progress = elapsed / 500; // 500ms duration
            
            if (progress < 1) {
                effect.scale.setScalar(1 + progress * 2);
                effect.material.opacity = 0.8 * (1 - progress);
                requestAnimationFrame(animateEffect);
            } else {
                this.app.scene.remove(effect);
            }
        };
        
        animateEffect();
    }
    
    createSelectionEffect(object) {
        const originalScale = object.scale.clone();
        
        // Scale animation
        const animate = () => {
            object.scale.multiplyScalar(1.1);
            
            setTimeout(() => {
                object.scale.copy(originalScale);
            }, 100);
        };
        
        animate();
    }
    
    createBeatEffect(pad) {
        const originalColor = pad.material.color.clone();
        pad.material.color.setHex(0xffffff);
        
        setTimeout(() => {
            pad.material.color.copy(originalColor);
        }, 100);
    }
}

// Simple gesture recognition class
class GestureRecognizer {
    constructor() {
        this.positionHistory = [];
        this.maxHistoryLength = 30; // 30 frames of history
    }
    
    analyze(rightHand, leftHand) {
        if (!rightHand.position) return null;
        
        // Add current position to history
        this.positionHistory.push({
            position: rightHand.position.clone(),
            pinching: rightHand.pinching,
            timestamp: performance.now()
        });
        
        // Keep only recent history
        if (this.positionHistory.length > this.maxHistoryLength) {
            this.positionHistory.shift();
        }
        
        // Need sufficient history for gesture recognition
        if (this.positionHistory.length < 10) return null;
        
        // Analyze movement patterns
        return this.recognizeMovementPattern();
    }
    
    recognizeMovementPattern() {
        const recent = this.positionHistory.slice(-10);
        const start = recent[0].position;
        const end = recent[recent.length - 1].position;
        const movement = end.clone().sub(start);
        
        // Wave gestures
        if (Math.abs(movement.y) > 0.1) {
            return movement.y > 0 ? 'wave_up' : 'wave_down';
        }
        
        // Horizontal gestures
        if (Math.abs(movement.x) > 0.15) {
            return 'point_forward';
        }
        
        // Pinch gestures
        const pinchFrames = recent.filter(frame => frame.pinching).length;
        if (pinchFrames > 5) {
            // Check for twist motion
            const rotationChange = this.calculateRotationChange(recent);
            if (Math.abs(rotationChange) > 0.5) {
                return rotationChange > 0 ? 'pinch_twist_cw' : 'pinch_twist_ccw';
            }
            return 'grab_air';
        }
        
        // Quick movements (clap or double tap simulation)
        const speed = movement.length() / (recent[recent.length - 1].timestamp - recent[0].timestamp) * 1000;
        if (speed > 2) {
            return Math.random() > 0.5 ? 'clap' : 'double_tap';
        }
        
        return null;
    }
    
    calculateRotationChange(frames) {
        if (frames.length < 5) return 0;
        
        // Simple approximation of rotation change
        const startVector = frames[1].position.clone().sub(frames[0].position);
        const endVector = frames[frames.length - 1].position.clone().sub(frames[frames.length - 2].position);
        
        const angle = startVector.angleTo(endVector);
        const cross = new THREE.Vector3().crossVectors(startVector, endVector);
        
        return cross.y > 0 ? angle : -angle;
    }
}

// Export for use in main app
if (typeof module !== 'undefined' && module.exports) {
    module.exports = { ARGestureControls, GestureRecognizer };
}