3

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.

2

3 Answers 3

4

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.

1
  • i'm selecting fudgey as the person to answer the question, but your explanation was very good +1
    – bmarti44
    Nov 30, 2011 at 20:30
0

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.

1
  • 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.
    – bmarti44
    Nov 30, 2011 at 20:29
0

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.