Examples

Styled Example

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

https://mymymakeup.anthropics.com/mockup/lipstick_range/
and
https://mymymakeup.anthropics.com/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 https://mymymakeup.anthropics.com/simple/lipstick.html

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 window.onLoad() function. The MyMy() function is called on the container element and takes an object with properties as described in the API.

Software Flow

When the user presses the "Upload Photo: To Try On" 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 class '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.