Case study
Mappix
Point a webcam at sticky notes on a wall and projected balls bounce off them. It runs in the browser, which sounded much simpler before I learned about camera-projector calibration.
By Mishal ShanavasUpdated
- What was going on
- A projector and a webcam see the same wall from completely different angles. Before anything can bounce off a real sticky note, the browser has to work out how those two views line up.
- What I did
- I built Gray-code structured-light calibration, used a homography to map the camera view to the projector, and connected the result to webcam input and a small physics simulation.
- How it turned out
- You can stick shapes on a wall and watch projected balls collide with them live. It is part computer vision experiment, part unnecessarily advanced wall toy.
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