Red Mars Digital

Butterfly Painter

An interactive, animated 3D installation for a zoo visitor centre in Cumbria.


C#
HTML5
jQuery

Visitors to the zoo encounter this installation in a softly lit room just before they enter the zoo's tropical butterfly hall. A rainforest scene is projected onto a wall, in which a number of animated butterflies are flying about.

Nearby, they find a wall-mounted touchscreen, displaying an application recreated in the panel below - with which they can 'finger paint' onto a cutout representation of a butterfly's wing using basic paint controls and colour-picking palettes.

When a user has finished colouring in their wing, they hit the 'finish' button to see an animated 3D version of their butterfly fly into the scene projected onto the wall, joining the others.

The program maintains a specified number of butterflies - about 10 seems to work best - with each new addition replacing the 'oldest' butterfly in the scene (which will fly out of shot before being erased).

Disclaimer!

The replica app below is a partial copy of the code deployed in the finished installation.

Please do note that the final application was designed to run well on a single offline kiosk setup, with a specific hardware configuration. It was never intended to be made generally available on the web and the replica below is likely to have compatibility issues in some browsers.

Sadly this also means that the 'Finish' button in the replica below is disabled and will not generate an animated butterfly for you! The Unity application is compiled to a standalone executable that can't easily be delivered through the browser, and the flow of the full process requires scripts to be running on the local machine.

Paint mode

Tap to paint your butterfly.

Picker mode

Tap to re-select a colour that you've already used.

Brush preview

Brush size

Tap the palettes to pick a colour.

Undo

your last brushstroke

Clear all

and start again

Finish

and add your butterfly!

How it works

Behind the scenes, the program flows like this:

  1. The touch-screen paint 'app' is built in HTML and jQuery. A Canvas element is defined by a series of quadratic curves outlining the wing template onto which the user can paint. The colour-picking palette code is adapted from David Durman's FlexiColorPicker tool.
  2. The app is 'locked down' as a simple kiosk installation, i.e. browser navigation and all other controls not required for public interaction are disabled.
  3. The projected 'scene' within which the butterflies are flying is a simple Unity3D app, with a static rainforest image displayed at the far end of an invisible 3D 'boundary box' within which the butterflies are constrained.
  4. The butterfly model was adapted from a freely available model using Blender, and animated within Unity.
  5. The butterflies are controlled by a very simple AI, which randomly reassigns each of them a flight path vector, movement speed and wing-flapping animation (from a small number of slightly different animation modes) at short random intervals.
  6. Once a new wing design has been painted and is saved by a user, a representation of their artwork is saved to a .png file to the browser's default download directory.
  7. This directory is monitored by a C# script running in Unity. When a new file with the relevant filename is detected, a batch file is triggered which uses Image Magick command line tools to rotate and resize the image for mapping to the butterfly model in Unity, and copies the formatted output file to a Unity working directory.
  8. This working directory is also monitored by a Unity C# script which, on detection of a new formatted wing texture file, removes the 'eldest' butterfly in the scene and instantiates (out of camera shot) a new one mapped with the new wing texture.

Next project: WikiFindings

Previous project: Edutainment Console

© Red Mars Digital 2017