Tuesday, 9 October 2018


Project DEADLINE – Monday 29th October 09:00

Create an animated gif, a doodle about Plymouth that commemorates the birth of a person or a special day such as the cardboard boat race, Halloween, Xmas etc, or something relevant to Plymouth. The animation must be in the style of a Google Doodle, which are temporary adaptations of the google logo sited on the google search home page. You can view an archive of all the google doodles on https://www.google.com/doodle

The animation could also react to a data feed such as the weather, public transport, lighting times etc.
The doodle must be an animated gif with at least three frames and form an indiscernible loop where the viewer cannot detect a break in the repetition.

The doodle must be 1000PX X 400PX

You can animate the doodle in any number of ways

Styles of animation

Animation has traditionally been either hand drawn or made from physical models.

Hand Drawn Animation

Ub Iwerks drew the first Mickey Mouse cartoons for Walt Disney. In Steam Boat Willy you can see the extensive use of stretch and squash animation techniques, that is where inanimate objects become alive. Look out for the  funnels on the boat and how Mickey's neck stretches out of shape.

I have used stretch and squash in a recent animation produced for REACT in Bristol. The drawings were

Model Animation

Ladislas Starevich was a Russian animator notable for producing the first puppet films which he created out of dead insects.


Bruce Bickford produced these plasticine model animation for Frank Zappa's babysnakes/

Cut Out Animation

Terry Gilliam used a cut up collage technique to produce the animations for Monty Python. 

Bob Godfrey's Do-It-Yourself Animation Show: Terry Gilliam  demonstrates how he produces his animation using cut out and glass to kep the shapes flat. Of course this is much easier to do in photoshop or animate. Gilliam went on to direct films such as Time Bandits (1981) and Brazil (1984)


Han Hoogerbruge made a series of animations in flash for his website http://ml.hoogerbrugge.com/. Flash has evolved into animate which can be used to create the same hard edged animation.

Animated loops

Revolver from Jonas Odell on Vimeo.


Create an Animated Gif in Photoshop

Set up your workspace for screen
Open units and rulers in preferences

Change units to pixels

Create a new photoshop file 1000px x 400px at 72dpi

Import each of your frames onto a new layer

Open the timeline palette

Choose frame animation

Click the hamburger drop down menu in the far right of the palette
Select make frames from layers

Shift select all the frames and change the frame rate to 0.1

Change the looping of the animation to forever

Open Save for web (legacy) palette

Choose gif

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?

A human interacting with a computer
Watkins 2017. Human computer interaction. [animated gif]
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. The player creates a response from the machine. More recently interactivity has come to focus on how people interact with computers. An interactive poster require an input from a person in order to create a response, it might be considered to be active media.

A human using gesture to control their interaction with a computer
Watkins 2017. Human computer gesture interaction. [animated gif]
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.  Wherever 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.
Interactive media is active because it requires an external force to force it into acto 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. As media has changed from passive to active 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. Computer input device. [animated gif]

In interactive posters a keyboard might be too cumbersome and with the development of large touchscreens, 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?
A computer creating a specific response in a human
Watkins 2017. Human computer interaction 2. [animated gif]

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]

Wheeras this is how adverts were thought to be
CNNMoney 2017. Minority Report tech: 15 years later. [video]

Examples of interactive media

Controlling computers through touch

This interactive kiosk was designed for the public gallery Arnolfini in Bristol, UK. The kiosk hosts an audience evaluation survey
Touchscreen survey for Arnolfini, Bristol
Watkins 2017. Survey installed at Arnolfini.

Distinctive - question 4 Arnolfini survey
Watkins, D., 2017. Distinctive question, Arnolfini survey. [animated gif]
With all the standing around and waiting at bus stops, shelters offer a great way to interact with the public. BigBoard combined interactivity and augmented reality to promote the male grooming product Axe, known in the UK as Lynx. Because the bus stops are specific to a particular site the advertisers can play with the 'reality' of that location.

BigBoard JCDecaux Russia, 2012.  AR bus shelter [video]
BigBoard created an interactive augmented reality sign for Axe, grooming products for men (known as Lynx in the UK).
PepsiMax 2011. AR bus shelter [video]

PepsiMax used augmented reality in their Unbelievablebus shelter advert

Controlling computers through gestures

Leap Motion is a small controller the size of a chocolate bar that allows you to control the computer through hand gestures. It can be used in an installation to allow the audience to control the interface.

MeriStation 2017. Leap Motion [video]

Damar 2013. Leap Motion Processing Library [video]

The Leap Motion controller can control processing scripts which can be installed on Raspberry Pis.

Controlling computers through barcodes

8BitRetroGamer 2007. Barcode Battler by Epoch. [video]
Barcode Battler was a handheld games console produced in the early 1990s. The player would scan a bar code to generate a fighter and play against other barcodes. Despite the futuristic back story barcode battler was just a a dice game with each side weighted by generating numbers from barcodes. See http://barcodebattler.co.uk for a fan website of the console and http://barcodebattler.co.uk/gallery/photos/two.jpg shows the different barcode cards with illustrations of the fighters.

Watkins 2017. Games Academy Registration System [animated gif]

I created an interface for a registration system that used a bar code reader to scan ID cards.

Controlling computers through texts

Hello Lamp Post was a playable City project based in Bristol that enabled the public to interact with street furniture such as lamp posts and post boxes

Continental created a campaign that responded to football fans' tweets.

Controlling computers through motion sensors

Reebok – Are You Fast Enough? from Markus Schramm on Vimeo.

"We (Reebok) set up an outdoor billboard in central Stockholm, measuring pedestrians’ pace with a built-in speed cam. Anyone who ran past it faster than 17 km/h, unlocked a pair of ZPump 2.0 shoes."

TAJ Media 2016.  Cafe Pele The Contagious Billboard tv Commercial ad. [video]

The contagious billboard started yawning when it detected someone nearby.

Controlling computers through external data feeds

ClearChannelUK 2015.  ActionAid #WashedAway on One Piccadilly.  [video]

"International development charity ActionAid launches rain-triggered advert on Storm's One Piccadilly screen to send a powerful message on the loss of childhoods due to climate change in Bangladesh."

Controlling computers through heart rate sensors

Bartel 2013. JUDE-artwork.  [video]

Interactive sculpture that changes according to the heart of the user.

Nolde 2006. Greenwich Emotion Map.  [video]

The artist Christian Nolde created an emotional map of Greenwich by recording the heartrate of particpants as they walked around the borough

Controlling computers through traffic data

British Airways 2013.  #lookup in Piccadilly Circus. [video]

--> BA created an advert that tracked the flight path of its planes.

Controlling computers through face recognition

Lemon&Orange 2018.  Coca Cola - Digital Signage system [video]

Lemon&Orange developed a facial recognition system for Coca Cola. The system recognises the faces of bystanders and plays a video based on their demographic.

Animated Posters

Netflix used animated gifs on digital billboards to promote their streaming service.

Generative Posters

Watkins, D., 2003. Balancing on one foot. [animated gif]

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]