Whilst our bread and butter is visualization work and explorables, every once in while we do fun animation projects as well.

The above project, which was codenamed icon field, started life as a 3D animation piece done as an event piece for a client, which played out on a large screen wall the width of a ballroom.

I repurposed it to use V/R’s logo, and added in some controls to show how the piece is not video and can be tweaked on the fly with some input parameter.

The fact that it is not video makes the code art piece resource light in terms of load, and it runs seamlessly on any canvas size (because everything is procedurally generated), be it the width of a ballroom wall or the confines of your mobile phone.

You don’t need a native compiled piece done on Unity or C++; WebGL has improved by leaps and bounds in recent years and you can run this off any web browser (which you can set to any size). If you have any interest in code art piece to make your event more interesting, drop us a ping!

Icon field: implementation details

The 3D in this piece was implemented using Three.js.

The idea behind the piece is relatively simple: Create multiple fields of icons in 3D space, then move the fields towards the camera to give the illusion that you’re flying through the fields.

When a field has moved behind the camera (and thus is not visible), then just reuse the field by adding this to the back of the queue to be encountered again.

This gives the illusion of an “infinite” runner, and is resource light because at any one point in time, there are only 8 generated fields for the above example.

To keep the center space of the field empty, use a simple formula to exclude the randomly generated icons from appearing there.

Once again, great fun to do code art, especially in the 3D space.