VisualComputing — Interactive Vision Lab

Aplicación web de computer vision en tiempo real que funciona directamente en el navegador y puede publicarse con GitHub Pages.

Modos

1. Gesture Draw

• Detecta hasta 2 manos con MediaPipe Hand Landmarker.
• El índice funciona como cursor.
• Junta pulgar + índice (pinch) para comenzar a dibujar.
• Arrastra y suelta para crear rectángulos, cuadrados, círculos, líneas y trazos libres.
• Permite limpiar el lienzo y guardar una captura PNG.

2. Scene Vision

• Detecta objetos comunes con TensorFlow.js + COCO-SSD.
• Muestra clase, confidence score y bounding box.
• Resume qué está viendo la cámara.
• Cuando detecta personas, MediaPipe Pose Landmarker superpone landmarks y conexiones corporales.

3. Face Geometry

• MediaPipe Face Landmarker genera una malla facial en tiempo real.
• Resalta contorno facial, ojos, iris y labios.
• Muestra métricas geométricas visuales: cantidad de landmarks, distancia entre ojos, ancho facial, eye aspect ratio, roll y yaw aproximado.

Este modo no identifica personas, no crea plantillas para reconocimiento biométrico y no infiere raza, salud, identidad u otros atributos sensibles.

4. JJK Domain Lab — Gojo / Limitless

Gojo-inspired computer vision experiment built with MediaPipe finger tracking, MediaPipe pose tracking, Three.js and WebGL.

Gesture sequence:

1. Cross the index + middle fingers of the left hand and hold to charge Blue.
2. Cross the index + middle fingers of the right hand and hold to charge Red.
3. Once both techniques are charged, bring both hands together to fuse them into Hollow Purple.
4. Purple remains attached to one hand.
5. Open that hand and perform a fast throwing motion to release Purple across the camera in a straight trajectory.

Visual system:

• layered geometric energy spheres
• rotating torus rings
• WebGL particle shells
• Infinite-Void-inspired ambient particle field
• reactive golden Gathering Mana dust
• 900+ glowing micro-particles and rotating golden square fragments
• MediaPipe Pose Landmarker body-lock using 33 pose landmarks
• interpolated attraction anchors along shoulder → elbow → wrist and hip → knee → ankle
• filled torso anchor grid so particles wrap the body surface instead of only following joints
• dense hand anchors using wrist, thumb, index and pinky landmarks
• Blue biases particles toward the tracked left hand + left arm
• Red biases particles toward the tracked right hand + right arm
• Hollow Purple redistributes the particle cloud across both hands, torso and head
• particle positions follow the moving body every frame instead of fixed screen regions
• high-density burst when Blue + Red fuse into Hollow Purple
• residual particle dispersion after Purple is released
• fusion shockwave
• motion-controlled Purple projectile
• straight glowing trajectory/trail

The domain UI includes extra slots so additional JJK-inspired gesture systems can be added later without replacing the existing Gojo mode.

Tecnologías

• HTML5 / CSS3 / JavaScript ES Modules
• MediaPipe Tasks Vision 1.0.1
• TensorFlow.js 4.22.0
• COCO-SSD 2.2.2
• Three.js 0.169.0
• WebGL
• Canvas 2D additive particle rendering
• getUserMedia() para acceso a la cámara

Ejecutar con GitHub Pages

1. Abre Settings del repositorio.
2. Ve a Pages.
3. En Build and deployment, selecciona Deploy from a branch.
4. Branch: main.
5. Folder: / (root).
6. Guarda.
7. Abre https://apepsis.github.io/VisualComputing/.
8. Presiona Activar cámara y acepta el permiso del navegador.

GitHub Pages usa HTTPS, requisito importante para acceder a la cámara fuera de localhost.

Controles rápidos

• 1: Gesture Draw
• 2: Scene Vision
• 3: Face Geometry
• 4: JJK Domain Lab
• C: limpiar dibujo en Modo 1
• R: reiniciar Blue / Red / Purple en Modo 4

Privacidad

La inferencia se ejecuta en el navegador. Los modelos se descargan desde sus CDN/hosts públicos, pero esta aplicación no implementa un servidor propio para subir ni almacenar frames de cámara.

Modelos

• Hand Landmarker: Google MediaPipe Models
• Pose Landmarker Lite: Google MediaPipe Models
• Face Landmarker: Google MediaPipe Models
• Object Detection: TensorFlow.js COCO-SSD