Air-Canvas

Inspiration

Draw in the air!

What it does

Lets you draw anywhere!

How we did it

Technology Stack Summary

| Layer | Technology | Purpose | |--------------|------------------|--------------------------| | ML/CV | MediaPipe Hands | Hand landmark detection | | Camera | getUserMedia API | Webcam access | | Rendering | HTML5 Canvas 2D | Raster drawing | | UI Framework | React 18 | Component structure | | Language | TypeScript | Type safety | | State | React Hooks | State management | | Build | Vite | Fast HMR dev server | | Algorithms | Bresenham, EMA | Interpolation, smoothing |

Claude Code assistance

Challenges we ran into

Smoothing drawing -> used Bresenham's algorithm

Accomplishments that we're proud of

Using Mediapipe for hand detection!

What we learned

I love media pipe Polish is very hard to get right and not as intuitive as we thought it'd be!

What's next for Air-Canvas

Wishlist Delete/Erase Function | Delete Select function? Area delete as well? Control Z Function More custom colors/color picking Hide/disable colorpicker widget when drawing; re-enable when not drawing | do this gracefully Pinch to Zoom in / out with middle finger? Fill Function? Creating / selecting Layers function Depth perception -> Too far back -> always pinching since pixel too small 2d to 3d draw