import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // Import GLTFLoader import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js'; // For HTML labels import { HandLandmarker, FilesetResolver } from 'https://esm.sh/@mediapipe/tasks-vision@0.10.14'; import ForceGraph3D from 'https://esm.sh/3d-force-graph'; // Switched to esm.sh for better dependency handling import { EffectComposer, RenderPass, EffectPass, BloomEffect } from 'postprocessing'; // For bloom effect on the graph import { AudioManager } from 'audioManager'; // Import the AudioManager import { SpeechManager } from 'SpeechManager'; // Import SpeechManager export class Game { // Added export here constructor(renderDiv) { this.renderDiv = renderDiv; this.scene = null; this.camera = null; this.renderer = null; this.videoElement = null; this.handLandmarker = null; this.lastVideoTime = -1; this.hands = []; // Stores data about detected hands (landmarks, anchor position, line group) this.handLineMaterial = null; // Material for hand lines this.fingertipMaterialHand1 = null; // Material for first hand's fingertip circles (blue) this.fingertipMaterialHand2 = null; // Material for second hand's fingertip circles (green) this.fingertipLandmarkIndices = [0, 4, 8, 12, 16, 20]; // WRIST + TIP landmarks this.handConnections = null; // Landmark connection definitions // this.handCollisionRadius = 30; // Conceptual radius for hand collision, was 25 (sphere radius) - Not needed for template this.gameState = 'loading'; // loading, ready, tracking, error this.gameOverText = null; // Will be repurposed or simplified // this.startButton = null; // Add reference for start button - REMOVED // this.startScreenOverlay = null; // Reference for the start screen overlay - REMOVED this.clock = new THREE.Clock(); this.audioManager = new AudioManager(); // Create an instance of AudioManager this.lastLandmarkPositions = [[], []]; // Store last known smoothed positions for each hand's landmarks this.smoothingFactor = 0.4; // Alpha for exponential smoothing (0 < alpha <= 1). Smaller = more smoothing. this.loadedModels = {}; // To store loaded models if any (e.g. a generic hand model in future) this.speechManager = null; this.THUMB_TIP_INDEX = 4; this.INDEX_FINGER_TIP_INDEX = 8; this.PINCH_THRESHOLD_SCREEN = 50; // Screen-space distance in pixels (ortho camera units) this.NODE_PICK_THRESHOLD_SCREEN = 80; // Increased: How close the pinch has to be to a node's projection to pick it this.draggedNodeInfo = { handIndex: -1, node: null, screenOffset: new THREE.Vector2(), initialNodeWorldPos: new THREE.Vector3() }; // Simplified draggedNodeInfo this.speechBubble = null; this.speechBubbleTimeout = null; this.isSpeechActive = false; // Track if speech recognition is active for styling this.forceGraphContainer = null; // Container for the 3D force graph this.forceGraph = null; // Instance of the 3D force graph this.graphComposer = null; // EffectComposer for the force graph this.bloomEffect = null; // BloomEffect instance for the graph this.css2DRenderer = null; // For HTML labels on nodes this.interactionMode = 'drag'; // 'drag', 'rotate', 'zoom' this.interactionModeMenu = null; // Reference to the UI menu container this.FINGERTIP_INDICES_FOR_FIST = [8, 12, 16, 20]; // Index, Middle, Ring, Pinky tips this.WRIST_INDEX = 0; this.MIDDLE_FINGER_MCP_INDEX = 9; // Middle finger Metacarpophalangeal joint // Threshold for fist detection: ratio of fingertip-to-wrist distance vs wrist-to-middle_mcp distance. // If (fingertip_dist_to_wrist / wrist_to_middle_mcp_dist) < this_ratio, finger is curled. this.FIST_CURL_THRESHOLD_RATIO = 0.75; // Lower means fingers must be closer to wrist. Tunable. this.MIN_FINGERS_CURLED_FOR_FIST = 3; // At least 3 of the 4 main fingers must be curled. this.ROTATION_SENSITIVITY_X = 0.005; // Radians per pixel for horizontal rotation this.ROTATION_SENSITIVITY_Y = 0.003; // Radians per pixel for vertical rotation // this.MAX_PITCH_ANGLE = Math.PI / 2 - 0.01; // No longer needed // this.MIN_PITCH_ANGLE = 0.01; // No longer needed this.initialZoomWristDistance = null; // For zoom mode: initial distance between wrists this.initialZoomCameraDistance = null; // For zoom mode: initial camera distance from target this.ZOOM_SENSITIVITY = 1.8; // Higher values make zoom more responsive to hand distance changes this.MIN_CAMERA_DISTANCE_GRAPH = 2; // Min camera distance to target for the force graph this.MAX_CAMERA_DISTANCE_GRAPH = 10; // Decreased: can't zoom out as much // Initialize asynchronously this._init().catch(error => { console.error("Initialization failed:", error); this._showError("Initialization failed. Check console."); }); } async _init() { this._applyStyles(); // Apply CSS directly this._setupDOM(); // Sets up basic DOM, including speech bubble container this._setupThree(); this._setupForceGraph(); // Setup the 3D force graph this._setupSpeechRecognition(); // Initialize SpeechManager await this._loadAssets(); // Add asset loading step await this._setupHandTracking(); // This needs to complete before we can proceed // Ensure webcam is playing before starting game logic dependent on it await this.videoElement.play(); window.addEventListener('resize', this._onResize.bind(this)); this.gameState = 'tracking'; // Change state to tracking directly // Start game logic immediately after initialization this._startGame(); this._animate(); // Start the animation loop (it will check state) } _setupDOM() { this.renderDiv.style.position = 'relative'; this.renderDiv.style.width = '100vw'; // Use viewport units for fullscreen this.renderDiv.style.height = '100vh'; this.renderDiv.style.overflow = 'hidden'; this.renderDiv.style.background = '#111'; // Fallback background // --- Start Screen Overlay REMOVED --- this.videoElement = document.createElement('video'); this.videoElement.style.position = 'absolute'; this.videoElement.style.top = '0'; this.videoElement.style.left = '0'; this.videoElement.style.width = '100%'; this.videoElement.style.height = '100%'; this.videoElement.style.objectFit = 'cover'; this.videoElement.style.transform = 'scaleX(-1)'; // Mirror view for intuitive control this.videoElement.style.filter = 'grayscale(100%)'; // Make webcam feed black and white this.videoElement.autoplay = true; this.videoElement.muted = true; // Mute video to avoid feedback loops if audio was captured this.videoElement.playsInline = true; this.videoElement.style.zIndex = '0'; // Ensure video is behind THREE canvas this.renderDiv.appendChild(this.videoElement); // Container for Status text (formerly Game Over) and restart hint this.gameOverContainer = document.createElement('div'); this.gameOverContainer.style.position = 'absolute'; this.gameOverContainer.style.top = '50%'; this.gameOverContainer.style.left = '50%'; this.gameOverContainer.style.transform = 'translate(-50%, -50%)'; this.gameOverContainer.style.zIndex = '10'; this.gameOverContainer.style.display = 'none'; // Hidden initially this.gameOverContainer.style.pointerEvents = 'none'; // Don't block clicks this.gameOverContainer.style.textAlign = 'center'; // Center text elements within this.gameOverContainer.style.color = 'white'; // Default color, can be changed by _showError this.gameOverContainer.style.textShadow = '2px 2px 4px black'; this.gameOverContainer.style.fontFamily = '"Arial Black", Gadget, sans-serif'; // Main Status Text (formerly Game Over Text) this.gameOverText = document.createElement('div'); // Will be 'gameOverText' internally this.gameOverText.innerText = 'STATUS'; // Generic placeholder this.gameOverText.style.fontSize = 'clamp(36px, 10vw, 72px)'; // Responsive font size this.gameOverText.style.fontWeight = 'bold'; this.gameOverText.style.marginBottom = '10px'; // Space below main text this.gameOverContainer.appendChild(this.gameOverText); // Restart Hint Text (may or may not be shown depending on context) this.restartHintText = document.createElement('div'); this.restartHintText.innerText = '(click to restart tracking)'; this.restartHintText.style.fontSize = 'clamp(16px, 3vw, 24px)'; this.restartHintText.style.fontWeight = 'normal'; this.restartHintText.style.opacity = '0.8'; // Slightly faded this.gameOverContainer.appendChild(this.restartHintText); this.renderDiv.appendChild(this.gameOverContainer); // ScoreDisplay removed // Watermelon (Center Emoji Marker) setup removed // Chad Image Marker setup removed // Start Button REMOVED // --- Speech Bubble --- this.speechBubble = document.createElement('div'); this.speechBubble.id = 'speech-bubble'; this.speechBubble.style.position = 'absolute'; this.speechBubble.style.top = '20px'; // Changed from bottom this.speechBubble.style.left = '50%'; this.speechBubble.style.transform = 'translateX(-50%)'; this.speechBubble.style.padding = '15px 25px'; this.speechBubble.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; this.speechBubble.style.border = '2px solid #007bff'; this.speechBubble.style.borderRadius = '15px'; this.speechBubble.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)'; this.speechBubble.style.color = '#333'; this.speechBubble.style.fontFamily = '"Arial", sans-serif'; this.speechBubble.style.fontSize = 'clamp(16px, 3vw, 22px)'; this.speechBubble.style.maxWidth = '80%'; this.speechBubble.style.textAlign = 'center'; this.speechBubble.style.zIndex = '25'; // Above most things but below modal popups if any this.speechBubble.style.opacity = '0'; // Hidden initially, fade in // Added boxShadow, border, padding, fontSize, top to transition for smooth active state changes this.speechBubble.style.transition = 'opacity 0.5s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, padding 0.3s ease-in-out, font-size 0.3s ease-in-out, top 0.3s ease-in-out'; this.speechBubble.style.pointerEvents = 'none'; // Not interactive this.speechBubble.innerHTML = "..."; // Default text this.renderDiv.appendChild(this.speechBubble); // --- Force Graph Container --- this.forceGraphContainer = document.createElement('div'); this.forceGraphContainer.id = 'force-graph-container'; this.forceGraphContainer.style.position = 'absolute'; this.forceGraphContainer.style.top = '0'; this.forceGraphContainer.style.left = '0'; this.forceGraphContainer.style.width = '100%'; this.forceGraphContainer.style.height = '100%'; this.forceGraphContainer.style.zIndex = '2'; // Above hand tracking (1), below UI elements (10+) this.forceGraphContainer.style.pointerEvents = 'auto'; // Allow graph interactions // this.forceGraphContainer.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; // Temporary diagnostic background REMOVED this.renderDiv.appendChild(this.forceGraphContainer); // --- Interaction Mode Menu --- this.interactionModeMenu = document.createElement('div'); this.interactionModeMenu.id = 'interaction-mode-menu'; ['Drag', 'Rotate', 'Zoom'].forEach(modeName => { const option = document.createElement('div'); option.classList.add('mode-option'); option.id = `mode-${modeName.toLowerCase()}`; option.textContent = modeName; this.interactionModeMenu.appendChild(option); }); this.renderDiv.appendChild(this.interactionModeMenu); this._updateInteractionModeUI(); // Set initial active state } _setupThree() { const width = this.renderDiv.clientWidth; const height = this.renderDiv.clientHeight; this.scene = new THREE.Scene(); // Using OrthographicCamera for a 2D-like overlay effect this.camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000); this.camera.position.z = 100; // Position along Z doesn't change scale in Ortho this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); this.renderer.setSize(width, height); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.domElement.style.position = 'absolute'; this.renderer.domElement.style.top = '0'; this.renderer.domElement.style.left = '0'; this.renderer.domElement.style.zIndex = '1'; // Canvas on top of video this.renderDiv.appendChild(this.renderer.domElement); const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9); directionalLight.position.set(0, 0, 100); // Pointing from behind camera this.scene.add(directionalLight); // Setup hand visualization (palm circles removed, lines will be added later) for (let i = 0; i < 2; i++) { // Support up to 2 hands const lineGroup = new THREE.Group(); lineGroup.visible = false; this.scene.add(lineGroup); this.hands.push({ landmarks: null, anchorPos: new THREE.Vector3(), lineGroup: lineGroup, isPinching: false, // Added to track pinch state pinchScreenPos: new THREE.Vector2(), // Store screen position of the pinch midpoint isFistClosed: false, // Track fist state for rotation lastFistScreenPos: new THREE.Vector2() // Store last screen position of fist for delta calculation // removed pickedUpGhost, pinchPointWorld }); } this.handLineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 8 }); // White this.fingertipMaterialHand1 = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide }); // White this.fingertipMaterialHand2 = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide }); // White // Define connections for MediaPipe hand landmarks // See: https://developers.google.com/mediapipe/solutions/vision/hand_landmarker#hand_landmarks this.handConnections = [ // Thumb [0, 1], [1, 2], [2, 3], [3, 4], // Index finger [0, 5], [5, 6], [6, 7], [7, 8], // Middle finger [0, 9], [9, 10], [10, 11], [11, 12], // Ring finger [0, 13], [13, 14], [14, 15], [15, 16], // Pinky [0, 17], [17, 18], [18, 19], [19, 20], // Palm [5, 9], [9, 13], [13, 17] // Connect base of fingers ]; // Particle resources removed // Ground line removed } async _loadAssets() { console.log("Loading assets..."); // const textureLoader = new THREE.TextureLoader(); // Only if loading other textures // const gltfLoader = new GLTFLoader(); // Only if loading other models try { // Ghost Textures loading removed // Ghost GLTF Model loading removed (was already commented out) console.log("No game-specific assets to load for template."); } catch (error) { console.error("Error loading assets:", error); this._showError("Failed to load assets."); // Generic message throw error; // Stop initialization } } async _setupHandTracking() { try { console.log("Setting up Hand Tracking..."); const vision = await FilesetResolver.forVisionTasks( 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm' ); this.handLandmarker = await HandLandmarker.createFromOptions(vision, { baseOptions: { modelAssetPath: `https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task`, delegate: 'GPU', // Use GPU if available }, numHands: 2, runningMode: 'VIDEO', // Process video stream }); console.log("HandLandmarker created."); console.log("Requesting webcam access..."); const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false, }); this.videoElement.srcObject = stream; console.log("Webcam stream obtained."); // Wait for video metadata to load to ensure dimensions are available return new Promise((resolve) => { this.videoElement.onloadedmetadata = () => { console.log("Webcam metadata loaded."); // Adjust video size slightly after metadata is loaded if needed, but CSS handles most this.videoElement.style.width = this.renderDiv.clientWidth + 'px'; this.videoElement.style.height = this.renderDiv.clientHeight + 'px'; resolve(); }; }); } catch (error) { console.error('Error setting up Hand Tracking or Webcam:', error); this._showError(`Webcam/Hand Tracking Error: ${error.message}. Please allow camera access.`); throw error; // Re-throw to stop initialization } } // _startSpawning, _scheduleNextSpawn, _stopSpawning, _spawnGhost methods removed. _updateHands() { if (!this.handLandmarker || !this.videoElement.srcObject || this.videoElement.readyState < 2 || this.videoElement.videoWidth === 0) return; const videoTime = this.videoElement.currentTime; if (videoTime > this.lastVideoTime) { this.lastVideoTime = videoTime; let results; // Declare results here to make it available throughout the `if` block's scope, including catch and finally (if any) try { results = this.handLandmarker.detectForVideo(this.videoElement, performance.now()); const videoParams = this._getVisibleVideoParameters(); if (!videoParams) return; // Early exit if video params are not ready const canvasWidth = this.renderDiv.clientWidth; const canvasHeight = this.renderDiv.clientHeight; for (let i = 0; i < this.hands.length; i++) { const hand = this.hands[i]; if (results.landmarks && results.landmarks[i]) { let currentRawLandmarks = results.landmarks[i]; if (!this.lastLandmarkPositions[i] || this.lastLandmarkPositions[i].length !== currentRawLandmarks.length) { this.lastLandmarkPositions[i] = currentRawLandmarks.map(lm => ({ ...lm })); } const smoothedLandmarks = currentRawLandmarks.map((lm, lmIndex) => { const prevLm = this.lastLandmarkPositions[i][lmIndex]; return { x: this.smoothingFactor * lm.x + (1 - this.smoothingFactor) * prevLm.x, y: this.smoothingFactor * lm.y + (1 - this.smoothingFactor) * prevLm.y, z: this.smoothingFactor * lm.z + (1 - this.smoothingFactor) * prevLm.z, }; }); this.lastLandmarkPositions[i] = smoothedLandmarks.map(lm => ({ ...lm })); hand.landmarks = smoothedLandmarks; const palm = smoothedLandmarks[this.MIDDLE_FINGER_MCP_INDEX]; const palmScreenPos = this._projectLandmarkToScreen(palm, videoParams, canvasWidth, canvasHeight); if (palmScreenPos) { hand.anchorPos.set(palmScreenPos.x, palmScreenPos.y, 1); } // --- Interaction Mode Specific Logic --- if (this.interactionMode === 'drag') { if (hand.landmarks.length > Math.max(this.THUMB_TIP_INDEX, this.INDEX_FINGER_TIP_INDEX)) { const thumbTip = hand.landmarks[this.THUMB_TIP_INDEX]; const indexTip = hand.landmarks[this.INDEX_FINGER_TIP_INDEX]; const thumbTipScreen = this._projectLandmarkToScreen(thumbTip, videoParams, canvasWidth, canvasHeight); const indexTipScreen = this._projectLandmarkToScreen(indexTip, videoParams, canvasWidth, canvasHeight); if (thumbTipScreen && indexTipScreen) { const distance = thumbTipScreen.distanceTo(indexTipScreen); const prevPinchState = hand.isPinching; hand.isPinching = distance < this.PINCH_THRESHOLD_SCREEN; if (hand.isPinching) { hand.pinchScreenPos.lerpVectors(thumbTipScreen, indexTipScreen, 0.5); } if (hand.isPinching && !prevPinchState) this._handlePinchStart(i, hand.pinchScreenPos); else if (!hand.isPinching && prevPinchState) this._handlePinchEnd(i); else if (hand.isPinching && prevPinchState && this.draggedNodeInfo.handIndex === i && this.draggedNodeInfo.node) { this._handlePinchMove(i, hand.pinchScreenPos); } } else { if (hand.isPinching) this._handlePinchEnd(i); hand.isPinching = false; } } else { if (hand.isPinching) this._handlePinchEnd(i); hand.isPinching = false; } if (hand.isFistClosed) hand.isFistClosed = false; } else if (this.interactionMode === 'rotate') { const prevFistState = hand.isFistClosed; hand.isFistClosed = this._isFist(hand.landmarks); const fistReferenceLandmark = hand.landmarks[this.WRIST_INDEX] || hand.landmarks[this.MIDDLE_FINGER_MCP_INDEX]; const fistScreenPos = fistReferenceLandmark ? this._projectLandmarkToScreen(fistReferenceLandmark, videoParams, canvasWidth, canvasHeight) : null; if (fistScreenPos) { if (hand.isFistClosed && !prevFistState) { hand.lastFistScreenPos.copy(fistScreenPos); } else if (hand.isFistClosed && prevFistState) { const deltaX = fistScreenPos.x - hand.lastFistScreenPos.x; const deltaY = fistScreenPos.y - hand.lastFistScreenPos.y; if (this.forceGraph && this.forceGraph.controls() && this.forceGraph.camera()) { const controls = this.forceGraph.controls(); const camera = this.forceGraph.camera(); const offset = new THREE.Vector3().copy(camera.position).sub(controls.target); let radius = offset.length(); let phi = Math.acos(THREE.MathUtils.clamp(offset.y / radius, -1, 1)); let theta = Math.atan2(offset.x, offset.z); theta += deltaX * this.ROTATION_SENSITIVITY_X; phi -= deltaY * this.ROTATION_SENSITIVITY_Y; offset.x = radius * Math.sin(phi) * Math.sin(theta); offset.y = radius * Math.cos(phi); offset.z = radius * Math.sin(phi) * Math.cos(theta); camera.position.copy(controls.target).add(offset); camera.lookAt(controls.target); controls.update(); } hand.lastFistScreenPos.copy(fistScreenPos); } } else { hand.isFistClosed = false; } if (hand.isPinching) this._handlePinchEnd(i); hand.isPinching = false; } else if (this.interactionMode === 'zoom') { // Zoom logic is handled globally after individual hand processing. // Pinch/fist are reset globally for zoom mode. } this._updateHandLines(i, smoothedLandmarks, videoParams, canvasWidth, canvasHeight); hand.lineGroup.visible = true; } else { // No landmarks for this hand hand.landmarks = null; if (hand.lineGroup) hand.lineGroup.visible = false; if (hand.isPinching) this._handlePinchEnd(i); hand.isPinching = false; hand.isFistClosed = false; } } // End of for loop for hands // --- Global Interaction Mode Logic (e.g., Zoom using two hands) --- // This logic now correctly sits *inside* the try block, ensuring `results` is in scope. if (this.interactionMode === 'zoom') { // Check if results and necessary landmarks are available if (results && results.landmarks && results.landmarks[0] && results.landmarks[1] && this.hands[0].landmarks && this.hands[1].landmarks && this.forceGraph && this.forceGraph.controls() && this.forceGraph.camera()) { const wrist0 = this.hands[0].landmarks[this.WRIST_INDEX]; const wrist1 = this.hands[1].landmarks[this.WRIST_INDEX]; if (wrist0 && wrist1) { const dx = wrist0.x - wrist1.x; const dy = wrist0.y - wrist1.y; const dz = wrist0.z - wrist1.z; const currentWristDist = Math.sqrt(dx * dx + dy * dy + dz * dz); const controls = this.forceGraph.controls(); const camera = this.forceGraph.camera(); const currentCamDistanceToTarget = camera.position.distanceTo(controls.target); if (this.initialZoomWristDistance === null || this.initialZoomCameraDistance === null) { this.initialZoomWristDistance = currentWristDist; this.initialZoomCameraDistance = currentCamDistanceToTarget; } else { if (this.initialZoomWristDistance < 0.001) { this.initialZoomWristDistance = currentWristDist > 0.001 ? currentWristDist : 0.01; this.initialZoomCameraDistance = currentCamDistanceToTarget; // return; // Cannot return from inside try like this, affects finally. // Instead, skip this iteration of zoom logic: // No specific action needed here, the `else` block will handle the next frame. } else { // Only proceed if initialZoomWristDistance is valid let scaleFactor = currentWristDist / this.initialZoomWristDistance; scaleFactor = Math.pow(scaleFactor, this.ZOOM_SENSITIVITY); let newCamDist = this.initialZoomCameraDistance * scaleFactor; newCamDist = THREE.MathUtils.clamp(newCamDist, this.MIN_CAMERA_DISTANCE_GRAPH, this.MAX_CAMERA_DISTANCE_GRAPH); if (Math.abs(newCamDist - currentCamDistanceToTarget) > 0.5) { const viewDirection = new THREE.Vector3().subVectors(camera.position, controls.target).normalize(); camera.position.copy(controls.target).addScaledVector(viewDirection, newCamDist); controls.update(); } } } } else { this.initialZoomWristDistance = null; this.initialZoomCameraDistance = null; } } else { this.initialZoomWristDistance = null; this.initialZoomCameraDistance = null; } // Reset pinch/fist states for both hands while in zoom mode this.hands.forEach((hand, index) => { if (hand.isPinching) this._handlePinchEnd(index); hand.isPinching = false; hand.isFistClosed = false; }); } // End of zoom logic } catch (error) { console.error("Error during hand detection or processing:", error); // If an error occurs, `results` might be undefined or partially processed. // The loop or global logic might have issues. // Consider resetting states or showing an error to the user. // For now, just log it. The `finally` block isn't strictly needed here // as there's no resource to release that isn't handled by GC. } } // End of `if (videoTime > this.lastVideoTime)` } // End of `_updateHands` _getVisibleVideoParameters() { if (!this.videoElement || this.videoElement.videoWidth === 0 || this.videoElement.videoHeight === 0) { return null; } const vNatW = this.videoElement.videoWidth; const vNatH = this.videoElement.videoHeight; const rW = this.renderDiv.clientWidth; const rH = this.renderDiv.clientHeight; if (vNatW === 0 || vNatH === 0 || rW === 0 || rH === 0) return null; const videoAR = vNatW / vNatH; const renderDivAR = rW / rH; let finalVideoPixelX, finalVideoPixelY; let visibleVideoPixelWidth, visibleVideoPixelHeight; if (videoAR > renderDivAR) { // Video is wider than renderDiv, scaled to fit renderDiv height, cropped horizontally. const scale = rH / vNatH; // Scale factor based on height. const scaledVideoWidth = vNatW * scale; // Width of video if scaled to fit renderDiv height. // Total original video pixels cropped horizontally (from both sides combined). const totalCroppedPixelsX = (scaledVideoWidth - rW) / scale; finalVideoPixelX = totalCroppedPixelsX / 2; // Pixels cropped from the left of original video. finalVideoPixelY = 0; // No vertical cropping. visibleVideoPixelWidth = vNatW - totalCroppedPixelsX; // Width of the visible part in original video pixels. visibleVideoPixelHeight = vNatH; // Full height is visible. } else { // Video is taller than renderDiv (or same AR), scaled to fit renderDiv width, cropped vertically. const scale = rW / vNatW; // Scale factor based on width. const scaledVideoHeight = vNatH * scale; // Height of video if scaled to fit renderDiv width. // Total original video pixels cropped vertically (from top and bottom combined). const totalCroppedPixelsY = (scaledVideoHeight - rH) / scale; finalVideoPixelX = 0; // No horizontal cropping. finalVideoPixelY = totalCroppedPixelsY / 2; // Pixels cropped from the top of original video. visibleVideoPixelWidth = vNatW; // Full width is visible. visibleVideoPixelHeight = vNatH - totalCroppedPixelsY; // Height of the visible part in original video pixels. } // Safety check for degenerate cases (e.g., extreme aspect ratios leading to zero visible dimension) if (visibleVideoPixelWidth <= 0 || visibleVideoPixelHeight <= 0) { // Fallback or log error, this shouldn't happen in normal scenarios console.warn("Calculated visible video dimension is zero or negative.", {visibleVideoPixelWidth, visibleVideoPixelHeight}); return { // Return full video dimensions as a fallback to prevent division by zero offsetX: 0, offsetY: 0, visibleWidth: vNatW, visibleHeight: vNatH, videoNaturalWidth: vNatW, videoNaturalHeight: vNatH }; } return { offsetX: finalVideoPixelX, offsetY: finalVideoPixelY, visibleWidth: visibleVideoPixelWidth, visibleHeight: visibleVideoPixelHeight, videoNaturalWidth: vNatW, videoNaturalHeight: vNatH }; } // _updateGhosts method removed. _showStatusScreen(message, color = 'white', showRestartHint = false) { // Generalized from _showGameOver this.gameOverContainer.style.display = 'block'; this.gameOverText.innerText = message; this.gameOverText.style.color = color; this.restartHintText.style.display = showRestartHint ? 'block' : 'none'; // No spawning to stop for template } _showError(message) { this.gameOverContainer.style.display = 'block'; this.gameOverText.innerText = `ERROR: ${message}`; this.gameOverText.style.color = 'orange'; this.restartHintText.style.display = 'true'; // Show restart hint on error this.gameState = 'error'; // No spawning to stop this.hands.forEach(hand => { if (hand.lineGroup) hand.lineGroup.visible = false; }); // if (this.startButton) this.startButton.style.display = 'none'; // REMOVED } _startGame() { console.log("Starting tracking automatically..."); // if (this.gameState !== 'ready') return; // No longer applicable as we go straight to tracking this.audioManager.resumeContext(); // For general audio this.speechManager.requestPermissionAndStart(); // For speech recognition // if (this.startScreenOverlay) { // REMOVED // this.startScreenOverlay.style.display = 'none'; // } // this.startButton.style.display = 'none'; // REMOVED this.gameState = 'tracking'; // Ensure state is tracking this.lastVideoTime = -1; this.clock.start(); // Removed display of score, castle, chad // Removed _startSpawning() } _restartGame() { // Renamed to _restartTracking or similar if preferred console.log("Restarting tracking..."); this.gameOverContainer.style.display = 'none'; // if (this.startScreenOverlay) { // REMOVED // this.startScreenOverlay.style.display = 'none'; // } this.hands.forEach(hand => { if (hand.lineGroup) { hand.lineGroup.visible = false; } }); // Ghost removal removed // Score reset removed // Visibility of game elements removed this.gameState = 'tracking'; // Changed from 'playing' this.lastVideoTime = -1; this.clock.start(); // Removed _startSpawning() } // _updateScoreDisplay method removed. // _showStartButton() method REMOVED _onResize() { const width = this.renderDiv.clientWidth; const height = this.renderDiv.clientHeight; // Update camera perspective this.camera.left = width / -2; this.camera.right = width / 2; this.camera.top = height / 2; this.camera.bottom = height / -2; this.camera.updateProjectionMatrix(); // Update renderer size this.renderer.setSize(width, height); if (this.css2DRenderer) { this.css2DRenderer.setSize(width, height); } // Update video element size this.videoElement.style.width = width + 'px'; this.videoElement.style.height = height + 'px'; // Watermelon, Chad, GroundLine updates removed. } _updateHandLines(handIndex, landmarks, videoParams, canvasWidth, canvasHeight) { const hand = this.hands[handIndex]; const lineGroup = hand.lineGroup; while (lineGroup.children.length) { const child = lineGroup.children[0]; lineGroup.remove(child); if (child.geometry) child.geometry.dispose(); // Materials are shared, no need to dispose them here unless they are unique per line/circle } if (!landmarks || landmarks.length === 0 || !videoParams) { lineGroup.visible = false; return; } const points3D = landmarks.map(lm => { const lmOriginalX = lm.x * videoParams.videoNaturalWidth; const lmOriginalY = lm.y * videoParams.videoNaturalHeight; let normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; // Clamp values to [0, 1] range to avoid issues if landmarks fall slightly outside the calculated visible area // due to precision or edge cases. This ensures they map correctly to the canvas. normX_visible = Math.max(0, Math.min(1, normX_visible)); normY_visible = Math.max(0, Math.min(1, normY_visible)); const x = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const y = (1 - normY_visible) * canvasHeight - canvasHeight / 2; return new THREE.Vector3(x, y, 1.1); // Z for fingertip circles, slightly in front of lines }); const lineZ = 1; // Z for connection lines this.handConnections.forEach(conn => { const p1 = points3D[conn[0]]; const p2 = points3D[conn[1]]; if (p1 && p2) { // Ensure landmarks exist // Create points for the line with the correct Z const lineP1 = p1.clone().setZ(lineZ); const lineP2 = p2.clone().setZ(lineZ); const geometry = new THREE.BufferGeometry().setFromPoints([lineP1, lineP2]); const line = new THREE.Line(geometry, this.handLineMaterial); lineGroup.add(line); } }); // Draw fingertip circles const fingertipRadius = 8; // Radius of the circle for fingertips const wristRadius = 12; // Larger radius for the wrist const circleSegments = 16; // Smoothness of the circle this.fingertipLandmarkIndices.forEach(index => { const landmarkPosition = points3D[index]; if (landmarkPosition) { const radius = (index === 0) ? wristRadius : fingertipRadius; // Use wristRadius for landmark 0 const circleGeometry = new THREE.CircleGeometry(radius, circleSegments); // Both hands will now use fingertipMaterialHand1 (white) const landmarkCircle = new THREE.Mesh(circleGeometry, this.fingertipMaterialHand1); landmarkCircle.position.copy(landmarkPosition); // Already has Z=1.1 lineGroup.add(landmarkCircle); } }); lineGroup.visible = true; } _projectLandmarkToScreen(landmark, videoParams, canvasWidth, canvasHeight) { if (!landmark || !videoParams || !videoParams.videoNaturalWidth || !videoParams.visibleWidth) return null; const lmOriginalX = landmark.x * videoParams.videoNaturalWidth; const lmOriginalY = landmark.y * videoParams.videoNaturalHeight; let normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; normX_visible = Math.max(0, Math.min(1, normX_visible)); normY_visible = Math.max(0, Math.min(1, normY_visible)); const screenX = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const screenY = (1 - normY_visible) * canvasHeight - canvasHeight / 2; return new THREE.Vector2(screenX, screenY); } _worldToScreen(worldPos, targetVector = new THREE.Vector2()) { // Converts a 3D point in the ForceGraph's world space to our 2D orthographic screen space if (!this.forceGraph || !this.forceGraph.camera()) return null; const graphCamera = this.forceGraph.camera(); const vector = new THREE.Vector3(worldPos.x, worldPos.y, worldPos.z); // Project from graph's camera to its normalized device coordinates (NDC) vector.project(graphCamera); // Convert NDC to our orthographic camera's screen space // Graph's NDC range is -1 to 1 for x and y. Our ortho camera's space matches canvas pixels from center. const screenX = (vector.x * this.renderDiv.clientWidth) / 2; const screenY = (vector.y * this.renderDiv.clientHeight) / 2; return targetVector.set(screenX, screenY); } _updateInteractionModeUI() { if (!this.interactionModeMenu) return; const modes = ['drag', 'rotate', 'zoom']; modes.forEach(mode => { const element = this.interactionModeMenu.querySelector(`#mode-${mode}`); if (element) { if (mode === this.interactionMode) { element.classList.add('active'); } else { element.classList.remove('active'); } } }); } _handleInteractionModeChange(newMode) { if (['drag', 'rotate', 'zoom'].includes(newMode) && this.interactionMode !== newMode) { console.log(`Interaction mode changed to: ${newMode}`); this.interactionMode = newMode; this._updateInteractionModeUI(); // If switching away from drag mode and a node is being dragged, release it if (newMode !== 'drag' && this.draggedNodeInfo.node) { this._handlePinchEnd(this.draggedNodeInfo.handIndex); // Use current hand index } // Reset any gesture-specific states if necessary this.hands.forEach(hand => { if (newMode !== 'rotate') { hand.isFistClosed = false; // Reset fist state if not in rotate mode } if (newMode !== 'drag') { if (hand.isPinching) this._handlePinchEnd(this.hands.indexOf(hand)); // Release pinch if active hand.isPinching = false; // Reset pinch state if not in drag mode } // Zoom mode state is reset when not enough hands are detected or when switching modes if (newMode !== 'zoom') { this.initialZoomWristDistance = null; this.initialZoomCameraDistance = null; } }); } } _handlePinchStart(handIndex, pinchScreenPos) { if (this.interactionMode !== 'drag') return; // Only allow node dragging in 'drag' mode if (!this.forceGraph || this.draggedNodeInfo.node) return; // Already dragging or no graph const graphData = this.forceGraph.graphData(); let closestNode = null; let minDistanceSq = Infinity; const tempNodeScreenPos = new THREE.Vector2(); graphData.nodes.forEach(node => { // Nodes in force-graph have x,y,z after physics simulation if (typeof node.x === 'number' && typeof node.y === 'number' && typeof node.z === 'number') { const nodeWorldPos = { x: node.x, y: node.y, z: node.z }; const nodeScreenPos = this._worldToScreen(nodeWorldPos, tempNodeScreenPos); if (nodeScreenPos) { const distanceSq = pinchScreenPos.distanceToSquared(nodeScreenPos); if (distanceSq < minDistanceSq && distanceSq < this.NODE_PICK_THRESHOLD_SCREEN * this.NODE_PICK_THRESHOLD_SCREEN) { minDistanceSq = distanceSq; closestNode = node; } } } }); if (closestNode) { this.draggedNodeInfo.handIndex = handIndex; this.draggedNodeInfo.node = closestNode; // Calculate initial offset in screen space (2D) const nodeScreenPos = this._worldToScreen({ x: closestNode.x, y: closestNode.y, z: closestNode.z }, new THREE.Vector2()); if (nodeScreenPos) { this.draggedNodeInfo.screenOffset.copy(nodeScreenPos).sub(pinchScreenPos); } else { // Fallback if projection fails, unlikely but good for safety this.draggedNodeInfo.screenOffset.set(0,0); } // Store the initial 3D world position of the node when it was picked up. // This is crucial for maintaining its depth during drag. this.draggedNodeInfo.initialNodeWorldPos.set(closestNode.x, closestNode.y, closestNode.z); console.log(`Hand ${handIndex} picked up node: ${closestNode.id} (User: ${closestNode.user}) at world [${closestNode.x.toFixed(2)}, ${closestNode.y.toFixed(2)}, ${closestNode.z.toFixed(2)}]`); // Fix the node in place by setting its fx, fy, fz properties. // The graph will then not apply forces to it. closestNode.fx = closestNode.x; closestNode.fy = closestNode.y; closestNode.fz = closestNode.z; this.forceGraph.graphData().nodes = [...graphData.nodes]; // Trigger graph update } } _handlePinchEnd(handIndex) { // This function is primarily for drag mode. Other modes might have different end conditions. if (this.interactionMode === 'drag' && this.draggedNodeInfo.handIndex === handIndex && this.draggedNodeInfo.node) { console.log(`Hand ${handIndex} released node: ${this.draggedNodeInfo.node.id}`); // Unfix the node by removing fx, fy, fz, so physics engine takes over again delete this.draggedNodeInfo.node.fx; delete this.draggedNodeInfo.node.fy; delete this.draggedNodeInfo.node.fz; this.forceGraph.graphData().nodes = [...this.forceGraph.graphData().nodes]; // Trigger graph update // Reheat simulation to let the graph settle naturally after release if (this.forceGraph.d3ReheatSimulation) { this.forceGraph.d3ReheatSimulation(); } else if (this.forceGraph.resumeAnimation) { // Fallback for older versions or different graph types this.forceGraph.resumeAnimation(); } this.draggedNodeInfo.handIndex = -1; this.draggedNodeInfo.node = null; } } _screenToWorld(screenPos, targetZ, targetVector = new THREE.Vector3()) { // Converts a 2D screen point (orthographic camera space) to a 3D point in the ForceGraph's world space at a specific Z depth. if (!this.forceGraph || !this.forceGraph.camera() || !this.renderDiv) return null; const graphCamera = this.forceGraph.camera(); const canvasWidth = this.renderDiv.clientWidth; const canvasHeight = this.renderDiv.clientHeight; // Convert screenPos (center is 0,0) to NDC for graph camera (center is 0,0, range -1 to 1) const ndcX = (screenPos.x / canvasWidth) * 2; const ndcY = (screenPos.y / canvasHeight) * 2; // Create a vector in NDC space. Z is tricky. We want to unproject at the node's original depth. // The 'targetZ' here is the node's original z in graph world space. // We first unproject to get a point on the near plane and a point on the far plane, // then interpolate to find the point at the correct world Z. // Simpler approach: directly use unproject. This assumes targetZ can be used to influence unprojection. targetVector.set(ndcX, ndcY, 0.5); // Use 0.5 for Z in NDC, will be adjusted by unproject targetVector.unproject(graphCamera); // Unprojects from NDC to World Space // Now, we need to find the point on the ray (camera.position to targetVector) that has Z = targetZ. // This is a bit more involved. A simpler approximation that works well for orbit controls: // Assume the unprojected point is roughly in the plane of interest if the camera isn't too far off axis. // For more precise depth, ray-plane intersection is needed. // Let's try a direct unprojection and then adjust. // The force-graph's camera might be perspective or orthographic. // If perspective, the unprojected Z is not directly the world Z we want. // For now, let's assume the unprojection gives a reasonable starting point, // and we'll set the Z explicitly to the original node's Z. This might not be perfectly accurate // if the camera is at a steep angle, but for typical orbit views it's often acceptable. // A common method is to create a ray and intersect it with a plane at targetZ. const ray = new THREE.Ray(); // Set ray from camera to unprojected point (direction) ray.origin.copy(graphCamera.position); ray.direction.copy(targetVector).sub(graphCamera.position).normalize(); // Define a plane at the target Z depth, normal along graph's Z-axis (usually 0,0,1 or 0,0,-1 depending on setup) // Let's assume standard Z up/down for the graph. const planeNormal = new THREE.Vector3(0, 0, 1); const planeConstant = targetZ; // The desired Z-coordinate of the intersection point const plane = new THREE.Plane(planeNormal, -planeConstant); // Plane equation: dot(N, P) - D = 0. D = dot(N, point_on_plane) = N.z * targetZ const intersectionPoint = new THREE.Vector3(); if (ray.intersectPlane(plane, intersectionPoint)) { targetVector.copy(intersectionPoint); } else { // Ray doesn't intersect plane (e.g., parallel). Fallback: Use unprojected point and force Z. // This fallback is less accurate for depth. targetVector.z = targetZ; } return targetVector; } _handlePinchMove(handIndex, currentPinchScreenPos) { if (this.interactionMode !== 'drag') return; // Only allow node dragging in 'drag' mode if (!this.forceGraph || !this.draggedNodeInfo.node || this.draggedNodeInfo.handIndex !== handIndex) return; const node = this.draggedNodeInfo.node; // Calculate the target screen position for the node (current pinch + initial offset) const targetNodeScreenPos = new THREE.Vector2().copy(currentPinchScreenPos).add(this.draggedNodeInfo.screenOffset); // Unproject this target screen position to the 3D world of the graph, // aiming for the node's original Z depth. const newWorldPos = this._screenToWorld(targetNodeScreenPos, this.draggedNodeInfo.initialNodeWorldPos.z, new THREE.Vector3()); if (newWorldPos) { // Keep the node fixed at the new position by updating fx, fy, fz node.fx = newWorldPos.x; node.fy = newWorldPos.y; node.fz = newWorldPos.z; // Also update node.x, node.y, node.z for immediate visual feedback if necessary, // though fx/fy/fz should be primary for the physics engine. node.x = newWorldPos.x; node.y = newWorldPos.y; node.z = newWorldPos.z; // Trigger graph data update to reflect the new fixed position this.forceGraph.graphData().nodes = [...this.forceGraph.graphData().nodes]; // Re-energize the simulation slightly. Since the node is fixed, // this primarily helps other nodes adjust to its new fixed position. if (this.forceGraph.d3ReheatSimulation) { this.forceGraph.d3ReheatSimulation(); } } } _animate() { requestAnimationFrame(this._animate.bind(this)); // const deltaTime = this.clock.getDelta(); // deltaTime not used currently // Update hands if tracking if (this.gameState === 'tracking') { this._updateHands(); } // _updateGhosts and _updateParticles calls removed. // Always render the scene this.renderer.render(this.scene, this.camera); } start() { // Add click listener for resuming audio context and potentially restarting on error this.renderDiv.addEventListener('click', () => { this.audioManager.resumeContext(); if (this.gameState === 'error' || this.gameState === 'paused') { // Assuming 'paused' might be a state where restart is desired this._restartGame(); // Restart tracking } }); console.log('Game setup initiated. Waiting for async operations...'); // Note: Game interaction now starts via the Start Button after _init completes. } _updateSpeechBubbleAppearance() { if (!this.speechBubble) return; const isPlaceholder = this.speechBubble.innerHTML === "..." || this.speechBubble.innerText === "..."; // Apply active styling only if recognition is generally active AND we are not displaying the placeholder. // This means interim/final text will get the active style, but the "..." placeholder will not, // even if the recognition service itself is still running in the background. const showActiveStyling = this.isSpeechActive && !isPlaceholder; const translateY = isPlaceholder ? '-5px' : '0px'; const scale = showActiveStyling ? '1.15' : '1.0'; this.speechBubble.style.transform = `translateX(-50%) translateY(${translateY}) scale(${scale})`; if (showActiveStyling) { // Cyan glow, blue drop shadow, enhanced original shadow this.speechBubble.style.boxShadow = '0 0 18px 6px rgba(0, 255, 255, 0.75), 0 7px 14px rgba(0, 123, 255, 0.6), 0 4px 10px rgba(0,0,0,0.25)'; this.speechBubble.style.border = '3px solid #00ccff'; // Brighter cyan border this.speechBubble.style.padding = '18px 28px'; // Slightly larger padding this.speechBubble.style.fontSize = 'clamp(20px, 3.5vw, 26px)'; // Larger font when active this.speechBubble.style.top = '30px'; // Increased top margin when active } else { // Default/inactive styling this.speechBubble.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)'; this.speechBubble.style.border = '2px solid #007bff'; // Original blue border this.speechBubble.style.padding = '15px 25px'; this.speechBubble.style.fontSize = 'clamp(16px, 3vw, 22px)'; // Original font size this.speechBubble.style.top = '20px'; // Original top margin } } _setupSpeechRecognition() { this.speechManager = new SpeechManager( (finalTranscript, interimTranscript) => { // onTranscript callback if (this.speechBubble) { clearTimeout(this.speechBubbleTimeout); if (finalTranscript) { this.speechBubble.innerHTML = finalTranscript; this.speechBubble.style.opacity = '1'; // Check for interaction mode commands const command = finalTranscript.toLowerCase().trim(); if (command.includes('drag')) { this._handleInteractionModeChange('drag'); } else if (command.includes('rotate')) { this._handleInteractionModeChange('rotate'); } else if (command.includes('zoom')) { this._handleInteractionModeChange('zoom'); } this.speechBubbleTimeout = setTimeout(() => { this.speechBubble.innerHTML = "..."; this.speechBubble.style.opacity = '0.7'; this._updateSpeechBubbleAppearance(); // Update appearance for "..." }, 2000); } else if (interimTranscript) { this.speechBubble.innerHTML = `${interimTranscript}`; this.speechBubble.style.opacity = '1'; } else { // No final, no interim (e.g., recognition just started, ended, or error) this.speechBubbleTimeout = setTimeout(() => { // Check if it's not already "..." to avoid redundant sets if called multiple times if (this.speechBubble.innerHTML !== "...") { this.speechBubble.innerHTML = "..."; } this.speechBubble.style.opacity = '0.7'; this._updateSpeechBubbleAppearance(); // Update appearance for "..." }, 500); } this._updateSpeechBubbleAppearance(); // Always update appearance after content change } }, (isActive) => { // onRecognitionActive callback this.isSpeechActive = isActive; this._updateSpeechBubbleAppearance(); } ); // Initialize speech bubble with "..." and apply initial appearance if (this.speechBubble) { this.speechBubble.innerHTML = "..."; this.speechBubble.style.opacity = '0.7'; this._updateSpeechBubbleAppearance(); // Apply initial styles (isSpeechActive will be false) } // We will call requestPermissionAndStart() on user interaction (e.g., start button) } _setupForceGraph() { if (!this.forceGraphContainer) { console.error("Force graph container DOM element not found."); this._showError("Graph container missing."); return; } try { // Setup CSS2DRenderer for HTML labels this.css2DRenderer = new CSS2DRenderer(); this.css2DRenderer.setSize(this.forceGraphContainer.clientWidth, this.forceGraphContainer.clientHeight); this.css2DRenderer.domElement.style.position = 'absolute'; this.css2DRenderer.domElement.style.top = '0px'; this.css2DRenderer.domElement.style.pointerEvents = 'none'; // Labels should not block graph interactions this.forceGraphContainer.appendChild(this.css2DRenderer.domElement); // Instantiate ForceGraph3D as a factory function this.forceGraph = ForceGraph3D({ controlType: 'orbit', rendererConfig: { alpha: true, antialias: true }, extraRenderers: [this.css2DRenderer] // Add CSS2DRenderer here })(this.forceGraphContainer) .jsonUrl('https://rosebud.ai/assets/miserables_final_ids.json?gqBY') // New dataset URL .nodeAutoColorBy('group') // 'miserables.json' uses 'group' for coloring .nodeRelSize(15) // Decreased node size .nodeOpacity(1) // Make nodes fully opaque .linkOpacity(0.8) // Increased link opacity .linkWidth(3) // Increased link width // .nodeLabel(node => `${node.id} (Group: ${node.group})`) // Remove default textual label, using CSS2DObject instead .nodeThreeObject(node => { const nodeEl = document.createElement('div'); nodeEl.textContent = node.id; nodeEl.style.color = node.color; // node.color is set by nodeAutoColorBy nodeEl.className = 'node-label'; return new CSS2DObject(nodeEl); }) .nodeThreeObjectExtend(true) // Render our object in addition to the default node .onNodeClick(node => { console.log("Clicked node:", node); // Future: window.open(`https://bl.ocks.org/${node.user}/${node.id}`, '_blank'); }) .backgroundColor('rgba(0,0,0,0)'); // Makes the graph's scene background transparent // Setup post-processing for the graph const graphRenderer = this.forceGraph.renderer(); const graphScene = this.forceGraph.scene(); const graphCamera = this.forceGraph.camera(); if (graphRenderer && graphScene && graphCamera) { this.graphComposer = new EffectComposer(graphRenderer); this.graphComposer.addPass(new RenderPass(graphScene, graphCamera)); this.bloomEffect = new BloomEffect({ luminanceThreshold: 0.01, // Drastically lower to make almost everything contribute luminanceSmoothing: 0.0, // Less smoothing on threshold, more abrupt intensity: 4.0, // Significantly stronger bloom effect mipmapBlur: true, // Improves quality and performance of blur }); const effectPass = new EffectPass(graphCamera, this.bloomEffect); this.graphComposer.addPass(effectPass); this.forceGraph.postProcessingComposer(this.graphComposer); console.log("Bloom post-processing enabled for the force graph."); } else { console.warn("Could not set up post-processing for graph: renderer, scene, or camera not available from graph instance."); } // Optional: Adjust camera distance if nodes become too large for current view this.forceGraph.cameraPosition({ z: 500 }); // Decreased: Start more zoomed in console.log("3D Force Graph initialized successfully."); } catch (error) { console.error("Error initializing 3D Force Graph or its post-processing:", error); this._showError("Failed to load 3D graph. Check console."); // Clean up container if graph failed to initialize, to prevent empty div issues if (this.forceGraphContainer && this.forceGraphContainer.parentNode) { this.forceGraphContainer.parentNode.removeChild(this.forceGraphContainer); } this.forceGraphContainer = null; // Clean up CSS2DRenderer if it was created if (this.css2DRenderer && this.css2DRenderer.domElement && this.css2DRenderer.domElement.parentNode) { this.css2DRenderer.domElement.parentNode.removeChild(this.css2DRenderer.domElement); } this.css2DRenderer = null; } } _applyStyles() { const css = ` #interaction-mode-menu { position: absolute; bottom: 20px; left: 20px; background-color: rgba(20, 30, 45, 0.9); /* Slightly lighter base */ border: 1px solid rgba(0, 220, 255, 0.75); /* Brighter border */ border-radius: 6px; /* Slightly more rounded */ padding: 12px; /* A bit more padding */ z-index: 100; display: flex; flex-direction: column; gap: 10px; /* Increased gap */ font-family: 'Orbitron', 'Helvetica Neue', 'Arial', sans-serif; /* Modernized font stack */ color: rgba(0, 230, 255, 1); /* Brighter text */ box-shadow: 0 0 18px rgba(0, 220, 255, 0.6), 0 0 8px rgba(0, 220, 255, 0.45) inset, 0 2px 4px rgba(0,0,0,0.3); /* More pronounced glow */ } .mode-option { padding: 12px 18px; /* Increased padding */ cursor: pointer; /* Change to pointer for better UX */ border-radius: 4px; transition: background-color 0.25s, color 0.25s, transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.25s, box-shadow 0.25s; /* Smoother transition */ font-size: clamp(16px, 2.8vw, 20px); /* Slightly larger font */ text-align: center; border: 1px solid rgba(0, 150, 200, 0.5); /* Default border, more visible */ } .mode-option.active { background-color: rgba(0, 220, 255, 1); /* Vibrant cyan */ color: #051018; /* Darker, richer text color for contrast */ font-weight: bold; transform: scale(1.1) perspective(500px) translateZ(10px); /* More dynamic active state */ box-shadow: 0 0 20px rgba(0, 255, 255, 0.85), inset 0 0 10px rgba(200, 255, 255, 0.6), 0 4px 8px rgba(0,0,0,0.3); /* Stronger glow and depth */ border-color: rgba(150, 255, 255, 0.9); /* Bright border for active */ } .mode-option:not(.active) { background-color: rgba(25, 40, 60, 0.8); /* Slightly richer inactive background */ color: rgba(0, 200, 255, 0.85); /* Brighter inactive text */ border: 1px solid rgba(0, 150, 200, 0.6); /* Consistent with updated default border */ transform: scale(1) perspective(500px) translateZ(0px); } .mode-option:not(.active):hover { background-color: rgba(35, 55, 75, 0.95); /* Lighter hover background */ color: rgba(100, 230, 255, 1); /* Very bright hover text */ border-color: rgba(0, 180, 230, 0.8); /* Brighter hover border */ transform: scale(1.03) perspective(500px) translateZ(5px); /* Subtle lift on hover */ box-shadow: 0 0 10px rgba(0, 200, 255, 0.3); /* Subtle glow on hover */ } .node-label { font-size: 12px; font-family: 'Arial', sans-serif; padding: 1px 3px; background-color: rgba(0, 0, 0, 0.5); border-radius: 2px; pointer-events: none; /* Important so labels don't block graph events */ user-select: none; /* Prevent text selection */ text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Improve readability against node color */ } `; const styleElement = document.createElement('style'); styleElement.type = 'text/css'; styleElement.textContent = css; document.head.appendChild(styleElement); console.log("Interaction mode menu CSS and node label CSS applied."); } _get3DDistanceSq(p1, p2) { // Expects landmark objects {x, y, z} from MediaPipe const dx = p1.x - p2.x; const dy = p1.y - p2.y; const dz = p1.z - p2.z; return dx * dx + dy * dy + dz * dz; } _isFist(landmarks) { if (!landmarks || landmarks.length <= Math.max(this.WRIST_INDEX, this.MIDDLE_FINGER_MCP_INDEX, ...this.FINGERTIP_INDICES_FOR_FIST)) { return false; } const wrist = landmarks[this.WRIST_INDEX]; const middleMcp = landmarks[this.MIDDLE_FINGER_MCP_INDEX]; // Calculate reference distance: squared distance from wrist to middle finger MCP. // This helps normalize for hand size and distance from camera to some extent. const refDistSq = this._get3DDistanceSq(wrist, middleMcp); if (refDistSq === 0) return false; // Avoid division by zero if landmarks are coincident let curledFingers = 0; for (const tipIndex of this.FINGERTIP_INDICES_FOR_FIST) { const fingertip = landmarks[tipIndex]; const distSqTipToWrist = this._get3DDistanceSq(fingertip, wrist); // Compare ratio of squared distances: (distTipToWristSq / refDistSq) < FIST_CURL_THRESHOLD_RATIO^2 // This checks if the fingertip is significantly closer to the wrist than the MCP is (indicating a curl). if (distSqTipToWrist / refDistSq < (this.FIST_CURL_THRESHOLD_RATIO * this.FIST_CURL_THRESHOLD_RATIO)) { curledFingers++; } } return curledFingers >= this.MIN_FINGERS_CURLED_FOR_FIST; } }