[ Try Bug Musicans ]

This series of experiments started with something completely unrelated to music. I remember seeing ragdoll characters commonly used in video games and artworks either to invoke a surreal feeling or for a comedic effect. I wanted to try implementing it in p5.js with the help of a physics library.

Box2D is one of those popular physics engine for 2D graphics, but Matter.js seems to have gained popularity in recent years partially due to its native impelmentation in JavaScript. After reading its documentation and watching a couple of Coding Train videos on it, I finally decided to use matter.js.

To me, a ragdoll is essentially a human skeleton with physics built-in. The most minimal starting point I could think of was to create one joint.

From there, I added multiple joints to form a human form.

Then, I added interactivity so the body can be dragged around. The interaction felt quite different when I switched between applying a gravity and not.

While that was an interesting experiment that was definitely worth going back some day, I became bored with it pretty quickly and started to generate bodies that were not in human forms at all. What if it had more than four limbs? What if it had many segments of bodies? What if the bodies branched out? The possibilities were endless. I came up with a data structure for representing these various combinations of body forms and started generating all kinds of weird shapes.

Eventually, I found these forms to look most interesting when they were symmetrical. Maybe that was because most creatures in the nature are symmetrical? Or maybe humans (or just me?) are biased towards symmetrical shapes? When these forms were symmetrical, they started to like bugs. Due to the experimental nature and the time constraint, I focused more on the structure of these creatures and simply used ellipses for all body parts and segments.

Having created this weird bug generator coupled with a physics engine, I decided to apply it to the musical experiments that I had been doing. I created a virtual string instrument for these bugs.

In the live demo below, you can click on the virtual instrument to create as many bugs as you wish. Once the bugs are created and released, they would crawl around on their own, sometimes interacting with each other. When its head comes in contact with a string, the string would vibrate and make a particular sound. As the bugs wander around on this virtual instrument, they create a kind of surreal symphony. Alternatively, you could also drag a bug around to “play” this instrument directly.

Live demo of Bug Musicans.
[ View post on Instagram | View source code in p5.js Web Editor ]