A videoclip designed and coded for a single titled ”bamb00” of a Polish drummer Jacek Prościński aka wh0wh0. This work also includes an interactive website bamb00.net
The video itself is a live record (without cuts and montage) of a computer program (coded in JavaScript), which reacts to the signal from the drums. Every playback, the program generates a different result – random elements, perspectives and movements – but guided by programmed rules.
When I heard Jacek’s ”bamb00” for the first time, I immediately got it that this task would require a special approach. Jacek’s music is insanely dynamic and sounds different on every show. Sometimes some parts take longer than usual. That’s why I started with thinking of how to make the video generative. There are so many levels and notes going on in that – for a proper visualisation – I decided to try something that would give me possibilies and also be a new thing for me: playing with 3D. Moreover, it had to work real-time for the live shows, best if 60 fps, which meant that it should be light to render and designed in a simple way.
After the work was done, we were thinking how to present the full experience of this generative feeling. I decided to recode the program for the on-line use and make an interactive website with use of p5.js (”Processing for web”).
Solutions
STORY
The Processing program was basically connected to an Ableton project. It held the whole soundtrack, plus a few midi tracks with the drum notes. I wanted to keep the whole story in a single program, so I got an idea to add a special midi track with 13 very long notes, one for each scene. It was giving me information about the current scene, so I could change the rules of the program behaviour in specific moment in the track.
The worth noticing variable here is dynamic, with which I manipulated the level of a rapidity of each scene.
NOTES
To fully feel the density of the notes being played, I decided to base on midi track of Jacek’s live recordings and connect the notes to specific functions – moving/flipping/rotating particles, rotating camera, changing gaps or scales, changing sets of elements.
if (midiNote==0) { // KICK
if (chance(0.85)) resetParts();
else if (changeTransforms)
for (int i=0; i<7; i++) translateParticle();
if (chance(changeViewChance)) setRandomView();
if (changeSpaces) randomSpacing();
if (changeScales) randomScaling();
if (changeRandomRotY) randomRotY();
if (changeRandomProtY) randomPRotY();
if (changePartsSet) randomPartsSet();
}
I must here thank Marek Pepke, who invaluably helped me by providing a JavaScript .midi file player and by making the Processing sketch work on-line later on. All the others midi players turned out to be not synchronised enough.
3D INTERSECTIONS
To generate the head parts I needed a library that could intersect 3D objects. miho’s JSCG library was the best choice. It is based on a JavaScript csg.js library, which I later tried in the on-line version.
Having this library, cutting the object into blocks went easily. Every block was a result of an intersection of the object (the head) with a translated cube. Generating these intersections was pretty time consuming (30 seconds for 5x5x5 set), so I needed a cache – after every change of the number of blocks, I was saving them to files and reading from there.
I tried to avoid working with a timeline as much as possible. In most cases I used my eased() function (printed below). Taking a position as an example, it means that with a given destination point the function calculates a point on path for a current time with a speed of my choice.
float eased(float from, float to, float ease) {
return (from + ( to - from ) * ease);
}
value = eased(value, newValue, 0.3);
3D OUTLINE EFFECT
To achive a simple looking effect, I decided for an outline style. My first idea was to use an edge detection filter, but it turned out to be crispy and consuming. After that, I got an idea to seperate the object’s fill and stroke, then translate the fill towards the camera, so it would partially overlay the strokes.
