Flash can be a useful tool to jazz up a website, but is often used pretty inappropriately. One rule I always abide by is: 'Never make a large flash intro sequence, especially if it involves a fair amount of loading time, silly animations and ridiculous sound effects'. The flash developer at Hema (a Dutch department store) took this mantra and threw it out the window, doing everything wrong...
...except the result is BRILLIANT. It makes their product list come to life and actually serves a useful function, guiding people around their products, keeping them entertained and leaving a sizable impression on them for next time.
Normally these animation things only serve to boost the developer's ego, but I think in this case, he or she should be praised - it's silly, but great too :)
So, the title of this post may not be the most enlightening - but it's hard to sum up in 6 or 7 words! I was recently told about a web project called Ten Thousand Cents, that split an image of a $100 bill into 10,000 segments and got people to draw a copy of each segment before putting them back together to recreate a $100 bill.
The concept was pretty simple: using Amazon's Mechanical Turk system (where people are paid to perform basic tasks) and a customised drawing / animation tool, people were paid 1 cent for every segment they re-created and their efforts were "recorded" by the software so their brush strokes could be shown as an animation.
So what they ended up with was a drawing of a $100 bill that cost $100 to create. So far, so good:
You can see in the picture above that a video is playing showing the image segment (left) and the user-created replication (right). Look carefully and you can see a small red traingle showing which segment is being represented. All of the 10,000 segments can be selected and viewed in this way - and it's fair to say there is a variation in the quality of the user's work, as can be seen in the photos and animation below:
But put all this work together and you get a pretty glorious whole, with only the odd error being visible (mostly where the background was left white). The results of this project were put on display at Ars Electronica 2008 in Linz, Austria:
But this whole project had a bigger purpose than just that of a piece of art - the reproduced $100 bills were printed and sold for $100, with all proceeds going to the One Laptop per Child Foundation (OLPC). I had a brief look at the technology behind the project and other than Flash, a lot was done using a coding language I'd not heard of before, called Processing (1.0). It seems an interesting language, but I'll leave it to the creators to explain what it's for:
Their website is full of examples of its use and some of them are really interesting. I've touched on similar themes in this blog before (see: Dynamic Abstraction - Joshua Davis) and think there is a lot of room for mixing programming and graphic design - maybe Processing could fill the open-source gap created by the prominence and proprietary nature of Flash. I've shoved a screenshot of one of the Processing projects I found below - called Platonic Solids - but the site is a nice one, so feel free to find more interesting things for yourself!
As always, that was a bit of a journey but I hope there are a few useful things in there - a great project, a benefiting charity and an open source graphical programming language - now it's time to think of a snappier title! :)
On the way home yesterday, I suddenly remembered about a game I used to play years ago. It's called iSketch and it's effectively an online version of pictionary - with chat, MS Paint-style drawing tools and lots of stupidity thrown in.
Loads of people can play at once and there are a number of different 'rooms' you can join - varying in difficulty and humour - sometimes the really tricky ones are the most enjoyable but it's worth trying a few rooms out to begin with.
You can choose a category and a difficulty level for each game and each player takes it in turn to draw - points are gained if someone guesses your drawing correctly within the time limit, whilst the person to correctly guess bags some points too.
It can be a lot of fun - I'm looking forward to giving it another go in the near future.
I always enjoy looking at a small animation within an article to help explain the point being made. Scientific articles are particularly good at this (see Wikipedia: Parallax GIF but you also see similar work across a wide variety of news and sport reporting. Sometimes, the use of animation can make an article come alive and add much more meaning (especially with space constraints!) than a text-only article. See BBC: Large Hadron Collider (CMS) for a great example).
The above examples use simple animation (such as GIF images) as well as more versatile tools (such as Flash). Flash has really been adopted by the internet community and gone are the days when you'd reach a limited audience with its use. I've done some work with Flash before, but mostly for design (websites, adverts etc). There are plenty of examples out there where Flash is used in useful and dynamic ways. See Geowise - InstantAtlas, Flash Earth and the majority of modern video sites (iPlayer Labs are a great way to see what's on its way too!).
So I decided it would be interesting to explore the middle ground. Instead of using animation to explain experiments, I wanted to use it to document them. Obviously this has been done before, but I thought it would be an interesting exercise to see how easy it can be and how useful the result is.
As I was sat on the bus in central Edinburgh, I saw a busy pedestrian crossing. It struck me that those who knew the crossing well would move across early (knowing when the green man would come), whilst those who didn't (or those who were more cautious) would wait. Also, those who didn't know the crossing and also lacked considerable caution would just risk it whenever, often needing to turn back.
The pedestrian crossing in question - Hannover Street, Edinburgh.
I thought this would be much better mapped from above, to see if the patterns could show us anything. If this task was repeated, some scientific analysis could be performed - possibly answering the following questions:
- What percentage of people wait for the green man?
- Does the number of people waiting affect the caution shown by the people in general?
- What percentage of pedestrians are locals who know the traffic light system?
OK - so before I go any further, I'd best point out I'm not intending to answer these questions - but I thought I'd create a system that possible could. So I set up a Flash animation of the crossing using Koolmoves Flash software. Take a look at the result below (it should repeat every 30 seconds or so):
As you can see, I made a graph of the pattern that updates with the (simplified) animation. The pedestrian lights are shown at the top and a timer ticks along at the bottom. It took about an hour to set up, but with new data could easily be repeated in 10 minutes or so and possibly combined to show an average pattern across many scenarios. It's just an idea - but Flash is pretty versatile - with a little work it could be hooked up to a database and continually refreshed showing current data. So next time you need help in describing an experiment, why not give it a go?
I was recently checking out an article of new AJAX services as I've not done much work in that area before. The list was interesting but most things offered relatively small increases in functionality for the work I do, not giving me as much incentive to change my ways as I'd hoped.
There were, however, a number of great photographic design ideas at varying levels of completion. Some of the best were still 'in construction' with just teasing demos showing off their potential. One such tool was JCrop, a service that allows images to be cropped in real-time directly on a webpage, with various aesthetically-pleasing functionality. The only problem was that the API was only partially completed and only for the more basic functions.
However, I played around with the service and have come up with a nice demo of my own - who needs APIs, eh? The concept was to hide a hidden message beyond a character string that would animate the message if the string was entered correctly.
Obviously, I'm not vindicating its use for genuinely secure information, but as a fun tool it might just work. So, I hit upon the idea of having my mobile phone number revealed if you enter some information that only my friends / clients are likely to know.
All you have to do is enter my two home-towns and my phone number will be displayed, one digit at a time:
I've customised the use of this service, moving away from any cropping purpose, to just use the animation and highlight functions, set to an image map and link id values, assigned to the correct animation and location.
The background image can be changed very easily as well, meaning each coded message could look different. I'm considering expanding the idea as a service (similar to Photowords), but we'll see if I have time!
You may have already heard about Garfield Minus Garfield as I saw it described earlier today as an "internet phenomenon" - However, it was new to me so I thought it was worth a post!
The premise is simple - remove Garfield from the original Garfield comic strips and create a new comic about one man's insanity....it really works rather well :)
I've put together a sample of 4 strips below, but there are loads more on the official site (link below)
Processing is an open source programming language and environment for people who want to program images, animation, and interactions. 
