March 7th, 2012

Ctrl+Alt+Del - Scott & Ted

Wild Ideas: Automatic Box Connection (spaceship design)

Late last night I got a wild idea and decided to follow through with it. I wanted to see if I could take various rectangular shapes and connect them in some coherent manner, then increase the shape of the components and connection to create a body around all of it. I did all of this is JavaScript with Canvas. While I was creating it I stepped the function by time, making it look animated, which I thought looked pretty cool. I then took each frame and compiled it into one animation file.

As you watch the animation (it loops) you'll see two things. First a bunch of unconnected rectangular and square shapes have lines drawn between only the closest ones until finally all of them are one connected whole. After that the border is enhanced with an fading outline, giving the entire thing a fuller body. The ultimate idea was to automate the creation of spaceship designs from completely arbitrary components. The smallest boxes were added just to influence the final shape of the connections.

Animation of connecting close shapes and adding border

Performance-wise the most expensive operation is the feathering. That alone has six iterations, one for each pixel expanded layer, and takes ~240ms (40ms per pixel increase!) versus only 14ms for the entire area draw and connection finding and drawing algorithm. Minus that feathering, this is something that could even be done on-the-fly as boxes are moved around or added.

The next step in this will be to add a user interface to add boxes and move them around in a grid. At some point I'll post the full source code so that, if anyone desires, they can review it, provide critique and perhaps better ways of doing some of the things, etc.