Sunday, 23 September 2018

ILLUS500 Interactive Animated Poster (Core strand brief)

Design an Interactive Poster
Strand Leader: Dane Watkins 

As more screens become embedded into our physical spaces such as airports, train stations and communal areas, there is an opportunity for the movie to take pause and through sensors respond to its environment. Yet schedulers are stuffing the big screens with old content, movies designed for TV and cinemas. Adverts tightly cut into 30 second slots are screened repeatedly into a space where they have all day, they could take their time.

How would you create a moving poster? Would it be a generative animation that leisurely scrolled though a database of movements or would you use sensors to attract attention? How would you design an animation that was shown continuously 24/7?

This is a research project to investigate how you would develop your message into an interactive poster or generative animation. Your animation will be installed on a 800px x 480px screen that can use sensors to interact with passers-by, therefore you will need to ensure that the images for your animation are 800 px by 480 px. The animation could be pressed by the passer-by to view more information or it could have a heartrate monitor that measures a by-stander’s pulse and changes accordingly. The heart rate monitor could be used to measure the inflammatory nature of your poster. It could also have a lie detector attached to the poster to check if the bystander is answering truthfully. Or the advert could respond to external data sources such as weather or like the BA adverts it could track the movements of flight paths. Part of the research for this project will be to understand the different sensors and how they could be developed for promotional material. How would sensors enable you to communicate your message?

Alternatively, you could create a generative poster, an animation that cycles through its own database of actions similar to the idling actions of character in a video game waiting for something to happen. How could a poster cycle through a series of actions? How would an animated poster work in a public space where a the viewer’s attention wanders around the environment?

Rather than promoting a product your poster has to promote an idea related to the theme of Global Issues and the narrative you have been working on, it must be a piece of propaganda that uses movement to expand on its message. How would sensors expand on the message? How would sensors encourage people to think a certain way? Unlike posters which have centuries of tradition, interactive and animated posters are relatively new and there is an opportunity to forge new ways of disseminating information.


  • Establish the message for your animated poster
  • Research ways that your message can be enhanced through interactivity, what sensors could be used and how will they enable viewers/users understand your message to more effectively.
  • Research ways that your image could develop a collection of actions
  • Create a storyboard that explains how you will create an interactive or generative animation
  • Produce the animations
  • Test the animations and sensors

Your Proposal

Although we have set the format of the poster we want you to produce there is still plenty of scope for you to be creative when thinking about your proposal.
  • Will your poster be serious, absurd, informative, scary, dramatic, scientific, realistic?
  • What are the important messages related to your chosen subject area?
  • Who is your target audience and how will you make your poster appeal to them? Where could your poster be displayed?
  • How will you incorporate your theme and communicate your ideas?
  • Which artists can you look at for inspiration?

Choose a new VRQ

Now is your chance to choose a new VRQ specific to the contexts of your poster. Choose something that helps you to explore the direction you want your poster to proceed in. Think about context! For instance, you might be interested in other artists who have tackled global issues in their work. Or how different artists use a variety of interactive approaches in their work. You could research into how the potential for interactive art may change how we view the world in the next decades. It’s up to you.

Interactive Workshops

Thursday 6th December 2018
Introduction to generative and interactive art
One day workshop on designing an interactive or generative poster

Thursday 13th December 2018
Interactive poster Workshop (optional) For students who want to further develop an interactive or generative poster.


Workshop: A3 storyboard outlining how you would create a generative or interactive poster

If you choose to create an interactive poster for ILLUS500 your final animations must be 800px x 480px with a storyboard indicating how they are used, these will be uploaded to the DLE. For the working poster your animations will be installed on a Raspberry Pi.

So, what is an interactive poster?

So, what is an interactive poster?

Interactivity enables people to interact with media to create a specific response. Games such as pinball and fairground attractions can be considered to be interactive media. The specific response in games is to gain a higher score, for example in pinball certain targets score more highly than others. More recently interactivity has come to focus on how people interact with computers.

Forms of interaction

Traditional media such as film, TV and print can be thought of as passive, where the viewer sits back and lets the media wash over them, nothing the viewer says or does will have any impact on the content.  Whereaver in the world, to whomever and in whatever conditions the road runner will always run off into the sunset and Wile E. Coyote will always face a calamity of his own making. Traditional media is consumed passively by viewers sat in their own anonymity.
Watkins, D., 2017. Noosphere [animated gif] (Gene Youngblood uses de Chardin’s idea of a Noosphere “a film of organised intelligence that encircles the earth” to describe the media network of film and print that conditions humanity.)

Whereas interactive media requires an external force to do something otherwise the media remains still. The external force can be a viewer prodding the interface or it could be a data stream such as a weather feed forcing the media into action. If there is no external force the screen remains static and unable to move. The viewer has evolved into a user, someone who uses media rather than someone who watches it go by. There are multiple ways that people can interact with computers with the most obvious being the keyboard

Watkins, D., 2017. Interactivity [animated gif]

In interactive posters a keyboard might be too cumbersome and with the development of large touchscreen touch is the most immediate form of interaction. But how does the user know what to touch? A new discipline of usability has evolved to measure the usability of an interface and how easy it is for the user to navigate around the interface. Theorists such as Jacob Nielsen have developed theories of usability but they tend to emphasise efficiency over creativity. Can an interface be playful and creative and still usable?

Advertising has developed a new acronym DOOH, digital out of home advertising to describe interactive digital signage which covers all interactive signage from digital notice boards to interactive kiosks. You can see these signs around the university, do they need to be as dull as ditchwater to work? Would a more creative sign lose it usability?

Watkins, D., 2017. Digital signage [animated gif]
Interactive media changes according to how a user interacts with the media, there are different ways that a viewer or user can interact with media either by touching the poster or through sensors.


If a user has to ocuh the poster how do they know what to touch? How does the user know what to touch in the poster? This is where interactivty media is different to

What is the impact of their interaction?

Registration System -The Games Academy at Falmouth

The Games Academy at Falmouth wanted a way to track the students' studio time so the staff could monitor how often the studio was used. The technician, Andy Smith, Senior Technician (Time Based Media) developed a bar code registration system using a Raspberry Pi (RPi),  barcode scanner and 7 inch display.  Every time a student entered the studio they would scan their student ID card with the bar code reader, and scan when they left the studio, these timestamps were recorded in a database against the student's id and enabled the Games Academy to see studio usage.  If the system recognised the code it would welcome the student to the games academy if not the RPi would return a 'card unrecognisable' error message. I developed an interface for Andy's code that used a series of animations  to illustrate the working process of the registration system, you can see the animations below. I wanted the interface to appear to be alive and vibrant so I used boiling animation to animate a static interface.

Barcode scanner outside The Games Academy at Falmouth
Barcode scanner installed on the Entrance to Falmouth Games Academy.
Watkins 2017. Entrance to Falmouth Games Academy. [animated gif]
A hand holding up a barcode to a barcode reader
A student holding their ID card against a barcode scanner.
Watkins 2017. Barcode scanner. [animated gif]

A suit and tie boiling with indignation
Basic three frame loop which creates a boiling line animation for the interface.
Watkins. 2017. Boiling animation. [animated gif]

A boiling soap dispenser sucking the barcode out of a suit and tie
Scanning a card triggers the 'scanned' animation to show the user that something is happening
Watkins. 2017. Scanned. [animated gif]

The welcome screen was customisable and allowed students to create their own greetings.
You are already signed in!
If the student has already signed the 'signed in' message is returned
Watkins. 2017. Signed in. [animated gif]
Hands held up in exasperation
If the barcode is unrecognisable has already signed the 'unrecognisable' message is returned
Watkins. 2017. Unrecognisable. [animated gif]
A barcode in a suit and tie saying goodbye
When the student scans their card to leave the academy the 'Bye bye' message is returned
Watkins. 2017. Bye bye. [animated gif]

When the interface is not responding to scanning a barcode it can work as a digital sign and show live data. 
A soap dispenser holding a bus in the air with a piece of string
Showing live bus data.
Watkins. 2017. Live transport data. [animated gif]

A headless man reading a newspaper
Showing live news feeds.
Watkins. 2017. Live news feeds. [animated gif]
Most data feeds show information in numbers whereas throughout history people have used metaphors to describe their environment. What metaphors could be used to describe different data feeds?

Canteen is emptier than a banker's heart
Showing the busy-ness of the canteen.
Watkins. 2017. Live canteen feed, empty. [animated gif]
The canteen is bursting at the seams
Or showing its emptiness.
Watkins. 2017. Live canteen feed, empty. [animated gif]

It is raining cats and dogs
Showing live weather feed.
Watkins. 2017. Live weather feed. [animated gif]

Tuesday, 13 February 2018


Workshop Tuesday 13th February 2018

Turning your models into sprite sheets.

You have three different ways of converting your models into animated spritesheets

  1. Use your 3d model, pose it into different movements and photograph
  2. Create paper drawings of your models and scan the drawings
  3. Create digital drawings

Whichever method you choose you will have to create transparent backgrounds for your drawings. The easiest method is to draw directly into photoshop but that is not necessarily the most effective.

The first session is looking at using a scanned image of  a drawing

Rembrandt [Public domain], via Wikimedia Commons
convert image to greyscale

open levels

adjust levels

turn background into a layer

use tools to remove background and colour image

Rembrandt as a digital image

By Paul Perreijn from Heerlen, The Netherlands (P1050473) [CC BY 2.0 (], via Wikimedia Commons

Create Spritesheets in Photoshop

How to create spritesheets for a Street Fighter type game.
You can view the game live at
and you can download the code from

You will need to create 8 spritesheets to represent 8 different fighting moves

Each movement will have at least two frames, a starting point and an endpoint.
The starting point for movement is the same for every movement. You can view these sprites in the DLE







Designing images for screen based media such as websites and games require all measurements to be done in pixels and the resolution set to 72dpi (dots per inch, which is the same as pixels per inch)

Open up photoshop and change the units of measurement to pixels

Create a new photoshop file for each movement

Place each frame on a new layer

Open time line palette Window > Timeline

Click Create Frame Animation button

Click hamburger, top right in palette and choose Make Frames From Layers

Shift select the frames and 0.1seconds
You can now test your animation to see if it works.

Download the Sprite sheet generator
This script generates a single row spritesheet for Conflict of Character used for the ILLGA400 Illustration module.
Unzip the the zipped folder
Load the script into photoshop

Specify the height and number of frames

Save the file as a png

Sunday, 22 October 2017

Arnolfini Survey

An animated kiosk survey designed for Arnolfini in Bristol to evaluate audience engagement in the Grayson Perry exhibition "The Most Popular Art Exhibition Ever!"

The survey on floor 1 of Arnolfini

The animated survey is the result of a collaboration between myself (Dane Watkins) and Arnolfini, it attempts to collect useful data and question how surveys are designed.
  • Do surveys need to be functional and stripped from style to collect data?  
  • Can playfulness add value to surveys? 
  • Does it distract or enhance? 

The survey attempts to test some of these questions by creating a playful, animated cultural artefact. The results of this survey will be compared against previous surveys which were designed in a more functionalist aesthetic.

The survey is built into a kiosk that contains two Raspberry Pis, see for a more detailed account of the software. The kiosk was built in MDF.

You can read more about the survey in Arnolfini

The survey is part of my PhD at Falmouth University investigating playfulness within information design. You can read more about my research at