Disturb Blog

Meetings in Feb [Infographic]

Thu, 12 Apr 2012

I thought I'd gather some data during February this year, in a way that would require minimum effort on my part.

With a lot of meetings coming up, I decided that maybe they'd be a good place to start...

I then defined a few things that I'd look to record; the way people were dressed, the environment we met in, time and distance.

The outcome is, unsurprisingly, void of any real significance BUT I've previously never had the opportunity to create my own infographic from scratch before, including the first-hand data capture - so there was SOME value in it!

So, here it is, in all its glory. I'm open to suggestion of what to record and depict next - significance is not a consideration.

View large here

A Time Travel window to Clerkenwell

Fri, 23 Mar 2012

In March / April's issue of the Clerkenwell Post there’s an article displaying some old pictures of places around our office at Cowcross street, Clerkenwell. We decided to take a walk, seize this sunny Friday morning and open a time travel window to the 1900’s. Here're two pics of St. Bartholomew the Great and II St. John’s Square in 1907.

The old photos are taken from a book called Panoramas of Lost London, the post are giving away a copy, if we win it we'll be making A LOT more images!

Want to see the images a bit bigger?

See St. Bartholomew The Great larger See St. John's Square larger

Cheers, Nacho & Jason

FoldBooth iPhone App

Mon, 19 Mar 2012

Disturb Media and Luis Carranza have just launched an innovative new iPhone App which aims to bring a smile to some people's faces by removing the smile from other's!

It's called Fold Booth, and the simple premise is, just like you would with a piece of paper, you virtually 'fold' images on screen. What do users create? Well, a whole variety of innovative, creative and often surprising content. How did it come about?...

When asked where the concept came from, Luis Carranza, a consultant Creative Technologist and Social Marketing Strategist said "There’s an App for just about anything. I remember having a proper “LOL” playing with another face-morphing app. I was amazed at how something so silly could bring so much momentary joy. If you make people laugh out loud, there’s a really good chance they’ll share the moment with someone else.

"Fold Booth was designed for a quick laugh. There’s nothing wrong with laughing at ourselves or at others, especially when no harm is intended. Part of the inspiration for Foldbooth came from my days at university. Each year they'd print photos of the incoming class on a wall. Each year, without fail, someone would start folding the photos. Then I saw Kempfolds (http://kempfolds.blogspot.com), a blog where people submit folded images of Ross Kemp’s very foldable face. I thought that if you apply that same type of humour to images of people, animals and objects, we could possibly make a nice little app.

"Unfortunately I’m not a developer, but luckily for me, the guys at disturb media live for creative technology. I approached them with the concept and, fortunately, they're the kind of guys who like to take on fun, experimental work as often as they're able to. So, Fold Booth was swiftly crafted, and the results were beyond my expectations. The designs were amazing and the user experience was perfected version by version.

"I’m really pleased with the App. We’ve create a little tool that people will use in unexpected ways. I can definitely see folded politicians in America, folded cats on the web and maybe even folded porn. Whatever people do with it, we just hope that they get a “LMAO” or two."

The Foldbooth.com site is an online extension of the personality and content of the App, allow the curious among us to take a peek at the variety of uses that Fold Booth's growing community are exploring. The site, along with the obligatory Facebook page and Twitter account was also created by the team at Disturb and plans are afoot to extend the offering further still in the coming weeks.

Who knows where this will lead? The creators certainly don't - but that's the exciting aspect of such ventures and exactly the reason that off-the-wall creations will never cease to exist.

The App's available here. What will you fold?

disturb launch kinnari.com

Mon, 19 Mar 2012

Over the course of the last 6 months, we've been working with Kinnari to help them launch their new jewellery brand.

Kinnari and their community of users collaborate together to evolve jewellery designs that are tailored to each individual user's taste; the credit for being the designer of the resulting creation can be equally shared between the brand and the user.

Therefore, it's quite a different relationship to most B2C brands - obviously a transaction takes place for the production of the goods, but the bespoke nature of the journey to arrive at the purchase leaves users feeling a lot less of a consumer and more a creator.

From a digital agency's point of view, this was a fantastic project for disturb to be involved with. Firstly, we were thrilled to be awarded the job of designing the brand's identity - a process with which the brands founders were extremely closely involved. We feel that the end result is an identity that really captures the simplicity and elegance of the brand without stealing the show from the jewellery, which does a very good job of selling itself visually.

The design of the site then really fell into place. We wanted to create a sleek, uncluttered vehicle for the presentation of the visually rich content. Jason Turner, digital designer at disturb said "The first challenge in designing the Kinnari site was about finding the right balance between the branding and the jewellery. I felt that the company identity shouldn't try to compete for attention with the jewellery, because the product certainly looks good enough to sell itself and the less clutter around it the better.

"The next challenge was around the navigation of the design tool. The experience itself is fun, but we didn't want to push this too much further with the look of the various controls and options, due to the risk of devaluing the premium feel. We netted out at a place towards the 'charming' side of fun, which I think is a perfect position for Kinnari."

On the development side, the highlight of the site build for us was the creation of the Design Tool. It allows users to immerse themselves into the creation process, changing the collection, base model, finish, gemstone colour and size, while seeing an updated 3D representation of their jewellery all the way through the process, as a 360° view that they control.

The fact that the site has been built to perform equally well across many devices and platforms is, most importantly, beneficial to Kinnari's community of users because they can design across tablet devices and smart phones as well as desktop PCs. It's something that's also beneficial to disturb because it's a great demonstration of our capabilities in this area and serves us well in our quest to dispel the myth that we're only about Flash!. Without getting too into the technical side, and just for those who are interested, the front end of the site is an HTML / Javascript build, making very good use of jQuery. The back end comprises of a Symphony CMS build and integration of the REALEX payment system.

This all makes for a really slick, enjoyable experience. See what you think and have a go at designing your own jewellery at kinnari.com

Illustrator Script: Save Selection Coordinates

Wed, 07 Mar 2012

In my previous post I mentioned JS and scripting Adobe Creative Suite applications. Starting with this post, I will release tiny tools written for various CS applications (Flash, Illustrator, Photoshop, etc.) that can make some of the tedious tasks a lot easier.

This week I share a script which allows developers pixel perfect precision when dinamically placing assets based on layouts specified by designers.

This is a pretty simple script: it saves the x,y coordinates of selected objects in Illustrator so they can be used by a developer. The most common scenario is when a designer creates a complex layout with many elements tediously placed, that need to be animated/made interactive.

One way to this is to use MovieClips in Illustrator and import them in Flash, then loop through symbols and analyze, which isn't very flexible.

The script I am sharing now gives you a few options for saving coordinates: either as XML (which can be used with HTML5, Objective-C, Java or other technologies) or as ActionScript 3.0 and the data can either be instantly copied to the clipboard for quick use, or saved to a file so it can be loaded later in an application.

You can download the script from as zxp or jsx. files(*).

To use it:

Select elements inside an Illustrator document
Choose File > Scripts > Save Selection Coordinates
Select your options and save !

as the images on the side show. I've also recorded a quick screencast which can be viewed here.

Also, the script offers these extra options:

offset to top left - when selected, the original coordinates are translated so they align with the top left corner (0,0)
sort from centre - when selected, the order of coordinates is sorted based on the shortest distance to the centre of selection, otherwise, it's the order in which the assets were placed inside the document.

According to the xkcd graph this should be handy to someone, at some point :)

* The small print: zxp is the packaged version of the script so you can just open the file and Extension Manager do it's job. The annoying thing is I couldn't find a clean solution for a problem I had with locale and Extension Manager, so the installer will place a lot of copies of the same script just to make sure it works for all locales. If you want to install the script manually, simply download the .jsx file and place it in {Illustrator}/Presets/{locale}/Scripts, where {Illustrator} is the path of your Illustrator installation folder and {locale} is the language/locale used when installing Illustrator. If you have more elegant suggestions for the locale issue when packing scripts, please don't hesitate to post a comment.

FITC Amsterdam 2012

Wed, 29 Feb 2012

This year I was lucky enough (thanks to Tink and Alias) to attend the FITC conference in beautiful Amsterdam. It was a great opportunity to meet with fellow technology enthusiasts and put the finger on the pulse of the continuously changing web and interactive development.

Business in the front: I'll get the industry related things out of the way first. As expected, the accent was placed on the shift from Flash to JavaScript. Even though the conference is called Flash In The Can, and there were 4 tracks, for each talk there was at least one track focusing on JavaScript.

Adobe demoed quite a few HTML5 tools and although the trend seemed to be "make EVERYTHING in JS", it was still obvious the there's still a few rough edges when it comes to web development: lack of mature tools, fragmented performance across platforms and browsers, language specific issues, etc.

Jon Howard's talk based on his experience building games in flash and in html5 was insightful regarding what can/can't be done and should/shouldn't be done in JS. There were still quite a few Flash related highlights like updates to Away3D 4.0, ASFEAT (AS Computer Vision library) and an upcoming newer version of the Alchemy tool which allows C/C++ libraries to be compiled as Actionscript ByteCode.

From my point of view, Actionscript is still pretty relevant: there are tasks where life is so much easier. As Seb Lee Delisle highlighted, it's fairly easy to a Flash developer to build impressive content in JS: simply port stuff that done in Flash a while back :P

On that note you can see my little demo based on Seb's code at the conference here: spherical coordinates. There's a couple of controls on the top right to play with, and yet, it was done in Flash first. JS can be quite handy, not just for the web, but as an application scripting language, especially with CS, where js is used to automate Flash/Illustrator/Photoshop/After Effects/etc. I'll start posting some scripts in the following posts.

Party in the back: I am very interested in interaction in general, but probably less excited about the web these days. There were a lot of 'creative coders' showcasing interesting works, like Andreas Müller, who among other things wrote "a program to help computers dream about flowers". Spending a bit of time myself with toolkits like Processing / Openframeworks / MaxMSP and having an interest in building tools in general, I was very impressed by Marcin Ignac's presentation, where he showcased compelling data visualisation projects build for various clients, including CIID. Some of these projects were made using a toolset he wrote called Plask.

Memo Akten talked about work starting from things that fascinated him as a child: programmable computers and how things work. Some projects, like My Secret Heart and Fragile Tension Depeche Mode video were a great insight into how ideas and code blend. Crafting software that can be tweaked with the intuitiveness or instruments is an appealing perspective to programming. Looking forward to see details on his latest piece called Forms which should premiere on the 8th of March at Bradford.

For me, the highlight of the conference was the brilliant talk gave by Golan Levin called "Machine Code and Visual Culture". Some of his older and current projects were beautifully showcased, both from the conceptual and from the technical point of view. It was amazing to see how much can be learned about human - machine interaction from interactive pieces and was great to able to 'steal' some of that experience. This remained on my mind: "...there's a moment when a person interacting discovers his potential as a creator."

Playing with pixels in depth with Kinect, part 2

Tue, 07 Feb 2012

As if the previous post wasn't geeky enough, here's a quick look at project that also ties in a bit of computer vision and neural networks.

One one of the courses, related to Programming for Architecture and Design, among other things, we had a lecture and tutorial on Neural Networks. There are multiple types of Neural Networks, mainly classified as supervised and unsupervised, based on how this networks learn.

Kohonen networks (which is what this post focuses on) are unsupervised networks, also known as a self organizing maps (SOM). As opposed to supervised networks, where neurons are trained what the output should be like (should weigh towards), this type of network is based on competitive learning - the outputs/neurons organize themselves towards the closest inputs. This idea of competitive learning is based on how it is thought the hippocampus(the part of our brain responsible for navigation) works. In a sense, the outputs display a particle-spring like behaviour towards the inputs, which make this type of network useful for surface fitting/dimensionality reduction/etc.

Initially a dataset of 3d points was given, but it thought it would be more fun for some reason to fit a surface on my face (or any face for that matter). This is what the video illustrated:

Computer vision(OpenCV's HAAR cascade feature) is used to detect faces and isolate an area in the Kinect depth map
depth pixels belong to the face are converted to 3D coordinates
once a point cloud was selected, the points can be fed as the inputs of the neural net and the outputs are vertices of the surface. The number of ouputs is variable, so a low-poly mesh can also be calculated

The mesh can also be saved to AutoCAD (.dxf) format, which is what I've used to render a creepy theatre like mask based on Max's face. Currently the default surface is a rectangular grid, which is a good start, but not ideal for fitting on a face. If you can imagine a face unwrapped into 2D space, it would not look like a perfect rectangular, but that's something to explore at a later time.

In the meantime, if you would like to have a play with the code, the source is included. If this leads to something interesting let us know. The code is written using Processing and uses OpenKinect and OpenCV. If you think this is something you would like explained further, leave a comment bellow and we'll post more details on the wiki.

Playing with pixels in depth with Kinect, part 1

Tue, 07 Feb 2012

I've managed to get a bit of breathing time so I thought about posting a few nerdy bits and pieces. Currently I'm doing an MA in Adaptive Architecture and Computation at UCL which is pretty cool, but keeps me pretty busy lately. Been learning up a lot of new skills there, among others, using the Kinect Sensor.

In this post I'll demo a few things I've learned.

I'll start with a quick technical demo of what I was able to achieve using Kinect and Processing. It displays the following:

user isolation
stereo calibration (matching rgb pixels with depth data)
hand tracking (in 2D and 3D)
skeleton tracking (without the 'cactus' calibration pose)

Although there is an official Microsoft driver for the Kinect, it's for Windows only (no surprize there), so I've used the opensource drivers. There are plenty of wrapper libraries for various languages, but so far I've used wrapper libraries for Processing (Daniel Shiffman's OpenKinect Processing lib and SimpleOpenNI), OpenFrameworks (ofxKinect) and MaxMSP (jit.freenect.grab). Each library has it's pros and cons, but I won't go much into detail in this post.

Here's a list of the data you can get from a Kinect:

Depth/IR/RGB pixels
Accelerometer (accesible with some of the libraries)
Audio data (currently supported by the official KinectSDK at the moment)

Plenty that can be done with the above mentioned. Currently I'm keen to learn more about manipulation the raw data rather than relying on OpenNI to see what sort of interactions can be achieved.

I tend to be gravitate around unusual(think Aphex Twin) ideas lately, hence the first image on the side, which displays how skeleton tracking and user isolation can be used to duplicate parts of the body. When displaying the bounding box, the gray forearm is the copied version.

One unusual idea might be turning people into trees. It seems the Greeks beet me to it (a few thousand years back), as the myth of Heliades also portrays this idea. The second image on the side shows a tracked figure morphing into a tree by recursively copying forearms. You can see the full video here. It's split into 3 parts: context, prototyping and final piece. I'm using SimpleOpenNI and skeleton tracking, but the unstable release of the drivers which allows for a more responsive output, as the calibration pose is not required.

See you in part 2 !

Portrait photos: Joe Syntax

Thu, 19 Jan 2012

January has been a very busy month for me and portraits. Over the next few weeks I will be posting my recent photo work. First up: Joe Syntax. I did these shots right next to our office at about 3:00am on the back of a looooooong night at Fabric. Mr Syntax really is an incredible producer and was a great guy to work with. He's on Med School so if you like your slightly more edgy DnB but not super aggressive he's your man. More to come from Med School artists, watch this space!

Fingering is always better at Christmas Time...

Wed, 04 Jan 2012

After a good 14 months in development, we finally released our first iOS game, Elfinger. It actually started life as a simple experiment when I wanted to see how well a Flash app would run on an iOS device, you can see my findings here. I wanted to test the capabilities of the touch screen so made a simple game where you had to touch specific colours while avoiding others...

It actually turned out to be quite a nice way to play a game, I still haven't seen any other games on iOS devices where you have to touch multiple objects on the screen at once, although admittedly I haven't played every game out there. I was inspired to try and create a full game out of this bare bones idea, I made the decision to ditch the Flash to iOS conversion and work natively in Objective-C.

Instead of using simple coloured squares I started to use different animal images and from this the next incarnation of the game was born - Farmer Finger! The idea was that you were a farmer and you had to collect animals that had escaped from your farm into various landscapes such as hay fields and icy ponds. I collaborated with Greg who kindly provided some character illustrations for me to use, going for a basic but fun cartoon-like feel. The game slowly began to take shape, I was learning the intricacies of Objective-C whilst I went along. With no deadline to meet it was a refreshing way to work as I could take as long as I wanted...Or so I thought...It turned out I took a bit too long as eventually the name 'Farmer Finger' - which I'd registered with Apple's app submission portal - had expired, meaning we could not use that name anymore.

That was one of the many lessons learned throughout the whole process (most of them meant I hated Apple a little bit more each time, but that's another blog post). It wasn't all my fault though, I was waiting for a certain someone to provide me with graphics, which unfortunately never materialised. I guess that's the down side of not having a deadline; you are less likely to get things done as paid work takes priority. Farmer Finger was sadly no more and was placed on the back burner...

...One drunken night a few months ago the conversation somehow became focused on Farmer Finger. Tears were shed and hours were spent reminiscing about the good times. Eventually amongst the drunken ramblings a miracle happened - it was decided that this game should be resurrected, hurrah!

I had the idea that as Christmas was coming we should have some kind of Santa Claus collecting presents in snow storyline or something along those lines, my memory is understandably hazy due to the alcohol consumption. By this time we had hired Antonio Banderas look-a-like Nacho, a talented illustrator, whose task it was to provide all the visual assets for this new version of the game that wouldn't die. Luckily, Nacho had the time to actually do all the graphics I needed and a sterling job he did too. He also came up with the ingenious name, Elf + Finger = Elfinger, obviously.

I spent a couple of weeks updating the app with the new look and added some more functionality. There were the customary head banging on desk moments that every developer knows too well but eventually it was ready to be released to the public. 3 App Store submissions later (It got released with a couple of bugs that were promptly fixed) and Elfinger is now being played by at least 50 people! Yippee!

From the start we made the decision to release the game as a freebie, the main objective was to go through the whole process and gain experience so hopefully we can make more games in the future either for clients or for ourselves with some kind of revenue generating strategy in place. I think it was all worth it, do you? Why not play it and see? (if you have an iOS device that is!)

Streetview Stereographic

Tue, 03 Jan 2012

I came across an online demo called Streetview Stereographic and was inspired to create a short animation that 'drives' from Farringdon station past our office and to Smithfield Market. Streetview Stereographic uses WebGL and Stereographic projection on Google Street View images to create a novel effect that looks like what you are viewing is a mini planet.

As the project uses WebGL you will need a relatively new browser such as Chrome 15+ or Firefox 4+. Some interesting results:

I've seen some videos before that use Stereographic projection and thought it was a cool effect. Unfortunately, I can't remember where I saw any of them. I see lots of potential with this; the demo is open source so it could be adapted so that you can specify a route and automatically be walked you through the route in the same style as the video.

The video was made quite crudely by taking a screenshot of each frame and then stitching them together with FFmpeg.

Signs, Gentlemen, please.

Mon, 12 Dec 2011

Earlier this year I started to formalise a photographic collection that I've been interested in for a while.

It's basically a collection of signage depicting humans, although there are a few that have forced their way through the net for inclusion due to their beautiful form...

Beautiful in my eyes, anyway. The main thing that interests me with these kinds of signs is the fact that, in the main, we regard them purely for their function rather than their form.

Although something outstandingly different will doubtless get our attention for its artistic adventure, we pretty much accept bog-standard executions for these often important pieces of design. And I'm guessing it's no coincidence that this is what you'd expect to find on a standard-bog door.

Sometimes the detail can be extremely curious, bewildering or unintentionally amusing. If I were designing or commissioning signage that, in some instances, may remain in place for decades and be viewed by millions, I'd put it through a little more rigorous development.

I've so far photographed in excess of 60 signs that have got my attention across Europe and the collection is building, slowly but surely. A few of my favourites are pictured here. There's also a slideshow. The full set is on Flickr.

When I get to 100 pieces, I plan to produce a printed piece for the office. Check back next year.

My harsh but fair views on Nokia's 3D projection Mapping.

Tue, 29 Nov 2011

I went to Millbank tower to be blown away but ended up trying to hear a 45min DJ set before being fed a pretty average 5min 3D projection.

Its began with a reference to Snake, light trails going round the building acting like Snake. Nice nod to Nokia's past, I liked this a lot… I really REALLY hope it was being played live by the crowd but I doubt it. <--- It should have, with part of the building being a live stream of them holding a Nokia hand set.

Deadmau5 then came on and played what sounded like a pretty good set with live singers? Unfortunately we only could hear bass as we went quite in the thick of it. Deadmau5 played for 45min with a live feed of himself taking up 1/6th (ish) of the building. The rest of the building had rather typical light beams forming shapes and logos.

After that he went off stage and we waited… yawwwwwn. 5 - 10min later he came back on after a change of clothes for the 5min video that everyones seeing online today.

Honestly, I think it could have been better. The projection and technology was great. They were projecting from across a river on a huge building but unfortunately the huge lack of concept outweighed it for me. First off, why that building?! Its flat and boring, 3D mapping is about using the surface, the shape, getting clever.

It was pretty cool they had a live DJ but 45min just watching him without any explanation of how the evening was gonna run was confusing for me. I was there to see mad crazy animation. This 45min needed a 'show' and to get some more action. Some big lights, some sound-responsive animation, put him in a boat in the middle of the river, have some people parachute off the tower, do anything! Maybe even let people know how the evening will roll out. All that happened was people talking to each other asking 'where's this mad animation stuff?' Or 'Is this it?'.

I can be quite a hater of these 3D mapping projects as I feel most of 'em are severally lacking in CONCEPT. I feel they tend to be very random, I don't like this. All I see is burning cash.

Anyway, I've posted a few I do like:

Prague Astronomical Clock - 600th Anniversary Show

H&M Projection on the Dam Square Amsterdam

Ralph Lauren 4D Experience

It seams a shame that such a great and large-scale opportunity to do something amazing in London's digital world has been missed. There could be many understandable reasons why this fell a bit short. Who knows. All I know was last night there were bound to be a few agencies walking away with the 'I could have done better than that' attitude. I hope they get a chance and do.

Is it possible for a computer to think?

Fri, 11 Nov 2011

I recently received my eagerly awaited iphone 4s only to be disappointed by its biggest selling point - Siri. Siri acts as a personal assistant and is theoretically capable of controlling all aspects of your phone using voice recognition. What apple didn't make clear prior to the device launch is that Siri primarily only works state side. It wont for example look up the location of the nearest cinema if you are in the UK.

Further compounding this problem is the issue Siri has with accents. So far my British English accent has received some pretty weird and wonderful responses, so needless to say I was siri-ously disappointed (boom boom).

This disappointment led me to think about my childhood expectations of our 'technological' future. By now I was certain we would have floating holographic screens, moving side walks and more importantly human level artificial intelligence. But despite the massive advances in technology we are still no where near the stuff of sci-fi films when it comes to AI . Instead, we have software like Siri that process predetermined inputs, perform pattern matching and lookups, and algorithmically adapt outputs.

Of course its one thing to feed millions of facts and rules into a computer and another to get it to recognise significance and relevance. So will we ever program all this into a machine and have it pass the Turing test ( so we couldn't distinguish its responses from that of a human)?

The Lobener prize, which is the annual world-wide contest for state-of-the-art artificial intelligence, awards prizes for the chatterbot considered to be the most human. Since the contest began in 1990 no chatterbot has succeeded in fooling the judges and passing the Turing test, and probably won't for some time.

So whilst I'm coming to accept there wont be any computer guided cars in my near future, I'd still like to see Siri successfully look up my train times or cinema listings here in the UK without the need for a Californian accent. Maybe next year...

BlackBerry App for Everything Everywhere store launch

Wed, 02 Nov 2011

Working closely with our agency partners Motivaction we're proud to say that we've created a BlackBerry App to assist Everything Everywhere launch their new stores.

The piece serves to reward existing and potential customers while driving awareness of both the brand's presence in new locations and the overall existence and offering of Everything Everywhere, who are the parent company for the Orange and T-Mobile brands.

Brand Ambassadors use the App to offer passers by the chance to win BlackBerry handsets, goodie bags or the main prize; a £5k holiday to a destination of their choice.

Users are asked to select from 20 global destinations and then spin a 3D globe in order to try to stop it on their chosen destination, tilting the handset to influence the result.

Developed for the new BlackBerry 9900 device, we worked with OpenGL to give us the flexibility to create a 3D environment for the gameplay. As well as capturing data to facilitate the competition entry, we created an element of Augmented Reality at the end of the experience to reveal the prize and to draw users into the store to collect it.

Developed for the new BlackBerry 9900 device, the game takes place in a 3D space which is rendered using OpenGL ES. Gesture recognition is used to translate the users' interactions into momentum of the globe. The accelerometer is then used to enable tilting of the device to adjust the rotation of the globe and nudge the destination closer to the target.

The augmented reality makes use of two newly available features of Blackberry OS 7; the Magnetometer and the ability to overlay content on top of video. Both these features are part of the new Java SDK for OS 7.

A successful first weekend now complete, we look forward to the activity rolling out across Great Britain in the coming months and would like to congratulate Motivaction for expertly putting the logistics in place to enable these events to happen.

A video walkthrough of the App can be viewed within the case study on our main site here.

I know what you did last weekend

Fri, 28 Oct 2011

Last weekend we went go-karting. Well, we tried to go go-karting...

Here’s a thought - if you’re considering racing at ‘F1K’ - don’t take their advice and go to Heathrow Terminal 3 to get taxis, otherwise most of you will spend your time watching others trundle round the track.

Anyway, Windsor was nice afterwards. We enjoyed a healthy meal and an unhealthy amount of booze. This likely made Queen Liz quite happy that she was out of town.

If the measure of a good night is the lack of recollection surrounding the end of it then this one was right up there with, erm, some other good nights that escape me right now.

Regardless of the ‘moves’, I think we all felt worse than Jagger the next day.

I went to Mars on holiday

Fri, 21 Oct 2011

For the second year running I went to Lanzarote on holiday. This time I took my 5D mark II and a rental car out because looks like Mars. Lanzarote was born out of volcanic eruptions about 35 million years ago, emerging after the breakup of the African and the American continental plates. The greatest recorded of eruptions occurred between 1730 and 1736. The land scape is scattered with volcanic rock and is like nowhere else I have ever been.

The sense you get when walking away from the road is strange. To be honest its scary and feels pretty dangerous. Unless its a town or comercial area (they seam to make wine in parts of the country) there are no paths. In some places not even flat ground, just sharp vocalic rock.

I can't really describe the strange feeling I had when walking away from the road taking some of these photos. The closest sensation I felt was when I was swimming in the sea, when you know you've got a certain distance from the coast and you shouldn't go any further. When there are no cars on the road its deadly silent, in some places only the noise of large clumps volcanic rock scraping against each other under your feet. Its feels like Mars, you feel very alone.

Hopefully the photos give you an idea of what its like. I would highly recommend going and getting a nice little villa separated from a holiday complex. Also a hire car and just drive, head in any direction and you will find something amazing.

I'm sure I will go back again. Hopefully someone can find a client to pay for a shoot out there.

But that was a fantasy: The style of Adam Curtis

Fri, 07 Oct 2011

Adam Curtis is a highly respected political documentary filmmaker who has developed a style of rapid visual propagandising that makes you feel as though you are being subjected to Clockwork Orange's Ludovico technique.

The clip I've attached is from The Century of the Self and deals with the simultaneous invention of propaganda and the modern advertising industry. It should be especially interesting to fans of Madmen.

The style involves rapidly cutting between archive footage sourced from old tv shows, films, documentaries and adverts, much of which has no direct connection to the calm narration that floats over the top. The style has been spoofed well here and Saab even adopted it for a recent commercial - The Story of Saab (it seems that no one on Google has noticed this pastiche, the credit goes to my housemate Nick).

It's hard to pinpoint exactly what effect this style is supposed to have but here's a couple of pseudo intellectual claims:

The erratic cuts and juxtapositions may be designed trigger a heightened state of awareness by creating a kind of cognitive dissonance through mismatch of sources and subject matter that forces you to engage with the political narrative of the film. This is similar to an interesting visual effect invented by Jan van Toorn, described here. Alternatively you could say that it just makes you anxious and ripe for accepting conspiracy theories.

The style is also so obviously not attempting to imitate reality as most documentaries do that it draws your attention to the techniques that director is using to make his argument in a way that has echo's of Brecht's 'distancing effect'.

I could write so much about Adam Curtis's visuals and his way of weaving a compelling narrative into political history but this column is tarting to look get pretty long so I should probably stop now.

Get your blits out for the lads

Fri, 30 Sep 2011

At the moment I'm working on a Flash platform game in my spare time. This has given me the opportunity to experiment with some of the clever techniques employed by game makers of years-gone-by in order to squeeze every last bit of performance out of their game engines. One of these technique is called blitting which is used to decrease load on the processor and therefore increase the frame rate of the game.

Usually in Flash you would create Movieclips or Sprites for all your game objects and add them all to the display list when needed, moving them around using their x and y properties and so on. With blitting you do not use the display list for everything, rather you only have one Bitmapdata object added to the display list, commonly referred to as the canvas. The idea is to update the pixels of the canvas with the pixels of whatever it is you want to be displayed in your game. This method is much faster because the overhead of creating complex objects is avoided as you are working solely at the pixel level.

You can see a simple example of using blitting here - From looking at the code you can see that the Box is being drawn into the canvas at a different position on every frame, in this case the box will move diagonally down the screen. This is a very simplified version of the method I have implemented in my game but you should be able to see how it works and the benefits this technique provides. You'll notice that I have only added a few properties to the Box object - If I was using a Sprite or MovieClip then I would also be adding a lot more complexity which I wouldn't necessarily make use of.

Of course you'd want to be using something more interesting than a pink box in your game unless you were making a game where the protagonist was in fact a pink box...but that would be a pretty shit game. One way of adding your own graphics is by using sprite sheets, another very common practice used when making games. You can read more about sprite sheets here

With Adobe's recent anouncement of the Starling Framework (an open-source Actionscript API for utilising the GPU directly) game development using Flash may not be so much about optimisation as it has been in the past but it's still useful to know the techniques that many thousands of classic games such as Legend of Zelda and Super Mario World have used.

For more reading on this and other equally interesting subjects head over to 8-Bit Rocket where there are many well written and highly useful tutorials.

Also, there is an excellent 3 part video tutorial on gotoAndLearn.com that deals specifically with blitting and sprite sheets, well worth a watch!

What a load of blit.

Etienne Gros

Fri, 30 Sep 2011

I had never seen the work of Etienne Gros but now I cant get enough of it. He's a French man and I cant understand anything on this site (really should learn french) but he has some brilliant stuff to look at. Most of his work consists of portraying nude ladies which is always a good start, however his means of doing this are not so standard.

Many of his paintings are ghostly and I'm not sure are actually paintings at all (see black and white image) and the closest to tradition paintings are extremely 'gritty' with nice big blocks of colour.

However what really caught my eye where these foam sculptures titled 'les mousses'. I love that these are almost 'hacked' pieces of foam. I really would like to see how these are held together although I'm pretty sure it will be a very simple wire or clip in the right place. Its amazing me how by simply clipping in certain areas of this foam can display something as complex as the human body in such an organic way.

White Donkey for Sale

Thu, 15 Sep 2011

Matthew Sawyer was listed as Guardian's Artist of the week so I popped in to the Rokeby Gallery to check out 'White Donkey for Sale'. This ongoing series titled 'Documentary Works' includes text, painting, drawing and some rather weird sculpture.

The highlight of the exhibition for me were the quirky bits of text which contextualised his photographs. I laughed out loud at the ping pong ball which he posted anonymously through a strangers letterbox. He had written five words on the ball which summed up his 33rd year - one of those words was Ukulele.

Learning C++

Fri, 09 Sep 2011

I’ve decided that I need to start increasing my programming language knowledge. C++, although a pretty old language, is still the predominant language used in the gaming and audio development industry, and if I was ever to pursue a career in programming aside from what I am doing now, then it would be in one of these two areas. Therefore using my amazing powers of reasoning, I’ve worked out that I would probably benefit from learning C++.

Two things have inspired me to start learning C++; Firstly, I’ve been playing a lot of Battlefield : Bad Company 2 recently, and so have been checking out what’s coming up in DICE‘s next instalment of the franchise, the ingeniously named Battlefield 3. I’ve quite simply been blown away by what they are doing and making possible with their new game engine, FrostBite 2.0. Have a look at some of the gameplay trailers here and here and you'll see how good it looks - it's not just the visuals either - the sound is the best I've ever heard in a game and certainly wouldn't be out of place in a Hollywood blockbuster.

Secondly, I got an email the other day from a highly regarded German audio plugin company called Brainworx who mentioned they were recruiting. The list of qualifications needed included c/c++ which further fuelled my interest in learning the language. I've always been interested in making music and audio software in general, coming from the days of strictly hardware studios into the studio-in-a-box era where ridiculously expensive hardware is mimicked incredibly accurately in software at a fraction of the cost and can be run from a mid-powered laptop is something that is interesting and inspiring to me. I've always fancied writing my own VST plugin.

I’ve started off by going through a book titled Beginning C++ Through Game Programming which is a nice introduction to the nuances of the C++ syntax. Quite a lot of it is stuff I already know due to my knowledge of AS3 and Objective-C, but it doesn’t hurt to skim over these chapters to reassure myself I’m not missing out anything important.

Once I’ve finished this book I’m gonna start making some recreations of some classic games such as Pong and Tetris, purely to get more used to the syntax. Then the real fun (?) will start, as I’m planning on learning some OpenGL and DirectX programming, which I’m sure will make me want to jump out of the window at first but is something that I definitely want to get to grips with.

Stay tuned for the next installment...might take a few years but it will happen eventually...honest...

Visualising what people on Twitter like

Thu, 08 Sep 2011

The Twitter streaming API allows access to tweets on Twitter as they are created. I decided to experiment by writing a data-mining script that collects geo-located tweets from the streaming API that contain people saying that they 'like' something. For this post I have created two visualisations that aim to make sense of the data collected so far and display it in an easily digestible way.

The script has been running for about 5 days in total and has collected 1873 tweets; It has parsed a lot more tweets than that but a tweet is only added when it meets a certain criteria; which is that it is geo-located from the UK and contains a phrase such as 'I like', 'I love', 'I am fond of', etc...

From the data the second most 'liked' thing is Twitter itself which is un-surprising; 'My Life' is 4th and 'My vagina' is 32nd. The most liked things on Twitter are 'That song' and 'This song' which provides a very un-informative insight into the people on Twitter.

The top two images on the right are visualisations of the data. The first image is a 'Tree Map' which was quite simple to put together thanks to Google Chart Tools. The larger the square, the more likes and vice versa. Click here to view the visualisation in full. The data isn't perfect, for example, 'The' is one of the most popular things but I think overall it works quite well at extracting 'likes'.

The second visualisation is a Processing sketch that plots a users location along with what they have said they like. View a larger image of the sketch here. It doesn't really provide any insights geographically but it's a starting point for something that could have a lot more potential for spotting geographical and cultural trends. Download the code and data for the Processing sketch on the Disturb wiki here.

For now, I will leave the spider running for another month or so and then post again with some updated visualisations and hopefully some more interesting data from Twitter.

Vivian Maier - 1950's Street Photographer

Wed, 07 Sep 2011

Online this week, I came across the work of Vivian Maier. This incredibly talented and unknown amateur photographer was a nanny who spent her free time taking pictures in and around New York and Chicago for a hobby.

Her black and white photographs insightfully capture life in urban America, candidly recording some of the most interesting characteristics and idiosyncrasies of the 1950’s and 60’s.

Like many others I found her unique and authentic style of street photography poignant and captivating - but although clearly gifted Vivian Maier never publicised her work.

Her pictures were discovered at a local thrift auction in 2007 by John Maloof who has since archived and catalogued Maier’s work for the enjoyment of others. www.vivianmaier.com

Standard Definition Animals

Tue, 06 Sep 2011

I'm certainly no creationist BUT a recent trip to Alligator Bay got me thinking...

The animals that seem to have been on the planet the longest appear to have been created at a lower definition than the newer 'HD animals'. Like a lot of processes that we've seen evolve over a lot shorter timeline, they start off very rough, blocky and obvious then become a lot more subtle and refined as technology moves forward.

I'm thinking about things like the Printing Process, Textiles, TV screens and Arcade Games - to name but a few.

For those who are used to playing games on an PSP, picking up a Gameboy instantly gives the individual a feeling that it's a device from an earlier age. This was the same feeling that I (used to seeing humans, cats, dogs, horses etc) got when presented with an environment full of reptiles - these must have been created in a time where animals were made from a more basic kit of parts.

Although the modern day 'HD animals', as I'd like to call them, have an undoubted refinement to them, the original 'SD' ones have a low-resolution charm. As does the Gameboy ;)

[photos taken on Canon EOS 500D]

Visualisation of olympics game entries

Mon, 01 Aug 2011

This visualisation shows entries to a nationwide competition which took place over about 5 weeks. The competition consisted of 1,000 stores handing out scratch-cards to customers offering them a chance to play a web based game to win a pair of tickets to the olympics. Please ensure you watch the video in HD (720p)!

The game was widely cross-platform and allowed the game to be played on mobile devices, tablets and desktop computers. In the visualisation circles represent an entry. The diameter of the circle is based on the score the user achieved (a bigger circle is a better score) and the location of the circle represents where the player was located in the country.

The visualisation was created using Processing.

Some numbers:

There were 25,372 entries
Spread out over 38 days
Which is 676 entries a day
Or about 1 entry every 2 minutes
Time in the video is sped up 36,480 times

OFFF 2011 Barcelona - Let's feed the future workshop

Mon, 20 Jun 2011

To follow up on my previous post about 'Aaron Koblin: Let's feed the future workshop' at OFF, I'll talk about some of the projects created in the workshop. It was held by Aaron Koblin, Ricardo Cabello AKA Mr. Doob, Filip Visnjic and Eduard Prats Molner.

Unfortunately, the elusive Mr. Doob was nowhere to be seen on stage during the talk which was a shame. The workshop consisted of 10 applicants who had six and a half hours to create something cool. I think the time restraints affected the output of the workshop a little bit and as a result we saw 3 or 4 completed projects presented by four of the applicants. These consisted of some work using the Kinect and Cinder to route the Kinect output to a browser and then modify it using Chrome and WebGL; some work involving compression of images and audio to visualise what content is actually lost during compression and the 'Receipt Racer' a basic racing game re-worked to run on a receipt printer using a playstation controller and a projector.

To start, I will discuss the Kinect and WebGL. This was demoed by Marcin Ignac and from what he said Mr. Doob helped him to get it working. It's nice to see a browser processing Kinect data in real-time and using WebGL, however, I don't think it demonstrates a real life usage of the Kinect whereby users at home could use their Kinect to interact with a webpage. I don't think this would ever be possible without the use of some kind of plugin so it is still impressive to see it working in a web browser. This image posted on twitter by Marcin Ignac (which you can also see on the right below the video) shows a preview of the demo and the image below it shows a grab of the demo during the talk.

The work involving compression of images and audio was an interesting topic and seemed like a good starting point for some more interesting work. Unfortunately, I can't remember who presented it and I don't have any images of it being demoed but I will try to explain what went on.
Firstly, they took an image at full quality and an image that had been compressed; they processed the images to find the differences between the two and then outputted this difference as a separate image which visualised what the compression had actually done. Because there's no images of this, I have tried to re-create this which can be seen in the three images on the right. First is a full-res version of an image, then a compressed version and finally a version where anything missing from the original image is shown in black.
After showing the image version, they used this same concept on audio files, so they compressed an audio file, compared it with the original and then played out the difference so we can listen to what has been stripped out by the compression. It was interesting with the audio because to me, I couldn't hear a difference between the compressed and un-compressed versions.

Finally, what I think was the most interesting project was the Recipt Racer. This was created by Joshua Noble, Martin Fuchs & Philip Whitfield. There is a video of the project being demoed at the top right of this post; you can also watch a clearer video here. Joshua noble also has some photographs of the project on his website. Using a thermal receipt printer as the 'screen', a projector to project the player on the 'screen' and a playstation controller to move the player around the 'screen' they have created an interesting combination of physical and digital mediums to re-hash a simple racer game.
The receipt printer prints out a basic track which curves from left to right and prints out random blocks to avoid. The projector projects a little dot which represents the player or the car onto the track; the receipt printer then prints more track which causes the movement of the car and finally, the player must move his car around the printed track using a playstation controller to avoid the walls and obstacles. Watch the video to get a good idea of how it works. I particularly like the way the projector shows the crashes using pixelated red explosions.

All in all there was some interesting work as an outcome of the workshop. It would be interesting to see what would have come out of it given the attendees more time, but I think that the time limit was an important concept of the workshop.

from the disturb archives: Cushe Online Store

Sat, 18 Jun 2011

From the archives: Cushe Footwear asked disturb to create a unique and interesting shopping experience. From initial scamps to design and production this was a project we were responsible for in its entirety.

It looked great, worked great, and sold footwear at such a pace that the shop had to go offline while it got it's breath back.

This was a project from the first year of disturb's existence, spanning 2007/2008 and it still remains very close to our hearts. as we were establishing our own brand of digital design, we were helping to further the flourishing footwear brand that we'd been working very closely with during its formative years.

At the time, a Flash-based online store was quite an adventurous way to go - but our brief was certainly not to stay safe. We didn't have today's heightened worries of cross-device compatibility so created an immersive online shopping experience that was certainly functional but more focused in expressing the brand's personality and ethos.

Things change so quickly that, 4 years later, we likely wouldn't answer the same brief in the same manner - but it has it's place in our and Cushe's history as one of the many milestones that helped to make us both what we are today. Happy days.

OFFF 2011 Barcelona - Aaron Koblin

Thu, 16 Jun 2011

'Aaron Koblin: Let's feed the future workshop' was probably the talk I was most looking forward to at OFFF. It focussed on a workshop available for a select few where the attendees would 'work together for one day and present their creations'. I will be covering the results of this workshop in another post, but I think Koblin's introduction to his work and himself warranted a separate blog post.

Aaron Koblin is 'an artist specializing in data and digital technologies'; he is also Creative Director of the Data Arts Team at Google. At OFFF before the workshop attendees presented their work, Koblin gave a brief overview of some of his works. Some projects he mentioned were:

The Johnny Cash project is an interactive music video in which each frame is drawn by a different person. A user will get a frame of the music video and they can then use the drawing tool on the website to re-create the frame in whatever style they choose; limited to a black and white palette. The video at the top right of this post is a version of the music video. Since the video is ever changing, it will probably now be different so go to the website and see it for yourself. Another interesting feature of the project is that frames can be categorised and rated so you can view the video differently based on frame rating, abstract frames, realistic frames, etc.

The video for Radiohead's House of Cards (credits) which used lasers to capture surroundings and shapes to produce a music video that didn't have any video in. You can download the source (written in Processing) and watch a making of video at the Google code page. Koblin also explained how because the video was open source, many spin-off versions of the video had been made and uploaded to youtube including a 3D print of Thom Yorke's face, see image to the right.

eCloud is a sculpture/permanent installation housed inside San Jose International Airport. It features hundreds of panes of 'Smart glass' which are turned on and off to simulate weather patterns around the world. There is a display which details what is being displayed on the panels. There is a lot of information about this at http://www.ecloudproject.com/. The photo to the right (by Spencer Lowell) shows the eCloud installed in the airport there is also a video of it in action here. This project was built in Java and was built using Processing as a base.

Others were ROME which is a completely browser-based music video which makes use of webGL to create realtime 3D graphics, videos and interaction to create an immersive experience. As Aaron said, you really need to see it yourself to experience it so visit the site: http://www.ro.me/.
The Wilderness Downtown another browser-based music video that uses google maps to personalise the music video, features a drawing tool to send messages to your past self and makes use of browser windows to frame different parts of the video.
Finally, Ten Thousand Cents which was a project that used Amazon's Mechanical Turk to ask thousands of people to draw a fraction of a one-hundred dollar bill. The result can be seen in the animated gif to the right.

To see more work of Aaron's, visit his portofolio at http://www.aaronkoblin.com/, it's all really impressive work. I like to see that Processing is used in many of his projects. Also, I think that my favourite projects of his are those in association with Chris Milk and Mr. Doob - ROME, The wilderness downton and The Johnny Cash project.

from the disturb archives: Sparta-Cuss

Wed, 15 Jun 2011

Working with our agency client Brooklyn Brothers, we created quite simply the most offensive project we've ever worked on, but one of the most fun at the same time. A simple yet very effective site where users can send the most disgusting insults to their 'friends'.

Using excerpts from the amazing TV series, we still don't know how this site didn't get banned.

WARNING! - STRONG LANGUAGE

OFFF 2011 Barcelona - the geeky gist

Mon, 13 Jun 2011

Back from an amazing conference and an amazing city. A breath of fresh air is clearly helpful. Maybe it's beautiful Barcelona, maybe the nice weather, the relaxed, beautiful people, but OFFF has a very nice vibe to it. It's so different from geekier conferences and I like it.

Even if OFFF seems to focus more on design, animation and motion graphics, this year I saw showcases of quite a few projects that blended art, design and technology into one.

I will go through a few of the more technical projects showcased at OFFF.

Aside from the technical talk by Aaron Koblin, Ricardo Cabello (mrdoob), Filip Visnjic (CAN) and Eduard Prats Molner, which Max will cover in more detail OFFF also had a brilliant exhibition called Mirrors. This gallery presented a large amount of brilliant works by Kyle McDonald, Zach Liberman, Theo Watson, Daito Manabe, Motoi Ishibashi, Aram Barthol, Marnix de Nijs, Seth Hunter, Eric Rosenbaum and Joshua Davis.

Daito Manabe and Motoi Ishibashi had two brilliant pieces: Points and Fade Out. Points uses a kinect to track the outline of the visitor. Points are computed from the outline and converted into optimal paths for the actuators/motors controlling a compressed air gun. The gun then 'draws' the outline of the tracked visitor on paper.

Fade Out is another brilliant way to digitally draw a portrait: it uses a laser which gradually illuminates a screen filled with phosphorescent paint. Personally, I enjoyed the sound of it and the ephemeral feel the fade out gives to this piece.

Recently I got interested in 3D scanning and 3D printing, as you might have noticed form my previous posts, so I was very pleased to see and experience the Janus machine at OFFFMatica. I was lucky enough to meet Kyle McDonald and talk to him about the project. Got very interesting insights and left inspired to learn more about computer vision, even if, I must admit, topics like AI and Machine learning scare me. The Janus machine uses a 3D scanning technique called structured light. Roughly speaking the idea is light is projected in patterns (a narrow band of vertical stripes for example) onto a subject. The pattern gets distorted on the subject and the 3d data is estimated by using the differences between the distorted and the original pattern. Kyle has an open source project on Google Code called structured-light.

The great things about conferences is you can meet and talk to the people you admire, receive great advices and get inspired. I had the pleasure to chat to Daito Manabe and Kyle McDonald on my 1st day at OFFF which was great. I really hoped to see the illusive mr.doob, but didn't have a chance. I've managed to catch Aaron Koblin for a few questions and a big thank you for the work he and mr.doob have done on the Rome project. I've learned a lot from it and they make it look so easy, but a lot of work went into that. Han Hoogerbrugge put this into words very well: "It's nice to see the people behind the other side of the computer screen".

OFFF 2011 was a great experience, and from the geeky point of view, it proved that the trend of art and technology blending is only going to grow. Makes me wonder how long until the boundary completely disappears.

OFFF 2011 Barcelona - Day 0.5

Thu, 09 Jun 2011

The first couple of speakers I watched today, for me, failed to hit the mark. Tedium sets in very quickly when watching others indulge themselves. I become intolerant to watching 2 mins of work that maybe took two months to create if there's no emotional attachment to me, the viewer.

In fact, I start to write this post as an audience agitates in the presence of some exploratory works that I'm sure were amazingly fun to create - which is a shame. In some respects, it's an inspiration to keep going strong with our own personal projects - it seems that nothing experimental is deemed a failure, with which i wholeheartedly agree. But, the presentation of these explorations really should, perhaps, be better contextualised and be told as more of an engaging story.

Han Hoogerbrugge is a breath of fresh air. He sits on stage behind his laptop looking like he's stepped straight out of Reservoir Dogs.

His early animation work on 'Modern living' and 'Nails' really showcase a raw talent in it's simplest form - these were not money making projects, quite the opposite, but commissioned work arrived because of it. A theme we heard a lot at FOTB10 and one we really try to follow ourselves.

Some MTV animations were followed by 'Clown Basics' and the work in progress of a new game. The on-screen humour plays such a big part in getting the audience on your side.

ProStress is a nice outlet that began self-focused and then turned to look at the light side of topical news, and is a daily obsession with instant reward. One cartoon every morning leaves the feeling that the day has been productive before its barely begun. #jealous

This then led to a tangible product called Fuck Death - models made in China and 'advertised' by The Pope.

Animations for 'Freedom' (?) and 'Melting Pot' were followed, bizarrely, by a website highlighting safety procedures in hospitals. Like the dangers of Laughing Gas and Heavy Lifting. Only in Holland.

And more MTV ads (who else could use the same style for a doctor and a music channel?).

Ah! How did I not work out that, if you were to draw a Venn diagram of all of the above - the Pet Shop Boys 'You Need Love' would be bang in the middle (albeit slightly on the tamer side of things). Cynics might say a slight sell out, but I would say the perfect outlet and, I hope, a decent earner for such an engaging talent.

A great presentation.

Day 1 observation: A LOT less laptops than other similar conferences - might be due to shit internet, but a very different crowd, nonetheless. One that includes about 30 times more females - of whom around 50% are #squeakclappers according to the hot-blooded males in our party - I can't possibly comment. There's a direct relationship between laptops and hot girls. Put the laptops away and the girls shall come ;)

Novelties, playthings and whirligigs from the archives

Fri, 20 May 2011

From time to time disturb have been known to shrug off their business acumen and reach into their pocket to produce a shiny new flash novelty and cast it out into the crowd of excited onlookers without asking for a penny in return. Just case you've let them slip from you mind in the intervening years here's a few to chew on:

Terry Christmas is a flash game that addresses the reality of the holiday period for less fortunate individuals.

Stuntman Joe is the catapult game that inspired countless imitations, most notably Angry Birds.

Blockstock deals with the issue of what happens when blocks fall.

Comedy Colin brings the lipsyncing technology behind top 80s kung fu films to the world of flash

Various Artists and Max

Tue, 17 May 2011

The title kind of says whats in this post... these are various photos from my latest adventures snapping bands and Dj / Producers + Max (from disturb) who is an artist in his own right.

Most of these photos have been taken out the back of a venue where the artist in hand was playing that night. Pretty fun stuff, lots of quick thinking and quick lighting normally whilst trying not to drink to much.

Larger images and many more photos can be viewed at http://www.flickr.com/photos/liveandletdraw/

The photos are of the following...

Blawan (U.K)

listn.to/Blawan www.twitter.com/Blawan

Trippple Nippples (Japan)

www.trippplenippples.com www.myspace.com/trippplenippples

The Death Set (U.S/Australia)

www.thedeathset.com www.myspace .com/thedeathset

Emika (German)

www.ninjatune.net/emika/ www.myspace.com/emikamyspace

Daedelus (U.S)

daedelusmusic.com www.myspace.com/daedelusdarling

Max (U.K/Everywhere)

www.maxnov.com www.disturbmedia.com

from the disturb archives: Cushe intro Movie

Sat, 14 May 2011

When Cushe were acquired by global footwear group, Wolverine, disturb were asked to create a 5 minute animated piece to introduce Cushe and their brand ethos to the rest of the group at their annual conference in the US.

Digital Shoreditch quick notes

Mon, 09 May 2011

The week that just passed was filled with all things digital around Shoreditch as part of Digital Shoreditch I wasn't humanly possible to attend everything available, so I will share a few opinions on a few of the events I had the chance to see.

Lately I've been insterested in 3D in general (be it modeling on a computer or analog, scanning, printing, augmenting reality, etc.) so it made for me to start with a visit to the nice people at Inition. I was blown away by the 3D technologies they had available: 3D scanners, ZCorp 3D printers, 3D displays in different formats(with or without 3D glasses) and in different sizes, depth cameras, AR solutions, Motion Capture solutions, etc. It would be awesome to work with some of these technologies at some point, and I'm sure our talented Motion Artists would be very interested in creating amazing content.

Started my Saturday early morning with a visit to the "From Digital to Analogue, and back again" session hosted by the London Metropolitan University. Had the nice surprise to get myself scanned while I was there.Thanks to Chris, from Metropolitan Works, I've learned more about how 3D scanning works, the different solutions available depending on the scale of the scan and different techniques used to 'stitch' 3D scans which was very interesting. Since the event was hosted in the Shoreditch building, we could only see recordings of how the 3D printers works. The actual printers are at Metropolitan Works, which work in partnership with the University. Pia Jonsson, who teaches the animation courses at London Metropolitan University demoed an interesting blend of 3D scanning, 3D printing and photography for stop motion animation and lip synching. A similar technique was used in Coraline I was informed.

Later I joined the friendly folks from SketchPatch and tried to lend a hand with their drop in session. Anyone interested in picking up a bit of Processing, even completely new to programming, could take part in an introductory workshop/session using nothing more than the browser itself. In case you haven't tried SketchPatch before, I recommend you do. It is a nice little environment to get started with programming without installing anything, and you can learn by modifying existing sketches and share your creations with the world. It is interesting to see what your creation evolves into as it gets cloned and 'remixed' by the community.

Finished my day by visiting qMedia research group at Queen Mary, University of London. Augmented Instruments, Kinect driven instruments, wearable technology, real time avatar responsive agents, they had plenty interesting projects as well.

Overall, it was great to take advantage of the knowledge shared out there. Got home inspired and hoping to get involved with innovative technologies in my current work. I've only covered little of what Digital Shoreditch had to offer, but there are plenty of nice thoughts shared via twitter. Don't forget to check out the resources on the main site.

From the disturb archives: JC Decaux

Sun, 01 May 2011

Our first commercial Flash 3D project from a few years ago. Highlighting the services that the advertising heavyweight can offer brands in and around airport terminals. A nice blend of 2D illustration, 2D and 3D animation. * insert pun relating to 'thinking outside the box' *

Bloc Weekender 2011

Fri, 01 Apr 2011

A couple of weeks ago I took a few days off to head down to Minehead to do some photography for Bloc Weekend. In short they had an absolutely incredible line up and I spent 3 days getting to know my new Canon 5D Mark II whilst juggling getting wrecked and taking straight shots. Highlights for me were Rustie, Daedelus, Four Tet, Mary Anne Hobbs, Jamie XX, LFO (incredible sound responsive light set up, video here) and Kenny Ken with Top Cat!

I met many MANY lovely people and got to do some really close photography off stage with a few of them. Daedelus in particular was super cool and generally a great guy, also after a quick shoot he then went on to tear the roof off with his set. Aphex twin on the other hand....difficult man.

All in all was exhausting and took me a week to recover but couldn't have been more fun.

The photos will be up on the Bloc site soon but here is a small preview of some of the shots I got. Check out the Bloc site, designed by the one and only Give Up Art.

See you there next year!

SameAs visualisation

Wed, 30 Mar 2011

...or how to fit 132 people in a room.

Monday after work, joined by the youngest and oldest of disturb's employees, I went to the SameAs visualisation event. This was the first meetup where everyone that signed up actually got there, thanks to such great speakers.

The talks were brief, but very informative. I was amazed to see the speakers fit content so neatly in a very limited amount of time.

I was impressed by Stefanie Posavec's passion for gathering data and meticulous work. Strangely enough I've managed to see some of her works for the first time at the Pick Me Up exhibition in Somerset House. Coincidentally this event allowed me to learn more about her work.

Alastair Dant showcased very interesting interactive Flash projects build with his team at The Guardian. From World Cup football and balls to custom budget cuts, carbon footprint calculators, afghan war logs and election swingometers, Alaistair quickly covered different techniques in relation to the data portrayed in a very informative talk.

Brock Craft's discussion revolved around his project using the TFL's Cycle scheme API to plot the availability of bikes which part of these scheme through out London. A lot of helpful tips and insights, including details regarding regulations for requesting sensitive data.

The organizers saved the best for last, as Noah Iliinsky delivered a funny, yet very helpful guide on the DOs and DON'Ts in data visualisation. Speaking of DON'Ts, there was an interesting example of a 3D pie chart (from an Apple keynote) which was tilted at a convenient angle so a smaller percentage visually was perceived as larger. Noah was kind enough to a 50% discount code for the book he co-authored: Beautiful Visualization. The code is valid at the time of this post, but I am not sure for how long. The code is: AUTHD

Unfortunately I am not able to go into great detail about each of the talks, but do check out the event website for more details on the speakers and also keep an eye out. Some sessions were filmed so I would expect them to go online at some point in the future.

How to get started with the Molehill API and Away3D 4.0

Mon, 28 Feb 2011

Yesterday at the Flash Gaming Summit the Pre-release of Flash Player 11 was made public, which is pretty big news. Developers kept an eye out since Adobe Max when the first Molehill 3D API demos were displayed.

Here's how you can start using the new API to create hardware accelerated 3D content.

Since this is the pre-release stage, setup is still a bit loose, but I am confident it will get easier and easier as the official release approaches.

You can read a detailed wiki article on how to get setup.

Here are a couple of examples I've managed to compile:

Note:You will need Flash Player 11 to view these examples. If you do not wish to install Flash Player 11, but wish to see these examples, you can see the previews on Youtube:

Even though the Molehill API is pretty low-level, more 3D APIs will support this feature, as Away3D is at the moment so developers will be able to leverage their previous knowledge on 3D APIs in Flash to create 3D accelerated content. Thibault Imbert from Adobe has a more detailed of the APIs on his blog

At the moment the AGALMiniAssembler is used, but the "PixelBender 3D beta release coming Friday 4th March on Adobe labs" the PixelBender team announces.

Also Unity announced they will be supporting the new 3D API with an extra web publishing option: Flash.

I won't go much into great details covering everything. You can find a good roundup of the Molehill new on Uza's blog

Interesting times are around the corner. Looking forward to see how this changes the type of content delivered.

Note: The Unity image is 'kindly borrowed' from the Unity blog

Churnalism or news?

Thu, 24 Feb 2011

We are proud to reveal our involvement in 'Churnalism', recently featured in the Guardian!

Churnalism.com is a new website that promises to shine a spotlight on "churnalism" by exposing the extent to which news articles have been directly copied from press releases.

We were asked by Chris Atkins (an independent film maker) to help him expose lazy journalists that copy and paste directly from press releases without investigating their sources. To do this Chris needed a fake PR agency with a fake site and that's where we came in. The fake company is called Edge Seat who are supposedly based in the Old Truman Brewery in Shoreditch.

In terms of design the only brief was that the site had to fit in with similar PR companies' sites so as not to gain any unnecessary attention or raise any alarms; a quick site with a corporate logo and very allusive content.

Faced with a fairly bland brief, Greg had an idea to help inject some fun into the project. One of the most influential men in the media today is Rupert Murdoch and in honor of this Mr Murdoch was proudly selected to be the sole inspiration for our logo. After selecting a portrait and pixelating it we had a rather abstract image, to which we added a little typography and bang... Edge Seat's corporate identity was formed. (see images)

The bottom bar on the site is also made out of some of our favourite celebrities who feature heavily in today's news. This was achieved by using the same process as the logo.

On a serious note we did the site on the quick to show how easy it is for anyone to make their own "PR" agency.

Fold

Mon, 14 Feb 2011

Lately I got interested in 3D geometry again. In the past I played with 3D packages like 3dsmax, blender and Cinema 4D, managed to code a few structures here an there using either plain OpenGL, either 3D APIs like three.js, Away3D, Papervision3D, etc.

Now I wanted to try to make physical models, instead of just having them on a screen, in this abstract/limitless world. I peaked a bit at the process of designing models for the real world and thinking/doing 3D without a computer...

Last week I went for a 2 day workshop on Generative Design for Robotic Manufacture. The goal was to learn how to take paper folded prototypes into Rhino, parameterize them using Grasshopper, do verlet physics simulations using Kangaroo and hopefully use Lobster IK to simulate the robot movements too. This workflow would help tweak prototypes before they could finally be produced by RoboFold robots.

Ok, I'll admit is sounds a bit much, but let me explain what's all this about: Rhino is a pretty interesting CAD software, used mostly in architecture, product design, jewelry and other manufacturing practices. The first thing that hit me when I started using it, was the fact that the interface, although packed with features, was very logically organized. It provides multiple draw modes which makes it easy to get precise models. It has an AutoCAD like command line interface which makes repetitive tasks faster and the first thing you see when you open up Rhino is a dialog asking for real world measures. Where 3dsmax/blender/C4D seem geared more towards animation, game design and visualization (although product design isn't out of the question), Rhino is clearly designing for making objects for the real world.

Sounds great, but what's the catch ? Well, Rhino is a commercial software, and it was designed for Windows. An OSX version is in the making, but there isn't a solution of getting all the great plugins like Grasshopper on the OSX version yet, so it's best to stick with Rhino for Windows for now. I used it in VirtualBox using XP.

Grashopper is a pretty impressive tool. It's a free plugin that allows the user to create generative/algorithmic designs with no prior programming language knowledge. Although there is a scripting language available called RhinoScript, it's based on VB Script and personally, I hate the syntax. It seems like Rhino 5.0 will have support Python scripting which I look forward to try, but back to Grasshopper. I say no programming language, I mean, you use a visual programming language paradigm based on nodes. Blender uses nodes for shaders, 3dsmax's ParticleFlow system is based on nodes and C4D has the Xpresso editor. All similar in look but different in what they do. Grasshopper on the other hand reminded me more of MaxMSP/PureData. You can link geometry you draw in Rhino to Grashopper(GH) nodes or create points from scratch. You start logically from points, then you link them to make lines, then you link them to make surfaces, and so on. GH provides plenty of nifty tools and is quite flexible.

Kangaroo is a Grasshopper add-on for physical simulations. Once you've got a design in Grasshopper you can apply physical properties to it and run simulations straight from the Rhino interface, which is quite convenient.

Lobster IK is a GH setup by Daniel Piker who developed Kangaroo and although at it's start, Lobster helps with RoboFold simulations.

And yes, it seems everything linked to Rhino will bare animal names :)

The workshop kicked off with making paper prototypes. The goal was to play with different techniques(like repetitions, intersections,etc.) to get a feel for what can what can't be done and what kind of folds restrict movement and how. It was a very interesting process. The computer might make some aspects easier, but nothing beats the world world (so far). I am easily fooled that the computer is much more than a tool, using it on a daily basis, but I was pleasantly surprised by the process of using indispensable simple design tools. I didn't need any manual to use them(pen,paper,ruler and scalpel.), I could dive right an quickly prototype.

The next step was to scan a design and get it into Rhino, from there we exported models to .dxf so we can also try them in Rigid Origami. The process sounded easy, just marking mountain and valley folds in red and blue lines for Rigid Origami, but in practice I found that simpler designs worked better than complex ones which did not work at all. You can see a screen grab from Rhino showing the same fold pattern in 3 version, one simpler than the other. Also, I've added a couple of images from Rigid Origami. The next step was to create a parametric version in Grashpopper, which is why the surface was ruled mostly using even steps. After that we played with Kangaroo to get a feel for doing physical simulations on the model.

Keywords like 'ruled surface, curved surface' flew through the room, and it reminded me of the Graphic Design I started in Bucharest in 2005 (and never finished). We had a pretty interesting course taught by an engineer on how to fold paper. I barely remember some notions about different types of course, and what kind of resistance properties it gave to the paper. The workshop did remind me of the joy of simply making things and made me realize I spent way too much time on a computer. The physical world has it's limitations, but the kind of intuitive thinking that comes from working with real object is something I miss. I am not sure one way(computer) or another(physical) is better, as both have advantages, but I do believe achieving a balance between the two is the answer. Using the advantages of one technique to fill in the short comings of another.

The second day we got paired to design surfaces that would fit a pretty nifty window pattern. I got paired with Dr Kontovourkis Odysseas who teaches Architecture at the University of Nicosia in Cyprus. I must admit I was a bit overwhelmed at the workshop, not only by the amount of new information (which made me wish I picked up Rhino/Grasshopper earlier), but also by the rest of the attendees. I was the youngest, and came from a pretty different background, where the closest thing would be making 3D models in an abstract world. Most of the attendees were architects from different parts of Europe. Most of them were German speakers, although they weren't from Germany. My colleague was kind enough to get me up to speed with Grasshopper and we started using designs from the previous day to fit on the window pattern.

Again simplicity won. Initially we had a folding with quite a few folds in, but it turned out not only it was hard to parameterize, but it also wasn't very scalable. We started from scratch and got a parametric design.

It was a challenging experience, but a fulfilling one. The talented people at Metropoltan Works were a pleasure to learn from and I was impressed with their facilities for 3D scanning and printing.

I seem to find cutting and creasing paper very relaxing and I enjoy the different type of thought process. Looks like I found a way to do 3D, but spend a bit more time away from the computer.

Aknowledgement: the image at the top belongs to Irena Vucinic and was 'kindly borrowed' from the CurvedFolding website.

Human mini case-study

Mon, 14 Feb 2011

One of our most recent projects is the production of the portfolio site for Human; a sound design and soundtrack company with offices in London, Los Angeles, New York and Paris. The site features a simple design based around an 'accordion' with the main content being videos of Human's work. It performs well across many browsers and platforms including iOS and Android.

View the site at humanworldwide.com.

I would say that the website is a good example of a simple site that uses new technologies whilst remaining as backwards compatible as possible.

The images on the right are; the about us page, the commercials video page and the contact page.

Some technical details about the site: It uses Symphony to power the content management system, videos are hosted and provided by Simian and the video player uses Flash if it is installed and if not, it falls back to HTML5 video where available.

Thanks to our friends at Social for their involvement with the design.

Kinetica Art Fair 2011

Mon, 07 Feb 2011

If you mix art, technology, mechanics, electronics, imagination and loads of energy into one fair, you get something like the Kinetica Art Fair. An amazing event that brings together an amazing array of artist and tinkerers.

Last year I was amazed not only by the great amount of pieces presented, but the wide range of pieces too, from old (1960's pioneering computer art /kinetic art works) to new, from analog to digital, from mechanic to electronic.

This year Kinetica certainly kept going up with the trend.

I've seen singing glasses, projection mapping, gigantic radiolarias, capoeira moves frozen into 3d prints, mechanical love, signing machines, blooming walls and much more.

Projection mapping is something I would like to try in the near future, and it was inspiring to see a few examples at Kinetica. The most interesting example was a sphere reactive to touch. I got lost in space trying to think how they achieved projection on a sphere from the inside.

After seeing an amazing documentary called Proteus about radiolarians,Ernst Haeckel and his struggle to find reconciliation between his artistic and his scientific sides, it felt like a puzzle falling into place, when I saw David Ancheleddu's 3D prints.

Using 3D printing, there was another project that caught my attention. The moves of a Capoeira fighter were motion captured and data was used to overlay all the different states that made a move into one 3D form. It was interesting to see time collapsed into on static object. Makes me wonder what Boccioni's "Unique Forms of Continuity" would have looked like if he had the 3D technology of today at his disposal.

This year was a different for me, because I had the opportunity to participate, not just view the Art Fair this year. Daniel Hirscmann invited me to join Technology Will Save Us for the weekend to assist the workshop. There were multiple workshops including an awesome one on DMX Lighting with Arduino. DMX is a protocol somewhat similar to MIDI used in theatre/performances to control lights/smoke machines/etc. but can be used for light based responsive art installations or similar projects. The I helped with was a bit more basics: a soldering workshop, which allowed to people to learn how to solder, buy building one of these fun little toys Daniel and Mike designed, called the Lumiphone. The workshops were packed with people, young and old.

For more images from the workshops, check out Daniel's flickr set.

Overall, Kinetica was a great experience. It did make want to do more works like these and less rich media experiences, which disturb have been successfully been delivering for years.

Shameless plug: Me and Max already know to use the Arduino microcontrollers, thanks to the Physical Computing labs, part of the Creative Computing program at Goldsmiths. Jace is doing great progress, so if you're interested in some innovative experiences that blend the physical and digital worlds, do get in touch.

The adventures of Reiny and Tutu

Sun, 02 Jan 2011

During my 11 days off over Christmas, I managed to get a grand total of a half a day to myself (due to an injured neck ruling me out of a family meal!). I decided to use it wisely.

Then I decided to do something I'd enjoy...

During the break I'd realised that, as a designer and animator, I'd never really created anything on-screen for my small children - so I thought I'd put that straight. They each have their favourite teddy - a reindeer called 'Reiny' and a turtle called 'Tutu' - so I set about bringing them to life.

A quick pencil drawing of each, brought in to Flash, and I was away. I only got as far as a 3 second looping animation before they all arrived back home, but it's a good start. I don't want to set my sights too high, but the creation of a story-based game would be ideal. But with a busy couple of months coming up, this could be quite a while off.

One good thing to come out of my injured neck situation was remembering how much I enjoy this kind of thing. So, you'll find me throwing myself down stairs, or feigning injury, in order to get a chance to carry on.

Have a peek at my progress here.

Merry colour blindness!

Thu, 23 Dec 2010

To keep in check with the Christmas cheer, I have been looking into colour blindness. Specifically, re-creating how people that are colour blind see things using Processing.js as my canvas.

Firstly, I created a simple sketch that creates 'Ishihara colour plates'. These are used to test people to see if they are colour blind. You can see the sketch here. The sketch takes an image, loops through every ten pixels and based on the colours of the image it places a coloured circle. The colours are various shades of orangey-brown or green. The shades are designed to be visible to most people but not to people that have Deuteranopia, Protonopia or Achromatopsia. The first image on the right is the result of putting this image through the sketch. If you can't see a slightly distorted disturb logo in green in the image, then I am afraid that you might well be colour blind.

Being able to test colour blindness is nice and all, but what if you want to see what it would be like to be colour blind? The second sketch I created takes various images and applies filters on them to re-create how people with various types of colour blindness see. You can see the sketch here. NOTE: This sketch is best viewed in Chrome or Safari - It is very slow in Firefox. It works by taking the filters found here and here and then applying them on to the image.

If you press 4 on the sketch, you can see another Ishihara colour plate that I generated using my first sketch. If you view the colour plate normally, you can see the letters "LOL WTF". If you switch to other types of colour blindness, you can see how someone that is colour blind would see the colour plate.

You can see demos and the full sources here;

Merry Christmas!

The Sky in Bloom - title sequence concept

Wed, 15 Dec 2010

Hydra Films asked us to us to work on a title sequence for their first film. Hang on, it might have been us who asked Hydra Films if we could work on it for them. Either way, a nice opportunity to have a small hand in what's shaping up to be a really elegant thriller...

We're at a 'proof of concept' stage at the moment with our work inspired by film's underlying theme of the carpet trade (which becomes somewhat overpowered by the human trafficking).

I thought that a full-on, beautifully produced, cinematic experience punctuated with an animated 2D title sequence that originated from Flash might fit quite nicely, as the picture itself certainly isn't the kind of production that would sit well beside overly indulgent 3D titles.

I looked at different types of carpet-making from around the world and found video reference of many and varied processes. This then became a loose basis for the way that text could build and transition (minus an old woman with a mallet).

We'll see whether this is a route that sits well with the film and whether it's one that we'll collectively progress, but it's been fun so far - so watch this space.

Find out more about Hydra and The Sky in Bloom here wearehydra.com and check back for info on when and where this masterpiece can be enjoyed at a theatre near you!

Easy way to make Box2D games?

Wed, 08 Dec 2010

Jesse Sternberg at sideroller.com has created the "World Construction Kit" It's a toolset / framework for rapidly developing physics based games / websites within the Flash IDE. WCK allows you to layout your 2d worlds / game levels entirely within Flash and have them hook into the physics simulation without writing any code.

Have a go at the game. Click "Next Demo" then use the arrow keys:

The kit is damn cool. You can lay out your Box2D physics worlds within the Flash IDE and also use the component inspector to configure the shapes. Easy-peasy.

He's also created the Box2D Flash Alchemy Port. An AS3 interface to the Box2D C++ 2D physics engine compiled with Adobe Alchemy. Documentation located on his GitHub wiki page.

Exploring three.js Part 1: Exporting models from Cinema 4D to javascript

Mon, 29 Nov 2010

In April, mr.doob(Ricardo Cabello) commited the first release of a Javascript 3D engine called three.js and since then the engine is progressing nicely with contributions from other talented developers like AlteredQualia and kikko (Cyril Diagne).

A Blender export example in the Featured projects raised my interest and thought I should give it a go. I am not a javascript developer, at work I mainly write actionscript, but the way the engine is written and especially the examples made it very easy to get started with three.js.

As I mentioned in previous posts, I played with python a bit over the summer so, as soon as I got a hang of this, I first 'down-ported' the existing Blender exporter from 2.5x to Blender 2.49 and tested the UV Export

The next step was to write an exporter script for Cinema4D, which I did. Now we have a detailed wiki entry on how to install the script and export a model. I tried to make it as simple as possible, so there's no GUI yet, you just select a Polygon Object, run the script and you get 3 files: a copy of three.js, a template html and js file for your model. This should make it easy to test/preview/publish models.

While playing with textures, I noticed that the Canvas renderer in Firefox is a bit slow and it's speed decreases as the texture size increases. I liked the fact that colours, as opposed to textures rendered pretty fast, even in Firefox 3.x with the Canvas renderer, so I focused on this a bit.

Since making Selection Tags and assigning Materials is easy in Cinema 4D I added the ability to use the Material colour in three.js. At the moment there are 3 nice little things about this script:

It exports Polygon Selection colours
It exports the transformation of your Polygon Object (position,rotation,scale) so you can use those in three.js
It generates a preview html file ready to go.

This should make it somewhat easier for less 'techy' people to have a go at this.

There are a few examples on the wiki, some better than others like:

I'd like to thank Delta for allowing me to use his awesome designs to showcase the colour export feature.

Big thanks to Sebastian on the Py4D forums for the great support.

Also, this is something I started in spare time, but now I can also use my time at work for this, not just late nights, so thanks to disturb media to allowing me to contribute to this project in the office.

~~Soon I will change the blender 2.49 and C4D exporters to 'slim' versions which will produce much smaller files.~~ Just added 'slim' exporters to the repository for blender 2.49 and Cinema4D, using AlteredQualia slim converter. Thanks mr.doob for the heads up on that!

At the moment I'm getting the hang of procedural modeling which will be Part 2 of a series of three.js which starts here.

~~In short, at the moment, you can fetch the exporter from my three.js branch and give it a go.~~ mr.doob kindly merged my exporters into the main repository, so just get three.js and you have my exporters too.

Cross-domain getImageData API using Google App Engine

Mon, 29 Nov 2010

$.getImageData is a jQuery plug in that allows you to get an image from anywhere on the internet and use it as if it came from your domain. This should prove useful for anyone who has come across the cross-domain policy enforced by browsers on the Canvas tag. The service uses a Google App Engine project to fetch the image and return it as a JSON formatted data URL.

I created the plug in and service so that anyone wishing to take images from somewhere like Flickr or Google Image Search can do so without having to bother to create a proxy or fiddle with the server.

David DeSandro's Close Pixelate (Pictured first) uses the Google App Engine service to enable it's users to process images from other domains. Another novel use of the plug in is on Pete Goodman's website; when the Konami Code is pressed, the whole website turns black and white including any images from other domains. Read more about it here.

Some of the common error codes that come up when trying to get an image from another domain are;

In Firefox:

Security error" code: "1000

In Chrome:

Uncaught Error: SECURITY_ERR: DOM Exception 18

And in Safari:

SECURITY_ERR: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

So, if you have ever come across one of these errors, then have a look at the documentation for $.getImageData which includes information on how to use the jQuery plug in and how to use the Google App Engine service using no javascript library. There are also two basic examples, one of which gets images from Flickr and analyses them to get their average colour (pictured second).

The complete code is also on GitHub which includes example code for the server in PHP and Python in case you want to implement your own version of the server side program.