On Friday November 29th I found myself exhibiting an artwork at Vivid Projects as part of their Bring Your Own Beamer (BYOB) exhibition. BYOB is a global series of exhibitions which see artists using projectors to display their work, with Birmingham’s event organised by notable local artists Antonio Roberts and Pete Ashton.
The night was a great success, with a diverse range of pieces being exhibited by more than twenty artists. My piece was a physics-y controllable visualiser, using Box2DJS as its foundation.
Box2D?
Whether you’ve heard of it or not, you’ve probably already experienced the Box2D physics engine first-hand – developed by Erin Catto, the engine is best known for powering the physics behind the Angry Birds series of games. It provides a framework with which developers can easily create 2D physics simulations, without having to deal with much in the way of complex maths. I’d been eyeing it for a while anyway, so this seemed like the perfect time to give it a try.
My initial idea involved using a JavaScript implementation of Box2D to make some simple, browser-based multiplayer games, in which you can draw in custom shapes which map to real-world environmental features. For example: if there was a window in the centre of the wall being projected onto, then this could be mapped into becoming a pit in which cars racing around it could fall down.
However, due to time constraints I ended up with a visualiser of sorts, within which a flow of small shapes can be manipulated and directed by drawing in – or removing – larger shapes, with various parameters being controllable via keyboard (colour, feedback, shape spawn rate and so on). You can download the code and try it yourself via GitHub, or check out a live demo here if you like (please note, I’ve only tested the demo in Chrome for Mac at this point).
Development
Considering my lack of prior experience with Box2D, development wasn’t too bad. One thing I found confusing at first was that there’s various different JavaScript Box2D ports, but certain tutorials won’t work fully with certain versions as they’re all slightly different to each other. If following a Box2DJS tutorial then make sure to use the same version the author is using, or you might run into problems.
By far the most useful learning resource for me was Jeremy Hubble’s Box2DJS page, which provides code as well as an example working in situ. There’s also a pretty comprehensive tutorial series by Seth Ladd, as well as a series by iforce2d which is worth reading (code examples in C++).
Release
The reaction to the final piece was excellent, and it worked brilliantly on the night with no crashes or glitches. We controlled it live throughout the event, adjusting the settings to create a piece which changed and evolved all night long. A few people even had a go on the night, braving the not exactly user-friendly controls to play with it themselves. You can see a few Vine videos of it in action here, here and here, although it looked a bit more interesting in person!