Case study
Mappix
Made projected balls bounce off real sticky notes. Gray-code calibration and a homography align webcam and projector views for browser physics.
By Mishal ShanavasUpdated
- What was going on
- A webcam and a projector see the same wall from different angles. To make projected objects react to real sticky notes, the browser first has to match those two views.
- What I did
- I used Gray-code structured light to calibrate the projector, calculated a homography to map the webcam view, and connected the detected shapes to a Matter.js simulation.
- How it turned out
- Stick shapes on a wall and projected balls collide with them in real time. It is computer vision applied to a wall toy, which feels about right.
Technical details
- Projected a Gray-code sequence so the webcam could identify projector coordinates across the physical surface.
- Calculated a homography that translates the camera perspective into the projector's coordinate space.
- Fed detected wall geometry into a Matter.js simulation so projected objects react in real time.
Vue.jsJavaScriptComputer VisionMatter.jsWebRTC