I was called by the nice people from Gendall to develop an application for British Telecom’s ‘Future World’ in Goonhilly, Cornwall.

The brief was to create a drawing game that could allow the user to give a visual interpretation of his/her idea of the future.
The installation was to be set in a room where each visitor of the museum could give feedback about future prediction using different media (record a video of him/herself in response to environmental topics, answer questions about climate change through an interactive questionnaire and so on).
All the feedback retrieved in this room, including the drawings, is stored on a server and is made accessible to the visitors via web.

Video

If you can’t see this please enable Javascript.

Interface

The drawing application consists of two screens: one that shows the drawing made with name and age of the artist and the other one (a touch screen) with the interactive drawing pad.
The user is asked to use his fingers or a palmtop stylus to draw directly on screen and then save his work adding his name and age.

Technology

4 Dell Computers connected to a main server to store the images.
The application in each computer is driven by a Flash AS3 movie that is stretched across the two screens. PHP is used for saving and displaying the images on the server.

Design

In this project the design was already conceived by the company. The only things I added of my own were the feedback animations for buttons and keyboard keys and the concept of using a subtle paper texture for the drawing pad. The drawing was to be saved as a transparent PNG without the paper texture and then this would have been added in loading phase. Unluckily we couldn’t find a texture matching the feel of the whole application so we left it without, but it can be added easily if we want to.

Code

The hardest thing for this drawing game was to save the image on the server while the others were showing and then load the new image seamlessly back into the group.
The steps that I followed to achieve this effect are as listed:

• Delete all the object from the Drawing pad except the drawn image when save button is clicked
• Move the drawing pad object in the screen above while displaying the keyboard for the name insertion
• Get the bitmap data from the drawing pad object
• Encode bitmapdata into a Byte Array
• Encode the Byte Array in a base64 format string
• Pass the string to the PHP file that will save the image on the server
• When finished tell the object that scrolls and displays the previous drawings to load the last image and insert it in the displayed drawings array
• Remove drawing pad

For this application I used two really useful classes that I’m probably going to use a lot in the future:

• Adobe corelib PNGEncoder class
• Base64 class from Andrew Webster, to convert the String returned by the Adobe PNGEncoder class

Also a big help was given from this article from FlepStudio (grazie Filippo!)

Here’s how the code looks like for the saving function:

var bmpdata:BitmapData =  new BitmapData(drawing.width,drawing.height);bmpdata.draw(drawing);byte_array=PNGEncoder.encode(bmpdata);
 
var encoded:String=Base64.encodeByteArray(byte_array);
 
var variables:URLVariables=new URLVariables();
 
variables.png=encoded;
 
variables.name = nameDisplayer.name+"_"+age+"_"+Rnd.integer(100,300);
 
var req:URLRequest=new URLRequest();
 
req.url = serverAddress+ "/savefile.php";
 
req.method=URLRequestMethod.POST;
 
req.data=variables;
 
var loader:URLLoader=new URLLoader();
 
loader.dataFormat=URLLoaderDataFormat.BINARY;
 
loader.addEventListener(Event.COMPLETE,saved);
 
_urlDrawing = variables.name+".png";try {
 
loader.load(req);
 
} catch (error:Error) {
 
trace(error.message);
 
}

Images