When Daniel pitched his idea for an interactive biomimetic sculpture, I knew I wanted to have some part in making it. A few hours in, we realized just how arduous of a task it would be to build 3D biological textures and modules in Blender. But the roots of a good project were in place: Alex had been working on displaying live-manipulable images in a Javascript canvas, Erin was looking up some beautiful old biological illustrations for inspiration, and Mara and Joseph were making good headway on figuring out the Leap Motion controls. I decided to pivot and collapse the project into two dimensions, taking a collage-inspired approach that would directly use the illustrations we were inspired by. I love making surreal collages out of magazines at home, so I was excited to make some procedurally-generated digital ones with the help of Alex the web development guru!

What it does

It uses a set of images classified as bodies, appendages, or features to build a randomized, terrifying mass of biological imagery.

How I built it

Everything is rendered in a single JavaScript canvas on a webpage. The images are pulled from public domain illustrations from old encyclopedias, medical texts, and engravings, which were then modified in photoshop to serve as modular parts of a creature. I defined a type for each image: body, appendage, or feature. There is also a "texture" type which serves as a background, which are all decorative pages from the front of old books. My primary sources for these images were the Flickr gallery of the British Library, and

  • "Body" type images are associated with an array of "attachments", which are the pixel locations of spots on the body where appendages can be linked. They also include two more values which serve as a minimum and maximum angle of rotation allowed for any connected appendages.

  • "Appendages" are associated with an "attachAt" array of the x and y value of the "joint" of the limb. The code uses information about the canvas and image widths to calculate an image placement which aligns limb joints with spots on the body where they can be applied.

  • "Features" are eyes, mouths, holes, and other features which have no strict restraints on their location in the image. They can also vary in size.

The code begins by randomly choosing a body and finding the number of attachment points it has. It then generates that number of limbs and a random set of no more than 3 features to apply to the body, rotates them by a random amount within the allowable range for their associated joint, and draws them on the screen.

Challenges I ran into

I ran into two major challenges with this project: one which was resolved, and one which was not.

The first was the problem of rotating each limb and still placing it in the desired location. Since rotation can only occur with the entire canvas, I ended up having to translate the canvas to the attachment point, rotate it, draw the limb at the proper offset to align its joint with the right location, and then un-rotate the canvas to draw the next image. There was some calculation involved!

The second was the problem of displaying "features" only within the area of the body. There is supposed to be an image compositing variable which will only display an image where its opaque area overlaps with the opaque area of the existing image, but it wasn't possible to set this variable only for "feature" type objects while leaving "appendages" alone.

Accomplishments that I'm proud of

The whole thing!

What I learned

Just a ton of JavaScript. And that there are a lot of weird pictures online. And also that Suriname Toads are revolting.

What's next for MonsterMash


Built With

Share this project: