A real-time AR X-Ray scanner that turns your webcam into a sci-fi medical imaging portal.
Use both hands to open a portal window and reveal a glowing, particle-based neural body scan — complete with anatomical zones, skeletal overlays, live telemetry HUD, video recording, and 4 scan modes.
HTML · Canvas 2D · MediaPipe Holistic · Web Audio · No Build Step
- Show both hands to the webcam
- Pinch your index fingers and thumbs close together (~150px) to activate the portal
- Spread your hands apart to expand the X-Ray scanning window
- Watch as 10,000 square particles form a dense, anatomically-colored body silhouette inside the portal
The portal is clipped to the quadrilateral formed by your four finger landmarks — it moves, scales, and rotates with your hands in real-time.
| Mode | Key | Description |
|---|---|---|
| X-RAY | 1 |
Classic white/cyan x-ray particles with anatomical colour zones |
| THERMAL | 2 |
Heat-map colouring — head & core hot, legs & feet cool |
| SKELETON | 3 |
Full bright wireframe skeleton, particles hidden |
| NIGHT VISION | 4 |
Green phosphor camera feed with NV particle palette |
- Screenshot — saves full-canvas PNG with white flash effect
- Video recording — MediaRecorder captures
.webmvideo of your session - Keyboard shortcuts —
Space,R,1–4for hands-free control
- Procedural Web Audio tones on mode switch, portal activation, screenshot, and record
- Live frame rate display, colour-coded: green ≥25fps / yellow ≥15fps / red <15fps
- Expanding ring burst effect when the portal first opens, colour-matched to current scan mode
- 10,000 square particles distributed across the body using MediaPipe's segmentation mask
- Anatomical color zones — head (white/cyan), chest (pink), arms (teal), hands (gold), core (purple), legs (blue), feet (orange)
- 3-layer depth rendering — BACK, MID, FRONT layers with progressive opacity and size scaling
- Energy surge waves — periodic radial pulses that ripple outward from the chest center
- MediaPipe Holistic for simultaneous hand + pose + segmentation tracking
- Mask-based particle redistribution — particles fill the actual body silhouette, not a generic shape
- Head dome generator — 1,500 dedicated particles form a dense cranial coverage zone
- Body path clipping — all particles are constrained within an anatomically-accurate polygon
- Live data panel — floating HUD near the shoulder with bioscan telemetry
- Rotating radar — animated crosshair/radar indicator
- Joint telemetry tags — micro-labels on elbows and knees showing real-time confidence percentages
- Pipeline status bar — INPUT → DETECT → POSE → PORTAL → COMP → OUTPUT node chain
- Frame counter with glitch error indicators
- Spark bursts — particle explosions when fingers first connect
- Topographic ripple echoes — expanding contour waves around the body outline
- Human head/neck silhouette generator — cranium dome, jaw, ears, and neck trapezius mapped from ear/nose landmarks
- 3D perspective grid — vanishing-point grid that tracks head position
- Dual-layer scan grid — fine (8px) and coarse (40px) cyan grid overlay
- Laser scanline — sweeping horizontal scan beam with gradient trail
- Data stream columns — rising vertical data packets within the body path
- Random scan interrupts — periodic glitch events with:
- Horizontal slice displacement
- White noise flash
- Corrupt hex text overlays (
0xFFE3 >> CORRUPT,ERR: SEG FAULT) - Red "SCAN INTERRUPT" warning
- Digital jitter — particles scatter during glitch frames
- Temporal smoothing — portal window position lerps for silky-smooth tracking
- Body drift compensation — all 10K particles shift with chest movement delta
- Animated corner markers — glowing turquoise squares at each portal vertex
- Chromatic border — animated hue-shifting portal frame with glow
┌─────────────────────────────────────────────────────┐
│ BROWSER (Single HTML) │
├─────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────────┐ ┌──────────┐ │
│ │ WebCam │───▶│ MediaPipe │───▶│ Canvas │ │
│ │ Stream │ │ Holistic │ │ 2D Ctx │ │
│ └──────────┘ └──────┬───────┘ └────┬─────┘ │
│ │ │ │
│ ┌───────────┼──────────────────┘ │
│ │ │ │
│ ┌──────────▼──┐ ┌─────▼─────┐ ┌──────────────┐ │
│ │ Hand │ │ Pose │ │ Segmentation │ │
│ │ Landmarks │ │ Landmarks│ │ Mask │ │
│ │ (2 hands) │ │ (33 pts) │ │ (body fill) │ │
│ └──────┬──────┘ └─────┬─────┘ └──────┬───────┘ │
│ │ │ │ │
│ ┌──────▼───────────────▼───────────────▼───────┐ │
│ │ RENDER PIPELINE │ │
│ │ │ │
│ │ 1. Mirrored webcam background │ │
│ │ 2. Portal clip (finger quadrilateral) │ │
│ │ 3. Void fill + depth fog + grids │ │
│ │ 4. Topo ripples + head silhouette │ │
│ │ 5. 10K particle body (3 depth layers) │ │
│ │ 6. Joint rings + orbit dots │ │
│ │ 7. Scanline + data streams │ │
│ │ 8. HUD panel + telemetry │ │
│ │ 9. Glitch overlay (random) │ │
│ │ 10. Portal border + corner markers │ │
│ └───────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
# Clone the repository
git clone https://github.com/manny2341/XRayVision.git
cd XRayVision
# Serve locally (camera requires a served page, not file://)
python3 -m http.server 3000
# then visit http://localhost:3000Requirements: A modern browser with webcam access (Chrome/Edge recommended). No
npm install, no bundler, no framework — just one HTML file.
| Action | Gesture / Key |
|---|---|
| Activate Portal | Bring both index fingers within ~150px of each other |
| Expand Portal | Spread thumbs and index fingers apart |
| Move Portal | Move both hands together |
| Deactivate | Separate hands far apart |
| Switch to X-Ray | 1 or click X-RAY button |
| Switch to Thermal | 2 or click THERMAL button |
| Switch to Skeleton | 3 or click SKELETON button |
| Switch to Night Vision | 4 or click NV button |
| Screenshot | Space or click [ CAPTURE FRAME ] |
| Record video | R or click [ ● REC ] — saves .webm on stop |
| Metric | Value |
|---|---|
| Particles | 10,000 squares |
| Layers | 3 (BACK / MID / FRONT) |
| Mask Resolution | 100×100 |
| Target FPS | 30-60 (device dependent) |
| Pose Landmarks | 33 points |
| Hand Landmarks | 21 points × 2 hands |
- SIN lookup table (1024 entries) — eliminates
Math.sin()calls in particle updates - Random LUT (5000 entries) — pre-computed random values
- Single body clip path — one
ctx.clip()for all 10K particles - Batched layer rendering — particles grouped by depth layer to minimize state changes
- Square particles —
fillRectis faster thanarc+fill
XRayVision/
├── index.html ← Entire application (single file, ~45KB)
└── README.md ← You are here
Yes, the entire engine is a single HTML file. No dependencies to install, no build pipeline, no node_modules black hole.
| Technology | Purpose |
|---|---|
| HTML5 Canvas | All rendering (2D context) |
| MediaPipe Holistic | Hand tracking, pose estimation, body segmentation |
| Vanilla JavaScript | Application logic, particle system, HUD |
| CSS | Minimal UI styling |
- Fork the repository
- Create a feature branch (
git checkout -b feature/thermal-mode) - Commit your changes (
git commit -m 'Add thermal scan mode') - Push to the branch (
git push origin feature/thermal-mode) - Open a Pull Request
This project is open source. Feel free to use, modify, and distribute.
Original concept by Akshat Singh · Extended to v7 by manny2341