Examples

Styled Example

For a full working example demonstration with styling, just browse to:

http://mymymakeup.anthropics.com:8082/mockup/lipstick_range/
and
http://mymymakeup.anthropics.com:8082/mockup/urban_decay_eyeshadow/

You can upload a photo and play with some makeup, but the rest of the site is not implemented. The lipstick example is not fadeable because a single application of lipstick is usually all you need, whereas the eyeshadow is fadeable by adjusting the slider because eyeshadow can be blended.

Simple Example

Browse to http://mymymakeup.anthropics.com:8082/simple/lipstick.php

It implements the same functionality as the styled example, but simplified. Take a look at simple/lipstick.php. You can use this as a template to implement a lipstick try-on, yourself.

The setup is done in the onLoad() function. product-img is a default image that is shown before the user uploads a face (e.g. the product packaging and/or instructions). The init() function takes an object with properties, which are as follows:

n_images: The amount of images to blend between. Set to 2 to blend between makeup and 1 to just display one unblended makeup image.

base_presets: Products that are always applied independently of products picked by the user. For instance, you may want to always apply foundation to the face when users are picking lipsticks.

default_products: The products applied by default when loading the page.

Software Flow

The "Upload Photo: To Try on" button is found in simple_section.html. When the user presses the button, they can choose an image and it is resized to 1000 pixels high (currently) to avoid the delay in sending unnecessarily large pictures to the server. The resized image is sent to the server, facial features are automatically found, and the default product is applied.

Buttons to swtich between products are automatically found by mymy-makeup.js when they have the style mymy-swatch. Whenever they are pressed, it automatically calls switch_product() and applies the product with an id taken from the button's name. You can also call switch_product() from javascript yourself.