SCC de SnaijerSander de Snaijer
Loading Light/Dark Toggle

Computer vision

Computer vision in the browser: using MediaPipe to detect faces and hands through a webcam, then turning that data into playable games.

Computer vision projects

  1. Screen recording of the map gesture control demo showing an OpenLayers map with a small webcam preview in the corner. A user pans the map by making a fist and moving their hand, then zooms by spreading two open hands apart. All hand tracking and gesture detection runs in the browser using MediaPipe WASM with no backend.

    Open Source Hand Gesture Controls for Maps in the Browser

    3 Apr 2026

    Ever wanted to pan, zoom, rotate, and reset a map without touching anything? I built an open-source library that lets you control web maps using just your hands. No mouse, no touchscreen, no backend. ...

  2. Face-controlled Tetris game where a player moves pieces by raising eyebrows and opening their mouth using webcam face detection.

    Eyebrow Tetris: Face Controlled Browser Game

    15 Mar 2026

    A browser-based game that uses MediaPipe face mesh tracking to control falling Tetris blocks with head movements. Tilt your head left or right to move pieces, look up to rotate. Runs entirely in the b...

  3. Pug's Hunt browser game using webcam hand tracking to aim and shoot ducks

    Pug's Hunt: Webcam Duck Hunt with Hand Tracking

    2 Mar 2026

    Pug’s Hunt is a browser game inspired by the classic NES Duck Hunt, controlled entirely through your webcam using hand tracking and facial gestures. Players aim by pointing their finger and shoot by o...

Computer vision articles

  1. MediaPipe Face Mesh: All 478 Landmark Points

    MediaPipe Face Mesh: All 478 Landmark Points

    29 Apr 2026

    Complete visual reference for all 478 MediaPipe Face Mesh landmarks. Grouped by face region with copy-paste JavaScript code for eyes, mouth, nose and jawline.

  2. Gesture Controls for OpenLayers, Google Maps & Leaflet

    Gesture Controls for OpenLayers, Google Maps & Leaflet

    12 Apr 2026

    Add hand gesture controls to OpenLayers, Google Maps, or Leaflet using MediaPipe hand tracking. Pan, zoom, and rotate maps with just a webcam. Open source, runs entirely in the browser, no backend needed. Includes CDN setup and JavaScript examples

  3. MediaPipe Hand Tracking & Face Detection in JavaScript

    MediaPipe Hand Tracking & Face Detection in JavaScript

    22 Mar 2026

    A beginner MediaPipe JavaScript tutorial: build a real-time hand tracking and face detection app in one HTML file. Draw rainbow trails, burst star particles with a peace sign, and trigger Spongebob face effects by opening your mouth. No npm, no backend, runs entirely in the browser using your webcam.