There’s nothing like a little electronic art to get the heart pumpin’. This doesn’t do that, but it does make your eyes jitter and cause the people in the coffee shop to stop talking bad about their friends for a few minutes. Michael Chang is a designer, programmer, game creator and a master of three.js, an open-source javascript 3D library, and Processing. His generative machines use three.js and a bit of his own hacks to construct, explode and colorize all sorts of machine-like geometry, creating what’s likely to be the coolest 3D procedural exploded machine diagram art you’ve seen this week.

Generative Machines

The generative machines project was created by Michael as a Chrome experiment for Google IO. The images are beautiful, but the experience is even better. Projected on a wall and put to the sound of Wolfgang Gartner, Justice or the the like and you’ve got yourself a AV face feast to keep your senses happy for a few more hours. The inspiration is mechanical and every shape is procedurally generated.

The idea of a procedural exploding view diagram was very attractive to me. It had all the right elements: a bunch of techy looking mechanical shapes, diagrammatic, and all of these lines criss crossing everywhere as if to suggest motion of a kind that automatically assembles.

It wasn’t enough that I simply had rivets and slots coming together, I also wanted to make an overall structure that looked as if, when assembled, became a machine that forms a whole that was more than the sum of its parts.

This got me thinking about creating procedural shapes that I can cut up. My first exploration into this was creating a one dimensional exploding axis, where elements can fly forward or back, and adding a radial dimension where elements could be chopped up and exploded outwards.

And this is where it starts getting amazing…

The highest level was the skeleton, which would be a procedurally generated series of nodes…The strategy I ended up with was to generate a “spine” from which radial and branching skeletons would emerge. After the skeleton was decided on, a function traverses each joint and generates the “meat” on the bones, called “assemblies”.


The next layer is what I call assemblies. Each assembly lives on a single joint length in the skeleton. They exist as functions that are hand tailored to procedurally generate something recognizable, such as a jet engine or a battery compartment (I wasn’t too focused on realism at this point). The assemblies get information about the joint length, and where the next joint is, but that’s about it. Inside each assembly are some randomized parameters, and sometimes conditions based on length, so each assembly will look slightly different based on initial conditions.


Finally at the ‘lowest’ level were components. These were essentially recyclable geometry generating tools I would use in each assembly to create the recognizable pieces, such as struts, lattices, wires, etc. For what it’s worth these were pretty quickly hacked up and not really meant to be reusable for the future, but they accomplished their job admirably.


I won’t copy and paste every bit of the article, hop over to read the rest, but the excerpt above is just phenomenally futuristic sounding if you apply it to 3D modeling or constructing a model generatively from say, a parts list or bill of materials. Yeah, some cad software developers are playing with this and it’s not likely to be as visually eye-jittering, but a little UX panache wouldn’t hurt–it’s all part of my “MAKE PRODUCT DEVELOPMENT PRETTY” campaign.

So, check out the entire story on how Michael went through the process. He links to code, provides examples and tells you in detail what worked to finally develop the visuals in the generative machines he set out to create. I particularly enjoy when he reveals that his inspiration for the colors came from Mirror’s Edge and that each machine uses a random color palette created from a distributive sampling of each image. Beautiful.

Hat tip to infovis aficionado and Ph.D. Lynn Cherny for sending this in, oh so long ago.













Josh is founder and editor at, founder at Aimsift Inc., and co-founder of EvD Media. He is involved in engineering, design, visualization, the technology making it happen, and the content developed around it. He is a SolidWorks Certified Professional and excels at falling awkwardly.