Hamburger

Grow KU Mosaic

Services

Code, Design

Completed

Mar. 24, 2014
Grow KU Mosaic

We wanted to get a little creative with our campaign this go-round. Something more of a stretch: an alternative to the typical fare of flyers and button deals and witty Facebook posts. And with budget limitations, a concept with viral potential was essential.

Step 1: Selection

Once authenticated, users are provided the option of using any of their 10 latest profile pictures or cover photos.

Grow KU Mosaic
Grow KU Mosaic

Pulling in those images and analyzing them as a dominant color takes a fair amount of time, so while the task is being run on the server, the campaign's platforms cycle through with the SVG animation that's featured on the homepage. This takes anywhere between 90 seconds and three minutes.

Step 2: Generation

phpmosaic forms the essential foundation for the script, analyzing the images for that dominant color value and then storing that value, along with the image itself, for later use when everything falls together.

Grow KU Mosaic
Grow KU Mosaic

However, this makes for a lousy rendition if you don't have a thousand images to sample from. A quick run through Imagemagick blends the overlay and the original image together before it crops over branding—a bar for tall images and a corner notice for square or wide ones.

Grow KU Mosaic
Grow KU Mosaic
Grow KU Mosaic

Step 3: Presentation

At the last page, both the original and the mosaic can be compared side-by-side. There's also the easy button to set the rendered mosaic as the user's newest prof or cover.

Grow KU Mosaic

Hovering over the mosaic turns the original into a zoomed frame for easy inspection of the images that form the composite

Promotion

Grow KU Mosaic
Grow KU Mosaic

All generated mosaics in one mosaic

Grow KU Mosaic

More Projects