McDonald’s Monopoly 2013

Every year McDonald’s has a Monopoly-based campaign. I built the accompanying website in 2013.

Take a chance

This was a fun bit of engineering.

The website centred around the “take a chance” mechanic in Monopoly, where a player draws a card at random and some effect takes place. Depending on the card drawn (“second prize in a beauty contest”, “go to jail”, and so on) an image was generated featuring the user’s likeness (chosen from their Facebook photos). As part of choosing the image, the user lined up their photo according to a dotted line by panning, zooming, and rotating it. (While the design had just a dotted oval line for the face, I had the idea of including an extra dotted line for the character’s moustache, which went down really well.) The parameters of these transformations were sent to the server along with the image URL.

One type of generated image had the user’s face on Rich Uncle Pennybags’s body, behind bars, in jail. Another simulated the user’s face printed on some Monopoly money.

For all of these a task was queued and then one of multiple render nodes would pick it up and start work as soon as capacity allowed. The jobs involved getting the user’s image from S3, processing it according to the share image type. The processing involved cropping, resizing, and SRT transformations according to the user’s parameters, applying effects, and compositing the image with various masks and background and foreground layers. Most of this was done with Imagemagick.

The most complicated image type had the user’s face embossed on a gold medallion worn around the neck of a 3D-rendered leather-clad character. Here’s how this was achieved.

• Most of the scene was pre-rendered as a background layer.
• I analyzed the Photoshop file which composited the original render with some effects such as lens flares and colour correction, and reproduced this as some overlays which could be applied with Imagemagick.
• I then took the 3D scene file into Blender and isolated the gold medallion, and readied it for custom normal maps. This gave a new input file for the render node.
• From a flat photo such as those we were getting from the users, there’s no real way to produce a normal map, but one can be faked, such as with a Gimp plugin. I took this plugin and wrote a script for headless Gimp (Gimp scripts are written in Scheme!) to produce a fake normal map for the user’s image.
• This normal map was then taken into Blender via a Python Blender script (scripting Blender was a far more pleasant experience than scripting Gimp!), it was applied to the medallion, and then that portion of the scene was rendered, all headless.
• The various layers were then composited, masked, and blended via an Imagemagick script.

Once the share asset was ready, it was stored on S3 and the user could download or share it.

The campaign was popular, and the render nodes happily churned out thousands of images with minimal waiting time for the user. There was one mishap with a render node one day, and it’s a funny story I’ll tell you about over a beer some time if you ask.