Morphing through > 2 images without screen flash?

[donundeen]

hi, I created this code: https://github.com/donundeen/art_image_morpher

which continuously morphs through an almost endless list of images, using facetracking to create the mesh triangles.

It's pretty cool, and you can see it in action here: http://66.175.215.36/art_image_morpher/

however, you'll notice between finishing one animation, and starting the next, there's a bit of a flash. I'd like to eliminate that, so the transitions are smoother.

Do you have any idea how that might be accomplished?

Thanks!

[donundeen]

update: by calling morpher.fromJSON(json) instead of

morpher = new Morpher(json) $("#morpherHere").html(morpher.canvas)

I can get the transitions without the flashing.

However, now I sometimes get the image resizing before the morph. Because my images are not all the same size.

Previously. with the flashing (re-instantiating morpher each time), this never happened.

I'm guessing that by calling fromJSON the way I did, I've short-cutted some necessary bit of code that sets up source and destination images correctly.

Any ideas?

Thanks!

[jembezmamy]

Could you isolate these problems in something like jsfiddle.net so I could experiment with them easily?

My blind guess is that in both cases the problem lies in preloading images. In case 1 it flickers, because images aren't loaded yet. In case 2 dimensions are applied to canvas before new images are rendered.

You could try creating new Morpher instance for each transition and destroy the previous one after the next one is fully loaded. So it would be the same tactic you would use to create image slideshow with fade animations.

[donundeen]

Hi, I've fixed these problems in most cases by standardizing the width. Have a new problem now, which I'll create a new issue for. btw, loving this tool, created this with it: http://66.175.215.36/art_object_morpher/