Character Cloud Projection Mapping
This one is a combination of a small mural/artwork and a web based audio animation.
The aim was to have a projection mapping type animation that can do things based on an audio input without knowing the music thats coming and without having to have a VJ.
After a short research and the lack of time (only had a week till the event and also some other stuff on my plate) I decided to use web technologies for the animation and do a "simple" character cloud as the graphic.
The Artwork
I started with creating the cloud as a sketch on paper:
Based on the sketch I went over to Illustrator and vectorised the image and added some colors.
In this step it was very important to work cleanly and have separate groups with distinct names for each element I possibly want to animate. If this is not done properly in that phase it will be big a hassle to get all classes and stuff set afterwards so they can be addressed with CSS or Javascript.
In this step it was very important to work cleanly and have separate groups with distinct names for each element I possibly want to animate. If this is not done properly in that phase it will be big a hassle to get all classes and stuff set afterwards so they can be addressed with CSS or Javascript.
This is what the final SVG image looked like.
Details like shadows and light where omitted because I felt like they would barely make a difference when the image is animated. In future iterations it might make sense though to test if they may improve the experience more than I thought.
Next, I had to paint the line work as a base for the animation. For that I chose a 2 x 1m (about 6.6 x 3.3ft) whitened wood piece that could be hung above the DJ booth.
The lines where drawn with basic acrylic markers by Molotow and kept black and white because the colors would be projected on the image.
The lines where drawn with basic acrylic markers by Molotow and kept black and white because the colors would be projected on the image.
The Animation
The animation was a little bit trickier than the art but I don't want to go too deep into the details here. The code is open sourced and I put it on GitHub.
Basically I used the Web Audio API to listen to the audio signal coming in through the computers microphone (A more direct audio source from the music would have been nicer but I did not know what kind of DJ equipment would be used so the microphone was the easiest solution), dissect specific parts from the audio signal and animate outlines, colors and opacities based on those sounds.
Basically I used the Web Audio API to listen to the audio signal coming in through the computers microphone (A more direct audio source from the music would have been nicer but I did not know what kind of DJ equipment would be used so the microphone was the easiest solution), dissect specific parts from the audio signal and animate outlines, colors and opacities based on those sounds.
The animations where completely done through CSS and Javascript and ran on a fullscreen browser (Chrome). Therefore no specific software was needed to play it. 🎉
To be honest I know very little about sound and most of the dissection of sounds was based on trial and error.
Because of that one part of the animation actually barely ever showed up at the final event because during the development I mostly tested by snapping my fingers next to the microphone which apparently creates some kind of sound snippet that does not appear very often in the music that was played at the event. 😅
Well none the less the result came out pretty decent and people enjoyed it. It definitely was more of a prove of concept that a fully refined projection mapping animation.
For future versions it would be nice to spend some more time on understanding the sound patterns available through the Web Audio API and add more specific and complex animations to separate elements of the artwork.
For future versions it would be nice to spend some more time on understanding the sound patterns available through the Web Audio API and add more specific and complex animations to separate elements of the artwork.
Here is a short video of the final piece at the beginning of the event.
Unfortunately I did not film a better clip. Later that night the light was better and I adjusted the animation levels a little bit better... Oh well.
Unfortunately I did not film a better clip. Later that night the light was better and I adjusted the animation levels a little bit better... Oh well.
