#ksawerykomputery #creativecoding #generativeart #musicvideo #installations #processing #newmedia #livevideo #ksawerykomputery #creativecoding #generativeart #musicvideo #installations #processing #newmedia #livevideo

wh0wh0 – bamb00

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.

Read about the coding process


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”).



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.

Ableton session

if (STAGE==12) { dynamic = 0.92; changeTransforms = true; changeFlips = false; changePartsSet = true; changeViewChance = 0.9; changeRandomProtY = false; changeScales = true; changeSpaces = true; showTotalBox = true; showPartBox = false; showGroundBox = false; showVertices = false; glitchGrids = true; randomizeGrid = true; }

The worth noticing variable here is dynamic, with which I manipulated the level of a rapidity of each scene.


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.


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.

Click to move the object with ease: read the code

float eased(float from, float to, float ease) { return (from + ( to - from ) * ease); } value = eased(value, newValue, 0.3);


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.

Move left-right to set the details: read the code


You can find the results here: