Customer Hub For Partners Developer Playground

Content & Commerce

Discover the latest thoughts from the Amplience team and partners about Retail Engagement.

How to create 200 million unique Pokémon balls

November 10th, 2016

Can you imagine producing over 200 million images to sell one product? Well, that is precisely the problem many retailers are facing. As Amazon continues its domination of ecommerce and encroaches into more and more categories, finding ways to differentiate the customer experience and offers has never been more important.

Customization and personalization of products is one strategy that not only provides real differentiation from marketplaces but increases margins and reduces returns. There are three high-level areas to consider with product customization: logistics (e.g manufacturing), transaction (ecommerce integration), and merchandising (visualization). In this post I will focus on how you can overcome the challenges of visualizing a customizable product that could be configured to have millions of variations. Why is this important? If your customers can’t see what they are buying, they are much less likely to buy in the first place, and more likely to return the product if they do buy. Remember that in ecommerce, customers are effectively paying for an image.

Although I have many examples for visualizing the configuration of custom products such as furniture, room sets, apparel, and accessories, I thought Pokémon a bit more fun. I will show you how you can take a simple Pokémon ball and create hundreds of millions of custom configurations that can be personalized with messages and names.

See the Pokémon ball bulder /configurator here http://jw.demo.amplience.com/monogram/pokemon.php

Pokeball-builder

Let’s first start with the concept

Pokeball-concept

Features

Example configurations

Pokeball-examples This configuration provides over 20 million ball variants when you consider just the 4×64 color combinations when you add the Pokemon images, decorations you soon approach the 100s of millions variants, and if you personalize each one with two text fields, the number of combinations goes up even further.

Approach

With this many variations, generating customizations is fun and engaging but does mean for the experience to work you need a dynamic way to quickly assembly each customization. I’m going to use the Amplience Dynamic Imaging system as the method to generate the Pokéball variations as it can simply generate images for any ball configuration using a URL with parameters to set each variation.

To make this work I’m using SVG (Scalable Vector Graphics) as an image template for the Pokéball and Amplience to dynamically drive the template settings from parameters passed on the Pokéball image URL. I would also recommend using Inkscape to create your SVGs – Inkscape is an Open Source graphical SVG editor.

Example: SVG-editor

Pokéball SVG Template

Using SVG we will build the Pokéball using of series of layers which apply effects and add content representing the configuration parameters passed into the Amplience imaging template. SVG-template

Colorization

The first effects we are going to apply is to colorize the top and bottom of the ball. Although in SVG you can represent a globe using circles and gradient, I have gone for colorizing a photograph of metal ball to get a realistic and high quality final output. To colorize an image in SVG use a filter (filters are custom effects that can be built by developers and applied to SVG elements) – I adapted the one that is supplied with Inkscape. Colorization To set this up I first converted my photograph of the metal ball into a greyscale image as the colorization filter uses the greyscale values to calculate the RGB value. I then cut the ball it in two and saved the top and bottom halfs as separate images, each with its own colorization filter. Colorization-filter

Ball Decoration

The decoration is the effect that applies an image to the top half of the ball. This could be a transparent motif or an opaque image like a country flag. As we don’t want to spend huge amounts of time producing decorations that are designed specifically for a ball shape we will use an SVG filter which applies a displacement map to make it appear spherical. A displacement map is an image which uses Red and Green as values to distort an image on its X and Y axis. Displacement-map

Adding Content

In this layer we will add the band around the ball that separates the colorized halves of the ball, the Pokémon image in the center and the text on the band.

We will draw the band using standard SVG paths and use the drawings fill parameter to customize the background color.

Pokeball-bands

Once the band is in place we can add the text placeholders. To make the text look like it is wrapping around the ball we’ll first create two curved paths in SVG and then add the text fields to the path. The color and values of these text fields with be set dynamically by Amplience from values passed in the image URL.

Text-paths

Now for the final piece of content – the Pokémon image in the center circle of the ball. As the Pokémon images we will use will have different aspect ratios and they will certainly not be round, we will apply a round clipping path in SVG to the image before we place it in the center. Now we can place any Pokémon image into this placeholder using Amplience. Clipping-path

Monochrome and masking

At this point we have all of the configurable effects in place but before we finish there are a couple more treatments we need to do make the finished product look more realistic. The first effect is to put more depth by adding shading to the image that gets washed out during colorization. To do this we apply a monochrome filter to the image using the greyscale image of the ball to define the level of shading. Monochrome-filter

The final effect to apply is the mask. I use the mask to tidy up the image, apply some further highlights and to place a shadow. Place-shadow Now for some wizardry

Once the SVG of the Pokémon ball is ready we add the additional metadata to the SVG that Amplience can use as parameters to apply the effects dynamically (i.e. change the top ball color, bottom ball color, text and Pokemon Image automatically). In Amplience this SVG metadata is termed as substitution rules. For more details see: http://playground.amplience.com/personalization/#/intro.

Now we simply upload the SVG into Amplience, publish it to the imaging service and now we have the ability to generate 100s of millions of possible Pokémon Ball configurations on the fly.

Example configurations

Example-configurations

URLs for the examples above

http://x1.adis.ws/v1/media/graphics/i/ampevalmaster/pokeball?pattern=transparent_1x1&topcolor=%23ffd966&name1=So%20Many&name2=Choices&logo=mrmime&bottomcolor=%236fa8dc&bandcolor=%23073763&namecolor=%23ffffff&w=300

http://x1.adis.ws/v1/media/graphics/i/ampevalmaster/pokeball?pattern=pirate&topcolor=%23274e13&name1=Be&name2=Scared&logo=gastly&bottomcolor=%23274e13&bandcolor=%230c343d&namecolor=%23ffffff&w=300

http://x1.adis.ws/v1/media/graphics/i/ampevalmaster/pokeball?pattern=star&topcolor=%23ff0000&name1=Rising&name2=Star&logo=snorlax&bottomcolor=%23ff0000&bandcolor=%23ffe0e1&namecolor=%23cc0000&w=300

http://x1.adis.ws/v1/media/graphics/i/ampevalmaster/pokeball?pattern=usa&topcolor=%23ff0000&name1=Team&name2=America&logo=squirtle&bottomcolor=%23ff0000&bandcolor=%23ffffff&namecolor=%230000ff&w=300

http://x1.adis.ws/v1/media/graphics/i/ampevalmaster/pokeball?pattern=transparent_1x1&topcolor=%23ffe599&name1=Gold&name2=Fire&logo=charmanda&bottomcolor=%23ffe599&bandcolor=%23cccccc&namecolor=%23660000&w=300

http://x1.adis.ws/v1/media/graphics/i/ampevalmaster/pokeball?pattern=ultra&topcolor=%23ffe599&name1=Team&name2=Ultra&logo=charmanda&bottomcolor=%23ffffff&bandcolor=%23000000&namecolor=%23ffffff&w=300

Product detail pages

With this hugely powerful product image configurator the next step is standard web development that wires the product image URL with your product options. For this demo I built an example which comes with color pickers for all colorizations, Pokemon Images and 10 decorations.

As any product configuration is an image, it’s easy for me to share any product configuration I like – I have used the AddThis plugin to allow sharing to Facebook, Pinterest and email, allowing customers to share their personal product designs with their network.

Final Configurator PDP

Final-PDP See at http://jw.demo.amplience.com/monogram/pokemon.php

For more information on Dynamic Imaging and product configurators go to our Product Customization page.

John Williams, CTO, Amplience. Follow John on Twitter here or on LinkedIn here.

Back to top

Request a Demo

ic-body-success
e-mail

contact@amplience.com

ic-body-success
United States

Call toll free 866 623 5705
or +1 917 410 7189

ic-body-success
Europe

Call +44 (0)207 426 9990