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