IDEA

Working with MRM Meteorite To promote Wyevale garden centre’s with a Christmas campaign that would let users take a picture of themselves and wrap it around a Christmas bauble. They would then be entered into a competition to win an actual printed bauble as well as receiving vouchers for entering.

CHALLENGES

The image would be captured from the users, webcam or camera on mobile devices or uploaded. The image would need to be resized to a lower resolution in order to make it easy to manipulate as well as being stored on the cloud for later retrieval and sharing over social media. All interactions with the image would need to work across multiple devices and multiple resolutions.

SOLUTION

The main site was built by the in house developers leaving myself to concentrate on the image manipulation side of the site. The main bulk of the work was achieved with PIXI.js. This javascript library was used to deal with loading the image and allowing the user to manipulate its position / scale and rotation. By adding a Bulge plugin to the library I was able to achieve the spherical mapping needed to make it look as if it was wrapped around the sphere. Then using overlays of multiple images the final image was placed to make it look as if it was wrapped on the bauble.

TECHNOLOGIES USED

PIXI.JS / JQuery / Twitter Facebook Sharing API / CSS / HTML / SASS

RESULT

The project was launched at the end of November and appeared on the homepage of the Wyevale garden centre website. The site was available across all mobile/tablet devices as well as desktop.

CLICK HERE to view live version of this project