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 https://github.com/danewatkins/arnolfini-survey for a more detailed account of the software. The kiosk was built in MDF.

You can read more about the survey in Arnolfini
https://www.arnolfini.org.uk/blog/the-most-playful-survey-ever/

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

BAD201 Moving Drawing Project

BA Drawing
Year Two, SB1, 2017/18
BAD201 Moving Drawing Project
Aims:
  • To complete two animated gifs, and in so doing understand how a drawing can be understood to ‘move’ in a variety of ways
  • To produce both a 3-frame and a 15-frame animated gif as a means to explore this process digitally
  • To develop your own selected drawing principles via this process from research into a broad range of animated works.

Learning Outcomes: LO1, LO2, LO3, LO4, LO6, LO7

Tutors: Dane Watkins (animation) and Joe Graham (drawing)

Assessment Methods: Portfolio of Visual Work

“All of a sudden it hit me – if there was such a thing as composing music, there could be such a thing as composing motion. After all, there are melodic figures, why can’t there be figures of motion?” Len Lye
Brief:
Animations have traditionally been linear movies, moving images that are watched from the beginning to the end like a film with a storyline. With the development of digital technologies animations can be found on websites, phones and digital signboards. An animation can be an object in itself in the same way as a drawing or a painting, as well as being a temporal object it can occupy space as well.
This brief asks you to create an animated object, it could be an animated still life or a looped piece of action such as a walk cycle but the object is to create an animated loop, a slice of time in perpetual motion. Ideally you will have optimised the gifs for the web i.e. made them as small a file size as possible in order for the gif to load as quickly as possible within a website. Dane and I will help you with this.
Dane Watkins will be working to help you deliver this module. Dane is an experienced animator and is highly skilled in digital technologies. If you have any problems don’t hesitate to contact him or ask his advice about creating animated gifs, digital images or movies.
Some questions to consider:
  • How is an animated object different to an animated film or a drawing?
  • What is the difference between web colours and analogue colours?
  • How is the physical world translated into digital pixels?

Duration: 3 Weeks.
From Week 5 (October 23rd) until Week 7 (November 13th) of Study Block 1

Key Dates: Deadline for both 3 frame &15 frame gifs: Wednesday 8th November
Group Crit with Dane: Thursday 9th November.

Timetable:

Monday 23rd October: Seminar E (MAC Suite) 1.30pm - 4.30pm
  • Introduction to the history of animation.
  • Introduction to using Photoshop to create animations.
  • Introduction to web colours and optimising images for websites.
  • Introduction to scanning.

Tuesday 24th October: studio
Develop 3 frame animations. Dane will be around all day to help anyone with technical problems of either scanning or drawing frames for an animated gif.
Wednesday 25th October: Mac IT Suite 1.30pm - 4.30pm
By Wednesday afternoon you will have drawn and scanned three drawings and you will use the time in the afternoon to create an animated gif that can be shown on a website.
Thursday 26th October to Wednesday 8th November
Studio time to develop a 15-frame animation.
Wednesday 1st November: Mac IT Suite 1.30pm - 4.30pm
The Mac suite is booked and Dane will be able to help you with any technical problems you may have with Photoshop or scanning.
In order to complete the project you will need to send Dane the link to your website. Please send the link to dane.watkins@gmail.com by the deadline - 5pm Wednesday 8th November
Thursday 9th November Crit 9.30am - 4.30pm
Everyone will present and discuss their responses to the animation brief. You will need to send your work to Dane by 5pm Thursday 3rd November.
Dane Watkins will be in the Drawing studio on the following days:
Monday 23rd October 9.30am - 4.30pm
Tuesday 24th October 9.30am – 4.30pm
Wednesday 25th October 1.30pm – 4.30pm
Monday 30th October 9.30am - 4.30pm
Tuesday 31st October 9.30am – 4.30pm

Wednesday 1st November 1.30pm – 4.30pm

Monday, 20 March 2017

Hand Drawn Website


This animation is taken from the website I am developing for my PhD, view the website eatmydata

This website is based on the bootstrap blog template.

I have adapted the Freelancer template a one page freelancer portfolio theme for Bootstrap created by Start Bootstrap. This theme features several content sections, a responsive portfolio grid with hover effects, full page portfolio item modals, and a working PHP contact form.

To make this into a hand drawn website replace the images in the img folder.

Download the zipped website

Unzip the file, find the images and replace them with your own hand drawn images.

Saturday, 15 October 2016

Animation


Animation



How is animation different to a static drawing? This blog will look at the conceptual idea of plasmaticness and the technique of boiling line animation that gives a vibrant shimmering life to lines.


Plasmaticness 


The Soviet film director Eisenstein coined the phrase ‘plasmaticness’ to describe the primal qualities of life and how a definite form can morph and merge into new shapes. This quality defies the rational world of machines to create a magical otherness, which is ironic as animation can only exist with the aid of machines.






"Rokurokubi" print by Hokusai 

Eisenstein adored the early Disney films such as “Steam Boat Willie” where inanimate objects come into being and their forms stretched and morphed to defy our rational world, breaking the natural laws of physics.

A primal protoplasm, "not yet possessing a 'stable' form, but capable of assuming any form and which, skipping along the rungs of the evolutionary ladder, attaches to any and all forms of animal existence." Eisenstein on Disney


 Fantasmagorie (Emile Cohl 1908)
Cohl is considered to be the first animator. He was part of the Parisian art group 'The Incoherents' who stated in their exhbition catalogue that "All the works are allowed, the serious works and obscene excepted".



Eisenstein
The Soviet film directer Eisenstein was an avid fan of Disney




Battleship Potemkin




Steamboat Willie (Walt Disney, 1928)



Boiling Line Animation




Gertie the Dinosaur (Winsor McCay, 1914)




Roobarb and Custard (Bob Godfrey, 1974)




Nightclub (Jonathan Hodgson, 1983)



25 Ways to Quit Smoking (Bill Plympton, 2000)



Wisdom Teeth (Don Hertzfelf, 2009)





Dr. Katz Professional Therapist (Jonathan Katz 1999)



THE LUYAS 'Says You' [Official Video]

(Amanda Bonaiuto, 2016)


3 frame loop



3 frame loop developed into a more complicated animation



RSA ANIMATE
Cognitive Media and live scribing

Other styles of animation



Rainbow Dance (Len Lye, 1936)



Synchromy (Norman McLaren, 1971)


Revolver (Jonas Odell, 1993)



Automatic Writing (William Kentridge, 2003)






Sunday, 22 November 2015

Weather Condition Codes

http://icons.wxug.com/i/c/a/chanceflurries.gif http://icons.wxug.com/i/c/a/chancerain.gif http://icons.wxug.com/i/c/a/chancesleet.gif http://icons.wxug.com/i/c/a/chancesleet.gif http://icons.wxug.com/i/c/a/chancesnow.gif http://icons.wxug.com/i/c/a/chancetstorms.gif http://icons.wxug.com/i/c/a/chancetstorms.gif http://icons.wxug.com/i/c/a/clear.gif http://icons.wxug.com/i/c/a/clear.gif http://icons.wxug.com/i/c/a/flurries.gif http://icons.wxug.com/i/c/a/fog.gif http://icons.wxug.com/i/c/a/hazy.gif http://icons.wxug.com/i/c/a/mostlycloudy.gif http://icons.wxug.com/i/c/a/mostlysunny.gif http://icons.wxug.com/i/c/a/partlycloudy.gif http://icons.wxug.com/i/c/a/partlysunny.gif http://icons.wxug.com/i/c/a/sleet.gif http://icons.wxug.com/i/c/a/rain.gif http://icons.wxug.com/i/c/a/sleet.gif http://icons.wxug.com/i/c/a/snow.gif http://icons.wxug.com/i/c/a/sunny.gif http://icons.wxug.com/i/c/a/tstorms.gif http://icons.wxug.com/i/c/a/tstorms.gif http://icons.wxug.com/i/c/a/tstorms.gif http://icons.wxug.com/i/c/a/cloudy.gif http://icons.wxug.com/i/c/a/partlycloudy.gif

IMAGE CODES

chancerain
chancesleet
chancesleet
chancesnow
chancetstorms
clear
cloudy
flurries
fog
hazy
mostlycloudy
mostlysunny
partlycloudy
partlysunny
sleet
rain
sleet
snow
sunny
tstorms
cloudy


nt_chanceflurries
nt_chancerain
nt_chancesleet
nt_chancesleet
nt_chancesnow
nt_chancetstorms
nt_clear
nt_cloudy
nt_flurries
nt_fog
nt_hazy
nt_mostlycloudy
nt_mostlysunny
nt_partlycloudy
nt_partlysunny
nt_sleet
nt_rain
nt_sleet
nt_snow
nt_sunny
nt_tstorms
nt_cloudy

http://deepdrizzle.net/weather-falmouth/

Yahoo produces a rss weather feed based on weather.com's forecasts and reports. As well as the numeric data such as temperature, wind speed, humidity and so on the feed includes condition codes to describe the weather conditions. There are 47 condition codes, see above for a a full listing. These condition codes are used to describe all the weather conditions across the world.


The problem with visualising live data

Although there are 47 conditions codes to describe all the different weather conditions yahoo only uses about 15 codes to describe the weather conditions in Bristol and over half of the condition codes are either partly cloudy or mostly cloudy. Does partly cloudy give an accurate description of the current weather conditions? There are only two descriptions of rain, drizzle and showers (which is repeated) are they descriptions that enhance our understanding of the weather. Considering how much the weather occupies conversation in England it is surprising that the live data feeds don't a more descriptive report of the weather. 

Nighttime

http://icons.wxug.com/i/c/a/chanceflurries.gif http://icons.wxug.com/i/c/a/chancerain.gif http://icons.wxug.com/i/c/a/chancesleet.gif http://icons.wxug.com/i/c/a/chancesleet.gif http://icons.wxug.com/i/c/a/chancesnow.gif http://icons.wxug.com/i/c/a/chancetstorms.gif http://icons.wxug.com/i/c/a/chancetstorms.gif http://icons.wxug.com/i/c/a/clear.gif http://icons.wxug.com/i/c/a/clear.gif http://icons.wxug.com/i/c/a/flurries.gif http://icons.wxug.com/i/c/a/fog.gif http://icons.wxug.com/i/c/a/hazy.gif http://icons.wxug.com/i/c/a/mostlycloudy.gif http://icons.wxug.com/i/c/a/mostlysunny.gif http://icons.wxug.com/i/c/a/partlycloudy.gif http://icons.wxug.com/i/c/a/partlysunny.gif http://icons.wxug.com/i/c/a/sleet.gif http://icons.wxug.com/i/c/a/rain.gif http://icons.wxug.com/i/c/a/sleet.gif http://icons.wxug.com/i/c/a/snow.gif http://icons.wxug.com/i/c/a/sunny.gif http://icons.wxug.com/i/c/a/tstorms.gif http://icons.wxug.com/i/c/a/tstorms.gif http://icons.wxug.com/i/c/a/tstorms.gif http://icons.wxug.com/i/c/a/cloudy.gif http://icons.wxug.com/i/c/a/partlycloudy.gif

Icon Set #2

Icon URL example
http://icons.wxug.com/i/c/b/partlycloudy.gif
To use the icon path, insert the icon value in the in the image URL path:
http://icons.wxug.com/i/c/b/ICON.gif

Daytime

http://icons.wxug.com/i/c/b/chanceflurries.gif http://icons.wxug.com/i/c/b/chancerain.gif http://icons.wxug.com/i/c/b/chancesleet.gif http://icons.wxug.com/i/c/b/chancesleet.gif http://icons.wxug.com/i/c/b/chancesnow.gif http://icons.wxug.com/i/c/b/chancetstorms.gif http://icons.wxug.com/i/c/b/chancetstorms.gif http://icons.wxug.com/i/c/b/clear.gif http://icons.wxug.com/i/c/b/clear.gif http://icons.wxug.com/i/c/b/flurries.gif http://icons.wxug.com/i/c/b/fog.gif http://icons.wxug.com/i/c/b/hazy.gif http://icons.wxug.com/i/c/b/mostlycloudy.gif http://icons.wxug.com/i/c/b/mostlysunny.gif http://icons.wxug.com/i/c/b/partlycloudy.gif http://icons.wxug.com/i/c/b/partlysunny.gif http://icons.wxug.com/i/c/b/sleet.gif http://icons.wxug.com/i/c/b/rain.gif http://icons.wxug.com/i/c/b/sleet.gif http://icons.wxug.com/i/c/b/snow.gif http://icons.wxug.com/i/c/b/sunny.gif http://icons.wxug.com/i/c/b/tstorms.gif http://icons.wxug.com/i/c/b/tstorms.gif http://icons.wxug.com/i/c/b/tstorms.gif http://icons.wxug.com/i/c/b/cloudy.gif http://icons.wxug.com/i/c/b/partlycloudy.gif

Nighttime

http://icons.wxug.com/i/c/b/chanceflurries.gif http://icons.wxug.com/i/c/b/chancerain.gif http://icons.wxug.com/i/c/b/chancesleet.gif http://icons.wxug.com/i/c/b/chancesleet.gif http://icons.wxug.com/i/c/b/chancesnow.gif http://icons.wxug.com/i/c/b/chancetstorms.gif http://icons.wxug.com/i/c/b/chancetstorms.gif http://icons.wxug.com/i/c/b/clear.gif http://icons.wxug.com/i/c/b/clear.gif http://icons.wxug.com/i/c/b/flurries.gif http://icons.wxug.com/i/c/b/fog.gif http://icons.wxug.com/i/c/b/hazy.gif http://icons.wxug.com/i/c/b/mostlycloudy.gif http://icons.wxug.com/i/c/b/mostlysunny.gif http://icons.wxug.com/i/c/b/partlycloudy.gif http://icons.wxug.com/i/c/b/partlysunny.gif http://icons.wxug.com/i/c/b/sleet.gif http://icons.wxug.com/i/c/b/rain.gif http://icons.wxug.com/i/c/b/sleet.gif http://icons.wxug.com/i/c/b/snow.gif http://icons.wxug.com/i/c/b/sunny.gif http://icons.wxug.com/i/c/b/tstorms.gif http://icons.wxug.com/i/c/b/tstorms.gif http://icons.wxug.com/i/c/b/tstorms.gif http://icons.wxug.com/i/c/b/cloudy.gif http://icons.wxug.com/i/c/b/partlycloudy.gif

Icon Set #3

Icon URL example
http://icons.wxug.com/i/c/c/partlycloudy.gif
To use the icon path, insert the icon value in the in the image URL path:
http://icons.wxug.com/i/c/c/ICON.gif

Daytime

http://icons.wxug.com/i/c/c/chanceflurries.gif http://icons.wxug.com/i/c/c/chancerain.gif http://icons.wxug.com/i/c/c/chancesleet.gif http://icons.wxug.com/i/c/c/chancesleet.gif http://icons.wxug.com/i/c/c/chancesnow.gif http://icons.wxug.com/i/c/c/chancetstorms.gif http://icons.wxug.com/i/c/c/chancetstorms.gif http://icons.wxug.com/i/c/c/clear.gif http://icons.wxug.com/i/c/c/clear.gif http://icons.wxug.com/i/c/c/flurries.gif http://icons.wxug.com/i/c/c/fog.gif http://icons.wxug.com/i/c/c/hazy.gif http://icons.wxug.com/i/c/c/mostlycloudy.gif http://icons.wxug.com/i/c/c/mostlysunny.gif http://icons.wxug.com/i/c/c/partlycloudy.gif http://icons.wxug.com/i/c/c/partlysunny.gif http://icons.wxug.com/i/c/c/sleet.gif http://icons.wxug.com/i/c/c/rain.gif http://icons.wxug.com/i/c/c/sleet.gif http://icons.wxug.com/i/c/c/snow.gif http://icons.wxug.com/i/c/c/sunny.gif http://icons.wxug.com/i/c/c/tstorms.gif http://icons.wxug.com/i/c/c/tstorms.gif http://icons.wxug.com/i/c/c/tstorms.gif http://icons.wxug.com/i/c/c/cloudy.gif http://icons.wxug.com/i/c/c/partlycloudy.gif

Nighttime

http://icons.wxug.com/i/c/c/chanceflurries.gif http://icons.wxug.com/i/c/c/chancerain.gif http://icons.wxug.com/i/c/c/chancesleet.gif http://icons.wxug.com/i/c/c/chancesleet.gif http://icons.wxug.com/i/c/c/chancesnow.gif http://icons.wxug.com/i/c/c/chancetstorms.gif http://icons.wxug.com/i/c/c/chancetstorms.gif http://icons.wxug.com/i/c/c/clear.gif http://icons.wxug.com/i/c/c/clear.gif http://icons.wxug.com/i/c/c/flurries.gif http://icons.wxug.com/i/c/c/fog.gif http://icons.wxug.com/i/c/c/hazy.gif http://icons.wxug.com/i/c/c/mostlycloudy.gif http://icons.wxug.com/i/c/c/mostlysunny.gif http://icons.wxug.com/i/c/c/partlycloudy.gif http://icons.wxug.com/i/c/c/partlysunny.gif http://icons.wxug.com/i/c/c/sleet.gif http://icons.wxug.com/i/c/c/rain.gif http://icons.wxug.com/i/c/c/sleet.gif http://icons.wxug.com/i/c/c/snow.gif http://icons.wxug.com/i/c/c/sunny.gif http://icons.wxug.com/i/c/c/tstorms.gif http://icons.wxug.com/i/c/c/tstorms.gif http://icons.wxug.com/i/c/c/tstorms.gif http://icons.wxug.com/i/c/c/cloudy.gif http://icons.wxug.com/i/c/c/partlycloudy.gif

Icon Set #4

Icon URL example
http://icons.wxug.com/i/c/d/partlycloudy.gif
To use the icon path, insert the icon value in the in the image URL path:
http://icons.wxug.com/i/c/d/ICON.gif

Daytime

http://icons.wxug.com/i/c/d/chanceflurries.gif http://icons.wxug.com/i/c/d/chancerain.gif http://icons.wxug.com/i/c/d/chancesleet.gif http://icons.wxug.com/i/c/d/chancesleet.gif http://icons.wxug.com/i/c/d/chancesnow.gif http://icons.wxug.com/i/c/d/chancetstorms.gif http://icons.wxug.com/i/c/d/chancetstorms.gif http://icons.wxug.com/i/c/d/clear.gif http://icons.wxug.com/i/c/d/clear.gif http://icons.wxug.com/i/c/d/flurries.gif http://icons.wxug.com/i/c/d/fog.gif http://icons.wxug.com/i/c/d/hazy.gif http://icons.wxug.com/i/c/d/mostlycloudy.gif http://icons.wxug.com/i/c/d/mostlysunny.gif http://icons.wxug.com/i/c/d/partlycloudy.gif http://icons.wxug.com/i/c/d/partlysunny.gif http://icons.wxug.com/i/c/d/sleet.gif http://icons.wxug.com/i/c/d/rain.gif http://icons.wxug.com/i/c/d/sleet.gif http://icons.wxug.com/i/c/d/snow.gif http://icons.wxug.com/i/c/d/sunny.gif http://icons.wxug.com/i/c/d/tstorms.gif http://icons.wxug.com/i/c/d/tstorms.gif http://icons.wxug.com/i/c/d/tstorms.gif http://icons.wxug.com/i/c/d/cloudy.gif http://icons.wxug.com/i/c/d/partlycloudy.gif

Nighttime

http://icons.wxug.com/i/c/d/chanceflurries.gif http://icons.wxug.com/i/c/d/chancerain.gif http://icons.wxug.com/i/c/d/chancesleet.gif http://icons.wxug.com/i/c/d/chancesleet.gif http://icons.wxug.com/i/c/d/chancesnow.gif http://icons.wxug.com/i/c/d/chancetstorms.gif http://icons.wxug.com/i/c/d/chancetstorms.gif http://icons.wxug.com/i/c/d/clear.gif http://icons.wxug.com/i/c/d/clear.gif http://icons.wxug.com/i/c/d/flurries.gif http://icons.wxug.com/i/c/d/fog.gif http://icons.wxug.com/i/c/d/hazy.gif http://icons.wxug.com/i/c/d/mostlycloudy.gif http://icons.wxug.com/i/c/d/mostlysunny.gif http://icons.wxug.com/i/c/d/partlycloudy.gif http://icons.wxug.com/i/c/d/partlysunny.gif http://icons.wxug.com/i/c/d/sleet.gif http://icons.wxug.com/i/c/d/rain.gif http://icons.wxug.com/i/c/d/sleet.gif http://icons.wxug.com/i/c/d/snow.gif http://icons.wxug.com/i/c/d/sunny.gif http://icons.wxug.com/i/c/d/tstorms.gif http://icons.wxug.com/i/c/d/tstorms.gif http://icons.wxug.com/i/c/d/tstorms.gif http://icons.wxug.com/i/c/d/cloudy.gif http://icons.wxug.com/i/c/d/partlycloudy.gif