Devlog 02 - Rebuilding Gesture Arcade for the Web
The Big Decision
Scrapped the entire Python version and rebuilt from scratch in JavaScript. Python with pygame cannot run in a browser, and without a live demo URL Stardance reviewers can’t try the project. The whole point is gesture control — and that needs a webcam running locally. Only solution was JavaScript. Problem? I had never written it before.
Learning JavaScript from Scratch
Coming from Python the syntax felt familiar but the logic was completely different. Hardest part was MediaPipe. In Python it’s 2 lines:
import mediapipe as mp
hands = mp.solutions.hands.Hands()
In JavaScript it’s a whole async setup that took me forever to get right:
const fs = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/wasm"
)
const hl = await HandLandmarker.createFromOptions(fs, {
baseOptions: { modelAssetPath: "..." },
numHands: 1,
runningMode: "VIDEO"
})
Went through 4 different CDN links before finding one that worked. CORS errors, 404s, wrong module formats — been through everything. Eventually got it working with Skypack.
How the Hand Tracking Works
Every frame the camera captures an image, MediaPipe finds 21 landmark points on your hand, and I calculate useful values from those points:
hand.palmX = (lm[0].x + lm[5].x + lm[9].x + lm[13].x + lm[17].x) / 5
hand.palmY = (lm[0].y + lm[5].y + lm[9].y + lm[13].y + lm[17].y) / 5
const dx = lm[4].x - lm[8].x
const dy = lm[4].y - lm[8].y
hand.pinching = Math.sqrt(dx*dx + dy*dy) < 0.07
const up = [lm[8].y < lm[6].y, lm[12].y < lm[10].y, lm[16].y < lm[14].y, lm[20].y < lm[18].y]
hand.fist = up.every(f => !f)
All 3 games share the same hand object that gets updated every single frame.
Bugs I Ran Into
Mirror flipping — spent ages debugging why the cursor moved the wrong way. Camera captures a mirrored image so moving right makes x go in the -x direction. Fixed by flipping palmX at the source:
hand.palmX = 1 - (lm[0].x + lm[5].x + lm[9].x + lm[13].x + lm[17].x) / 5
CDN failures — MediaPipe’s official CDN kept returning 404. Tried jsdelivr, unpkg, and two others before Skypack worked.
Module type errors — JavaScript modules need type="module" on the script tag otherwise imports don’t work at all.
What Needs Fixing Next
-
Space Shooter — not enough enemies spawning, waves feel too sparse. AI enemies too aggressive, players can’t score enough
-
Hand Cursor — white circle cursor looks too similar to the pong ball, confusing during gameplay. Needs a better indicator
-
GitHub Pages — need to push everything live so there’s an actual demo URL
.png)
