I finally decided to learn Python after hearing good things for years. After a day getting started and playing around with the language I spent another day building a breakable toy app.
The language itself is easy to pick up and produces pleasingly minimal, readable source code. Being dynamically typed I did have to rely quite heavily on both reference docs and runtime errors! I used pydev in Eclipse as an IDE, so was easy to get up and running. App Engine seemed an easy noob option for testing and deploying.
The resulting app is in the iFrame above or here magicmusicplayer.appspot.com with source on github.
Posted By }i{ on December 21, 2011
I really enjoyed working on this with a tight team including fellow dev, the awesome Phil Bulley. It was a big challenge, especially in terms of optimisation as the technique required to swap the videos perfectly was so expensive (basically sneakily achieved by baking several videos into one large canvas and scrollRecting it). Anyway through sheer determination and hard work we got there in the end. Unusually I also did some of the sound design on this project as well as the coding, selecting what to use and where from a library of loops.
I think the film is really beautiful. It was directed by Stinkdigital’s Marco Brambilla, who also did the ‘Power’ video for Kanye West.
www.youtube.com/hugobosstv
FWA SOTD November 16 2011
Posted By }i{ on August 13, 2011
This is an interactive film trailer for the BBC’s One Life film. Users can drag up at any time during the trailer to get additional content related to the shot currently on screen. Dragging down accesses global content such as audience reactions and interviews.
www.one-life.com
FWA SOTD September 12 2011
Commarts Webpick of the Week
The UI is enriched by sampling the colours from the video. I used BitmapData.merge to gradually step through the colour changes, creating a smooth, fluid effect. Here’s the code:
private var _multiplier:uint = 32;
public function set videoFrame(bitmapData: BitmapData): void { bitmapData.lock();
bitmapData.applyFilter(bitmapData, _rect, _point, _colorMatrixFilter); // saturation and contrast
bitmapData.applyFilter(bitmapData, _rect, _point, _blurFilter);
_bitmapData.merge(bitmapData, _rect, _point, _multiplier, _multiplier, _multiplier, 0);
bitmapData.unlock();
}
Posted By }i{ on July 29, 2011
I had a lot of fun making something frivolous for family day at the Digital Shoreditch festival with colleagues Thomas and Margaux.
We made an installation where one participant could pump anothers head up into a big balloon! Watch the case study below to see what I mean:
Digital Shoreditch from Stinkdigital on Vimeo.
We experimented with the Kinect sensor using open source drivers, but they proved to be quite unstable at the time. In the end we did something fairly simple using a displacement map and motion detection.
Here’s the (messy) code on if you’d like to see how we did it:
Posted By }i{ on May 30, 2011
This was an exciting and challenging project. I was lead developer and was also heavily involved in the creative and technical planning.
To bring the island to life we made a mock Streetview interface using Away3d and integrated the site very tightly with Facebook to allow users to become citizens. Connected users could find a home, contribute laws, create national holidays, write a line of the national anthem, gain social status and even become the president for a day, taking over Diesel’s Twitter account.
For musical accompaniment we made a ‘pirate radio’ that plays, as if by magic, (almost) anything you request. I did this by sneakily connecting to the YouTube API, searching the music category and playing back the audio without showing the video. This came from an earlier experiment of mine and it was great to get it used in a project.
Archived version of site
Case study video on Vimeo
Awards:
FWA SOTD April 27 2011
Bronze Cannes Cyber Lions
Posted By }i{ on March 30, 2011
Highs for me this year were working on my first Nike project; including supervising on the shoot which took place largely at Arsenal FC, the FWA SOTM award for Lexus Dark Ride; a project I am very proud of in terms of technical execution, and receiving a D&AD nomination which felt amazing being so close to my dream of winning a pencil one day.
It was an intense year at Stink Digital but overall an intensely enjoyable one! It was also a year where we went from being a few nerds in a room to having a full team truly capable of multi-tasking and taking on really anything we dare to. When I think back I find it hard to believe how much we crammed in.
We’ve delivered major interactive projects for the likes of Diesel, Lexus, Nike, Gucci*, Ikea, Axe and Wrangler*. We won another 4 FWA SOTD’s and our first FWA SOTM, as well as Webby, One Show, BIMA and Eurobest awards and a D&AD nomination. We worked with agencies such as Anomaly, W+K, Mother, BBH and Santo to name but a few. Plus, we end the year stuck into projects for Diesel and Wrangler which have the potential to be our best work yet.
Bring on 2011!
* yet to be released
Posted By }i{ on December 29, 2010
This is a hugely ambitious project that represents an attempt to forge a new direction in car advertising and, as we’ve done on many previous projects at Stink Digital, explore new ways of bringing film to the web. The result is a 12 minute interactive film in which the user participates. After submitting themselves to a mysterious ‘interview’ at the start of the journey, the user then sees their image and hears their voice as part of the film as they ride shotgun alongside the protagonist, played by the up-and-coming actor Norman Reedus.
Technically we had a few challenges, not least having a lot of HD video to buffer and sequence, with the routes the user could take pre-buffered in time to keep the experience seamless on a decent connection. It took some experimentation to find the sweet spot of balancing highest video quality possible and performance and we made a nice queuing system to buffer the videos for the choices the user could potentially make and closing streams no longer needed.
For the interview sequence at the start, we were tasked with having as few clicks as possible. We managed to largely automate the process with face-detection for the picture, video prompts and countdowns. We achieved the recording of the user’s lines with the help of two great open source projects: Red5 for capturing the microphone and saving to the server and FFmpeg to normalise the levels and convert to Mp3.
For me, hearing your voice played back in context within the film was probably the most novel and fun part of the experience. I was also pleased with how we managed to integrate the decision points into the film, with a good-looking typographical approach and motion tracking video movements. Overall pretty proud of this one and extra pleased when it got the FWA ‘Site of the month’ for May, another first for Stink Digital and for me personally too.
www.lexusdarkride.com
www.thefwa.com/site/lexus-dark-ride
Posted By }i{ on August 31, 2010
The combination of cats and competition was sure to be a www winner. We filmed a clutter of cats prowling around Ikea in Wembley. The interactivity was simple and engaging: Choose the product you want to win and the cat that might gravitate to it. If you guessed right you won the product.
The site was a roaring success generating tonnes of traffic in a very short space of time. We even got blocked by Facebook for a brief period because the site was generating so many shares (none automatic) their systems thought it was a spam app. Technically speaking this was quite a straightforward project but fun nonetheless.
cats.archive.stinkdigital.com
FWA SOTD November 18 2010
www.thefwa.com/site/happy-inside
Cannes Cyber Lions Bronze in Websites and Microsites category
www.canneslions.com/work/cyber/entry.cfm?entryid=6897&award=4
Case study film:
Ikea – Cats – Case Study from Stinkdigital on Vimeo.
Posted By }i{ on August 30, 2010
This was an exciting and challenging project to work on. To make it happen we worked with agencies W+K and AKQA, motion graphics experts Mainframe, developers Lifelike, and 3D avatar service Digimi.
Essentially, the user can upload an image or use their web cam to transform them self into a footballer and see a film chronicling their rise, fall and eventual triumph.
We shot new scenes, including with some Arsenal stars, created motion graphics sequences and reused some shots from the TVC to construct the film. We then motion tracked all the scenes in order to map the user’s face and name onto the film. Users who connected with Facebook also saw their friends at certain points.
The Digimi service creates a 3D avatar from the user’s photo. This is what made it possible to apply different textures and morphs to the user’s image so we were able to make them look sad, happy or even like a statue. We built a small app that worked with the Digimi API in order to get the right expressions, angles and lighting effects for each scene.
Eyal from Digimi posted a video showing the user journey and resulting film:
http://www.youtube.com/watch?v=uiq02wyt0Hk
FWA SOTD July 28th 2010
Posted By }i{ on July 30, 2010
To my delight the work we’ve done at Stink Digital continues to be recognised within the industry this year.
This article from Shots places both Carousel (aka Philips Cinema 21:9) and A hundred lovers for Diesel in their top 20 digital campaigns.
Meanwhile Carousel was a Webby Awards winner. It also picked up Gold and Silver at the One Show Interactive awards. And if that wasn’t enough, it got nominated at the 2010 D&AD awards, although sadly no pencil this time.
Posted By }i{ on June 16, 2010
Well I’ve been inexcusably slack in posting updates this year. Apologies to my readers. Both of you.
Anyway, backtracking a bit, the first big project I completed this year was an interactive film showcasing Diesel’s 2010 Summer collection.
A homage to Goddard’s 1964 film ‘Bande à part’, we shot the video in an uber cool East London pub and used an editing technique known as match-cut to squeeze the many participants adorned in Diesel’s collection into the 3 minute film.
Dubbed ‘A hundred lovers’ after the excellent song by new artist Josef Xorto, the piece took the form of a music video. The result was entertaining and somewhat charming.
The big twist from a technical and usability point of view is that you can roll over the video at any point which pauses it and shows hot spots for each garment and participant in that particular frame.
From there you can find out about participants and follow their social links, or discover what garments they are wearing and follow links to buy them on Diesel’s store.
To achieve this we first built an app, in Flash, to enable placing hot spots on the frames of the film and linking them up to the right data.
In order to be able to seek to any frame, skipping through to each look we went with Akamai real time streaming for delivery of the video.
We had to ensure we had highly optimised ActionScript to process all the hot spots for each frame. Instance reuse via an object pool was a key part of this, along with massively compressed JSON for the huge data set.
The hard work has been rewarded by great feedback from the public, which is still going strong on Twitter, the industry press and the FWA Site of the Day award for 15th April.
www.diesel.com/ahundredlovers
www.thefwa.com/site/a-hunrdred-lovers
Case study film:
Diesel – A Hundred Lovers – Case Study from Stinkdigital on Vimeo.
Posted By }i{ on June 14, 2010
This is a potentially annoying error that occurs in Safari/Chrome when you hit refresh or close a tab containing Flash content. If you have the debug player you see:
Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
It can crash Safari or, in the case of Chrome, show a ‘broken plugin’ screen, shutting down every instance of Flash Player in the process.
Fortunately the fix is easy. To handle it you must add an IOErrorEvent listener to every Loader instance in your project, including the ‘root’ Loader (i.e. the class that is the base of your main SWF).
To handle the main SWF simply add the following code to your base class. In ‘onIOError’ you can handle the error silently should you wish.
root.loaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
Posted By }i{ on June 14, 2010
