Build the Cities

Created in Feb.2015

Build the Cities is a code-based generative music video I directed and programmed for the track Build the Cities by Karma Fields Feat. Kerli Kõiv.



The entire music video consists of multiple stages. The basic structure for each stage is a dynamic subdivided cubic cell, which is able to multiply based on a designated distribution pattern.

For generating the animated singing figure (Kerli), the pattern is computed based on depth sequence of the original footage. Speaking of the footage, a Kinect, a camera, plus Depthkit were used to shoot both the RGB and depth footage simultaneously. Since I was not using Depthkit’s built-in visualizer, an additional program was later developed to post-sync the two footage based on the milliseconds tags of the depth sequence.

For generating the cityscapes, I programmed another separate generator to produce images of random aerial views of buildings, using brightness to indicate each block’s altitude. The images were later imported and read by the system the way similar as Kerli’s depth sequence. The mapping of the pattern is also affected by each host cubic cell’s “gravitation mode”, which changes the pattern’s facing direction.

The entire music video is programmed and generated using Processing, with a few slight radiant blur effects done in Premiere during composition.

Demonstrations of multiple development stages:

Dynamic Octree structure subdivision + Free roam camera

Dynamic Bézier curves set subdivision (bound to invisible Octree structure) + Free roam camera

Synchronized animated RGB & depth sequence

Dynamic Bézier curves set subdivision (bound to invisible Octree structure) + Multiplication based on animated RGB & depth sequence

Cityscape generator


  1. Patrik Carlsson

    Absolutely incredible. I just wish that I could watch this video somewhere where it’s not destroyed my all the compression done on for example Vimeo or YouTube. All of the thin lines in this video just get’s blurred out in the “compression way”. Is there any chance that I can in some way download this video without any/with minimal compression?

    • Thank you Patrik. So far the music video online with least compression loss should be the one on Vimeo, which is embedded in this post. Unfortunately I can’t send you the original video file, hope you understand.

  2. Λudrius

    Amazing work right here.

  3. Ethan

    Very, very nice work.

  4. Shaun

    If they don’t pick you up to animate the next James Bond intro sequence, they have a problem. Absolutely brilliant work Raven Kwok, absolutely brilliant!

  5. Samuel

    I don’t know why but I’m extremely drawn to the structures, they’re so incredibly detailed and fascinating to look at, do you by any chance have a clearer version of the video or higher resolution images of your preview ones? The quality on the Vimeo video does not do your work justice at all and the images make it difficult to see everything considering they’re very small.

    Keep up the great work, this is amazing!

  6. rookie1024

    Wow, incredibly simple for something so awesome. Nice!

    Also, how were the blobs of cubes generated?

    • Thanks 🙂 They were subdivided from a parental cube. (Octree) The splitting pattern was computed based on either the depth map sequence (for Kerli) or simply the depth map (for city scapes).

  7. This…this is the perfect example of how code is art.

    I’d die to get a look at the code, but I know how attached I get to my polished turds of code so I in no way expect you do release any bit of this…but this definitely has inspired me.

  8. which is one of the best visualization I’ve ever seen!
    Great Job, dude!

  9. This is just too close to the visualizations I have because of Synesthesia that it’s almost frightening. It’s like you jumper inside my head and copied everything I was seeing when listening to the song. Really good job man. I was wondering, do you have Synesthesia?

    • I don’t, or at least I don’t know yet 😉

  10. Awesome! Being a processing programmer myself I stand in awe before I know you much work this is. Great!
    If you need free music for your videos and like my style, just let me know and you can have every song from my portfolio.
    Keep up the good work!

    • Thanks in advance 🙂 Will let you know.

  11. Pingback: A arte generativa de Raven Kwok

  12. Fabian

    Looks really cool! A friend and I are trying out some of the methods on our own. But we were wondering how you did the inertia on the points. The curves seem to wobble as the octree forms. Did you create the lines with some kind of suspension?
    Excited for following projects!

  13. Matt

    Of course, its coded! That’s how it’s done!

    I was really impressed when I saw all of these. These are pretty grand.

  14. Matt

    Of course, its coded! That’s how it’s done!

    I was really impressed when I saw all of these. These are pretty grand.


  15. Scott

    I absolutely LOVE these visualizers… They’re incredible!

    I’m fairly sure I know the answer to these questions… but:

    1. Is the code you’ve written capable of acting as a standalone visualizer (i.e. media player plugin)?

    2. If so, are there any plans to make these visualizers publicly available?

    In either case, thanks! I’m really impressed with what you’ve done!

  16. Pingback: Build the Cities Musikvideo making of – Yep

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.