Use the GUI to setup images and meshes. Then simply create new Morpher object using JSON code exported from GUI.
You can blend as many images as you like. Images don't need to have same dimensions.
When morphing multiple images
set
function expects an array of factors - one factor for each image.
Keep in mind that in typical approach these factors should sum to 1.
If you exceed this number, you get oversized, overexposed image – this can be useful to create a bouncing effect.
You can use one of the jQuery UI easing functions or pass your own easing function.
You can define your own image blend rules. Use GUI to experiment with your own blend algorithms. There are two functions, that can be customized:
Blend function's goal is to mix two images.
It takes 3 arguments: destination canvas (on which the results should be drawn), source canvas (which holds image that should be drawn) and weight — number between 0 (don't draw) and 1 (completely cover destination canvas with this image).
Final touch function is called after all images are blended into morpher's canvas.
It takes one argument — the resulting canvas — and can modify it in any way you need.
If you wish, you can use MorpherJS API to define images and meshes instead of providing json configuration.