The Bubble Figure is an interactive art installation that runs in the browser. When a person is recognized in the webcam it makes them appear as a colorful bubble figure. They can then interact with various shapes that fall from above, for example, by hitting them. Simple and fun.
Bubble Figure demo on GitHub pages. Please make sure to step back from the webcam so that your pose is detected.
The installation was made for Grand One, 2023 edition. These are annual design awards that take place in Helsinki, Finland. Please see event photos.
Since Wunderdog took part in Grand One 2023, we wanted to experiment, have fun, and show we could do something beyond our regular day-to-day work.
We decided to build an interactive experience using the event's visual language of basic colorful shapes: spheres, cones and cylinders. After brainstorming various concepts, and taking the schedule and resources into account, we settled on The Bubble Figure.
The Bubble Figure uses TensorFlow.js pose detection to recognize a person via the webcam. Pose keypoints (e.g. left shoulder, right wrist) are then used to render the figure via Three.js.
The figure is randomized every time a new person is detected. The shapes falling from above are also randomized, while using certain geometries and textures to fit the Grand One visual language.
To simulate physics, cannon-es is used.
The project is managed via npm and Vite. Unfortunately the pose detection libraries don't work as npm imports, so they are loaded via a CDN.
In the browser, hit Command + K on Mac or Ctrl + K on Windows to adjust various parameters. Clicking Apply will
save the parameters in the browser's local storage.
Please use Google Chrome, other browsers are not officially supported.
npm install
npm run dev
npm run build
npm run preview
At the moment, we are not accepting any further contributions. For any questions or comments, please contact Wunderdog.