#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 Processing), which reacts to the signal from the drums. Every playback, the program generates a different result – random elements, perspectives and movements – but keeping the same base story.

read about the coding process

goals

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.

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.

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.

ANIMATION

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);

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.

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

result

you can find the results here:

Show comments 💬