You need to upgrade your Adobe Flash Player.
Click here to get the newest version of the player.

Hydrobots is my first project made with Cinder, a open source library for professional-quality creative coding in C++.

A year ago I decided to create again some generative creatures, but this time I wanted to create something more complicated than previous one. Also I was going to using a external 3D mesh to make my creatures more interesting.


At first I started coding in Processing simple wave movement based on sinus function. Next I implemented inertia forces to move it more natural. I also used an OBJ file exported from 3D software, which I duplicated 27 times to create a creature’s body. My first obj mesh was a vertebra model, so my creature looked like a floating spine.


Unfortunately when I added few more creatures to my application, performance decreased rapidly and all ran about 14 FPS. So I had to do something. First and only thought was I should rewrite my code to C++. I was a hard decision, because I don’t like pointers, references, operator overloading, etc. So I reviewed my backgrounds and started working. After a week I rewrote my application and started developing it. I implemented also FBO and VBO wrappers. After that I can added to my application even 40 creatures and all run about 60 FPS! C++ is awesome!

Meanwhile a Cinder was released. I decided to take a look at it closer. It turned out that Cinder is really professional framework with a lot of features. It was all there. So my only choice was rewrite my code again. This time it was much easier and faster.

Later I asked our 3D guy Pawel Wilkos to prepare for me a new 3D mesh to my creatures. Pawel created a segment which consists of 3470 vertices.


I applied simple GLSL shader to each creature and now my hydrobots loomed out of the darkness.

normal pass


xray pass


Background was prepared as a simple quad with texture 3D. It was generated as a tileable turbulence texture at size 64×64x64. Then I modyfied its coordinates in GLSL shader to make it to move. Below there are only a 3 frames from 64.

tileable noise


To increase 3D sense of depth I added 2500 particles. I used nice OpenGL feature to faster rendering a large amout of similar items, because each particle is represented by one point instead of four. Particle’s position based on perlin noise. I also implemented frustum culling to decrease offscreen movement.


Nebulas particles was prepared later as a combine of a few textures on add/substraction blending mode. I based here on my previous work Black Hole.

nebula particle


To make all visualization more interesting I implemented depth of field. I used technique with two framebuffers and blur filter. So If any object was closer or further from camera, it was blurred. Strenght of this blur depends on depth buffer.

depth of field

Last level was color correction. I used simple method to transfer source color to destination color by gradient pattern prepared in photoshop. This pattern is a simple black-white gradient which was applied curves to. This is very simple and quick solution, because all color transformations are calculated in GLSL fragment shader.


color correction

I would like to thank Pawel Wilkos for valuable advices and help.

Related links:
My vimeo profile

One Response to “Hydrobots”

  1. Really excellent work. I’ve been meaning to give Cinder a real shot and I think your post may have been the final straw that broke the camel’s back. Guess it’s time to step it up from Processing and OF to Cinder.

Leave a Reply

Anti-Spam Image