preloading spinner


This interactive animation requires a modern browser with WebGL-support. If you can't see this animation, don't worry - there's a video of the whole thing if you scroll down (:

Music: "Time" by INJUVIK Collective

Touch to start the animation

Form. Space. Music. Interaction. „Piano“ invites the observer to be a playful part of the liaison of generative design, audio-reactive interaction and three-dimensional animation – exploring the unpredictable performances generated during those unique moments in the process.

Originally developed for the live-VJ’ing component of the electronic trio INJUVIK Collective, this interactive browser-based system by designer Patrik Hübner unites three-dimensional typography-elements with algorithmically propelled animations and the freedom to explore and influence every movement and every reaction of the system in real-time.

Created with Three.js and P5.js
“Piano”, as performed by Tim Rodenbröker / INJUVIK Collective
Idea, design and programming: Patrik Hübner / INJUVIK Collective

Piano was on exhibition for one week from August 15th through 18th 2016 as part of the Platine Festival in Cologne. A MIDI-controller was placed in front of a well frequented shopping window onto which the interactive animation was projected.

Visitors and passers-by of all ages were invited to play and explore the interactive world of Piano and its myriad of possible visual states. The installation ended up being a colorful meeting ground for people starting to explore the festival and finding their way around the exhibitions.

Click on the video above to see the MIDI-based interaction demonstrated.