MU Puzzle explorer for Gödel, Escher, Bach

Having started reading Gödel, Escher, Bach: An Eternal Golden Braid, I decided to create an “explorer” for the MU puzzle described in chapter one. This is constructed using arbor.js – just click a node to perform all four transformation rules on it, and you will start to see the pattern of the graph.

Open the MU puzzle explorer

From Wikipedia:

Suppose there are the symbols M, I, and U which can be combined to produce strings of symbols called “words”. The MU puzzle asks one to start with the “axiomatic” word MI and transform it into the word MU using in each step one of the following transformation rules:

1. Add a U to the end of any string ending in I. For example: MI to MIU.
2. Double any string after the M (that is, change Mx, to Mxx). For example: MIU to MIUIU.
3. Replace any III with a U. For example: MUIIIU to MUUU.
4. Remove any UU. For example: MUUU to MU.

Using these four rules is it possible to change MI into MU in a finite number of steps?

One important flaw in my implementation is that for 3rd and 4th rules we parse the string left to right only. This limits the number of permutations created via these rules, but it doesn’t dramatically affect the result. This flaw was larger than I’d thought, but is corrected now.

Only tested in Chrome – probably will not work in IE.

See comments on reddit, find the source code on github.

Posted in Lab | Tagged , , , , , | Comments Off

Kiss – The Chosen One sponsored by Blackberry

Posted in Web Development | Comments Off

The Ascent of Money by Niall Ferguson

I was given this book last year by a good friend of mine but only just got around to reading it. Both interesting as a history book and instructive about modern finance (naturally, the nature of the modern world cannot be fully explained without a historical setup), this book manages to cram a huge amount of content into less than 400 pages. Interesting topics for me included:

  • the creation of bonds and the role of central banks
  • poor availability of credit to the Confederates, and the effects for the American Civil War
  • colonisation in Argentina, and the subsequent decline
  • Amsterdam and the VOC (this extended section made me want to make another visit with the new-found historical context)
  • the Enron debacle
  • the development of insurance (focusing on Scottish Widows) and the welfare state (focusing on Britain more generally)
  • futures, forwards and options: what they are and how they differ
  • what subprime mortgages are, and why they came to exist
  • the financial roots and effects of World War I
  • George Soros and the European Exchange Rate Mechanism
  • the strange relationship between China and the US
  • human loss aversion and how this warps our vision (great article on this topic)

Economics isn’t my main topic of study, but learning more is made so much easier by excellent overview texts such as this.

Find on Amazon

Posted in Blog | Tagged , , , , , | Comments Off

Generative Art in Processing: GravWell Test #7

(See in higher-def on the Vimeo page.)

A couple of weeks ago I decided to fire up Processing again, and rediscovered a test I made a few years ago. I made a few updates, including having a zoomable/pannable camera, and came up with this test video - 7577 frames, rendered in 20 hours.

There is no sound. I’d be really interested in working with someone to provide generative sound/music. Each frame produces a ton of variables, (position/velocity of particles, direction and zoom level of the camera, plus the deltas for all of these), so it should be plenty to go on in terms of syncing sound to the graphics. Be in touch if you have any ideas here. :)

Posted in Lab | Tagged , , , | Comments Off

Kurt Geiger “Everything But the Dress”

See more images on designer Graham Zagoria’s portfolio.

The premise of this project was relatively simple and effective – user drags clothing and accessories onto model (after browsing some options), receives form. Fairly tight deadline so I chose to use jQuery UI with the Drag/Drop plug-in. What I didn’t expect was the problems created by wanting separate lift and drop zones, with the ability to scroll in the lift zone before dragging. Poor performance and hard-to-debug errors on IE8 led me to the solution documented here.

This was the point where I felt I’d achieved a strong understanding of JavaScript, jQuery as an abstraction layer, and their relationship with the DOM.

Posted in Best Of, Web Development | Tagged , , , , , | Comments Off

“Festival Proof” Motorola Defy

Campaign to promote the hardiness of the new Motorola Defy. This being summer, the content was centered around festivals, and to this end included a calendar of events with two “details” pages. One for pre-event details featuring a map, information and further copy. The second was for post-event information and included photographs and a longer piece of copy discussing what happened.

Posted in Web Development | Tagged , , , , , , , , | Comments Off


A campaign to celebrate 25 years of Q magazine. Users were asked to reorder 25 iconic covers (which essentially represented music artists, since there is always one most prominent) using a drag-and-drop mechanism, and also given the option to specify their own artist selection (up to an extra 3), with the results being saved with their competition entry. Competition prizes included access to private, secret gigs, and the experience of being a Q guest reporter.

After a period of time, the results were tallied and a winning artist annouced.

Posted in Best Of, Web Development | Tagged , , , , | Comments Off

McDonald’s – McFlurry “Nice Cream Van Summer Tour”

Interesting mechanic on this McDonald’s promotion, hosted and produced by Bauer. A “Nice Cream Van” (get it!?) can be seen at scheduled times on banner ads around the web, both on and off of various Bauer properties. Users were encouraged to find the schedule on the McDonald’s Facebook page, head to the correct destination on the web, then click the banner to be sent back to the microsite seen above to claim their prize. Prizes were most frequently downloadable content, but some merchandise (frizbees etc.) was also available.

To verify that a user had correctly found the van, the flash banner ad would send a request to our server for a unique token (a GUID). Razorfish were the agency creating the banners, so it was necessary to liaise with them to confirm the implementation details.

Posted in Web Development | Tagged , , , , , , , , | Comments Off

Kiss Academy 2011

Kiss Academy gives fans of Kiss the opportunity to learn more about the work done by Kiss through workshops and advice from recognised mentors. Entrants are required to select which workshops they’d like to be involved in, then write about why they’re the most suitable choice.

The development consisted primarily of an entry form with some JavaScript customisation and a second, smaller entry form. Additionally, the project required a custom Twitter feed, the implementation of which required building a server-side component to retrieve and format the data.

A post with more technical information about the Twitter component is forthcoming. This was written over a year ago with the best of intentions, but time makes fools of us all. There are many sources of information about this topic online.

Posted in Web Development | Tagged , , , , , | Comments Off

Using ASP.NET to read the Facebook signed_request object passed to iframe tabs

Facebook recently announced that they are phasing out FMBL in favour of iframe tabs for pages. This article discusses how to extract information from the signed_request parameter passed into the iframe using Json.NET LINQ to JSON.
Continue reading

Posted in Blog | Tagged , , , , | Comments Off

ITV2 – Feed The Need

For this project the client asked that we recreate the functionality of the website – two items (from a pool) are displayed side by side and the user is asked to select their preference. The user is then shown two new items and the process is repeated. These votes are used to produce charts of the various items. After completing a small number of votes the user is given the option to complete a form for the chance to win a prize.

The results of these charts were exposed as an xml feed used to populate banner ads and such.

Posted in Web Development | Tagged , , , , , , , | Comments Off


Campaign on Heat (Heatworld) to promote the DVD boxset of the second season of Glee. Consisted of a multiple page quiz, also featured a CMS allowing the client to change the questions on a week by week basis.

One somewhat unique feature of this project was that at the final page the user is given the option to download a certificate to show they’ve passed their “GleeCSEs”. In fact this was implemented using automatic PDF generation on the server using PDFsharp.

Posted in Web Development | Tagged , , , , , | Comments Off

MotorStorm: Apocalypse

A simple promotion for Sony. Successful applicants were invited to an event in London hosted by Sony, in which they played the new game in a custom arena consisting of a caged area with fire breathers, dog handlers and general mayhem. Sony also took advantage of the event to showcase other upcoming PlayStation 3 content.

The release was complicated substantially by the decision to delay the game due to the 2011 Japanese earthquake.

Posted in Web Development | Tagged , , , , , , | Comments Off

Very with Heat

This project was essentially a blog (content prepared by heat magazine) in which each entry featured a themed gallery, a forum (which featured live events where heat “style experts” would log in and answer questions and contribute to the discussion) and a series of user competitions.

Posted in Web Development | Tagged , , , , , | Comments Off

Triumph on Grazia

Promotion for the Triumph lingerie brand on Grazia. Designers from multiple countries submitted designs for esoteric lingerie, which Grazia users then voted on.

Posted in Best Of, Web Development | Tagged , , , | Comments Off

Predators movie promotion for FHM

Completed in July 2010, this was extremely ambitious project. A film crew produced a bespoke video of an unknown figure running through woods, including jump cuts, heat-tracking camera views to give the impression of a chase. Interspersed with this were clips of an ID card and other paperwork being found and inspected by the pursuer.

On entering the microsite, the user is asked to upload a photo, and to provide some details about themselves (this being an FHM promotion the content was tongue in cheek – “Clevage Ogler” is given as a special skill option.) Once the fields are completed the user is shown a unique-to-them video featuring the content they just supplied – the ID card shown has their face and name, the dossier discovered has their selected skills etc. The custom content blends with the video as it is an additional transparent layer, and uses AS3 filters and embedded fonts to give the impression of a single, produced film.

The competition element involved a leaderboard based around views, with the winner being taken on a survival and weapons training course.

Posted in Best Of, Web Development | Tagged , , , , , , , , , , | Comments Off

Stan James

To tie-in with the 2010 World Cup, Stan James requested that we produce a multiple choice quiz, with a different question for each day of the competition. The app needed to keep track of users’ progress. This data was then passed to Stan James over a web service. For each day where the user correctly answered a question, they received £5 of credit on a Stan James gaming account associated with the email address used to site up for the microsite.

Posted in Best Of, Web Development | Tagged , , , , , , , , , | Comments Off

Knight and Day

Two campaigns, one simple competition running across 10 stations on the then-called Big City Network, the other a more involved, custom built campaign for Kiss FM.

Keeping with the theme of the film, users were asked to “track” an agent through London. Essentially this was a street-team member with a placard, who would stop at various locations and give clues. After moving on, the previous location was added to a map on the website, along with the clue given. Once at the final destination, competitors were required to speak to the agent, give the final answer (derived from the clues), and claim their prize.

Posted in Best Of, Web Development | Tagged , , , , , , | Comments Off

Nokia X6

Website for Nokia to promote their X6 model. Produced in PHP/MySQL and hosted by BPulse, this campaign ran across multiple Bauer brands, with the content (updated weekly) remaining largely the same, just differences in presentation depending on the brand. A custom CMS was created to facilitate this.

Posted in Web Development | Tagged , , , , , , , , , , | Comments Off

“Get Close”: Gillette Venus 2010

A multi-feature website for Gillette. This was essentially a reprisal of their 2009 campaign, but with several larger components including:

  • Cinema ticket booking: users could browse cinemas and films, then make a selection. After this their details were recorded, and they were sent a “ticket” by email, to be redeemed at the selected cinema.
  • Multiple choice quiz (updated via CMS)
  • “Beauty tips” videos with flash-driven concertina navigation
  • The “Leg Match” game from 2009
Posted in Best Of, Web Development | Tagged , , , , , , | Comments Off