jquery morphing image effect

Question

I'm pretty sure this is impossible, but. . .

I am trying to get a morphing effect (like on this page in the flash image rotator -> http://www.sikids.com) in jquery. Or at least an effect that is very similar. I saw that jquery UI had some morphing effects, but I haven't been able to find it. This is important to our client, so any effect that is as close as possible would be awesome.

Kory

Here's a demo of shape tweening in Raphael.js: zreference.com/shape-tween-with-raphael And here's another Raphael shape tweening demo: raphaeljs.com/animation.html – Stardom

I wonder if it would be possible to compile libmorph to JavaScript using Emscripten. :/ – Stardom

Answer 1

It's not impossible... but it might be slow.

You'll have to use canvas to grab the image data and transform it. Check out this SO answer and this plugin, which might help make things easier. I haven't used that plugin so in IE, you might have to include an additional canvas plugin.

Trussing

while Brett's answer gives a lot of insight into how to do it, I am going to go with your answer because I think it will be easier to use the plugins. – Kory

Answer 2

Another option that might be equally as slow, but would not require any canvases would be to write the pixelation algorithm using 1x1 pixel images.

The first step would be to reduce the image to a palette of 32 colors.

Then you would map the image to the palette at the start pixelation level. For example, if the image was 100px by 200px and the first level pixelation is a grid 50 by 100, replace the image with, 50x100 = 5000, <IMG> each with a background image from the color palette.

This would need to be done server side and passed as a javascript array that would then be converted to <IMG>:

image1 = [3, 4, 1, 2, ...];

Would become:

<div id="image1Pixelation">
  <img src="image1_3.png" width="2px" height="2px"/>
  <img src="image1_4.png" width="2px" height="2px"/>
  <img src="image1_1.png" width="2px" height="2px"/>
  <img src="image1_2.png" width="2px" height="2px"/>
  ...
</div>

Then in javascript enlarge some of the <IMG>, and reduce the grid by removing some of the <IMG>, until some stopping magnification is reached.

Then replace that with the new image on high magnification and reverse the algorithm for the new image.

Metalinguistic

i'm selecting fudgey as the person to answer the question, but your explanation was very good +1 – Kory

Answer 3

A JavaScript library called MorpherJS has been developed for this purpose - it's entirely client-side JavaScript. Some demos of MorpherJS can be found here. It uses the HTML canvas element to display morphing image animations.

Stardom