Flower Bloom — Hand Gesture Control

# Building Flower Bloom: A Real-Time Hand Gesture Flower Controller (Full Code Tutorial) This is the complete, code-first version of my Flower Bloom build-log. If you want the full **MediaPipe Hands + Canvas API source code** — not just the concepts — copy-paste your way through this one. By the end you'll have a working webcam app where your **left hand pinch controls how much a flower blooms**, your **right hand pinch controls how tall it grows**, and **swaying your hands generates wind** that bends the stem and scatters glowing pollen particles. This project is a natural continuation of the gesture-tracking work I started with **HandConnect** — same core idea (MediaPipe landmarks driving a real-time visual), applied to procedural nature/generative art instead of a utility app. ## What You'll Learn - How to wire up **MediaPipe Hands** for real-time 21-point landmark detection in the browser - How to calculate a **normalized pinch gesture** that works regardless of hand distance from the camera - How to fake **organic, non-robotic motion** using layered sine waves (a lightweight Perlin-noise alternative) - How to build a lightweight **particle system** on Canvas - How to draw **procedural, generative graphics** (petals, stems, branches) with bezier curves and gradients - How to fix the **mirrored-canvas text problem** that trips up most webcam-overlay projects - How to structure a **smooth, self-correcting animation loop** with `requestAnimationFrame` and delta-time ## Tech Stack - **MediaPipe Hands** (`@mediapipe/hands@0.4`) — hand landmark detection, loaded via CDN - **MediaPipe Camera Utils** (`@mediapipe/camera_utils@0.3`) — webcam frame piping - **HTML5 Canvas 2D API** — all rendering (flower, particles, HUD, hand guides) - **Vanilla JavaScript (ES6 classes)** — no framework, no build step, no bundler ## Prerequisites - Basic comfort with JavaScript ES6 classes - Basic familiarity with the Canvas 2D API (`ctx.beginPath`, `ctx.fill`, etc.) - A webcam - A way to serve static files locally (camera access requires `localhost` or `HTTPS` — opening `index.html` directly via `file://` will NOT work) ## Project Structure ``` flower-bloom/ ├── index.html ├── style.css └── app.js ``` Three files, zero dependencies to install. Let's build it top to bottom. --- ## Step 1: The HTML Shell The HTML is intentionally minimal: a `

For you

Recommended topics

Reading list

For you

Recommended topics

Reading list