Greensock MorphSVG plugin (beta) is implementing the morphing algorithm wrong

[Emasoft]

As I can see from this video: https://www.youtube.com/watch?v=Uxa9sdaeyKM the Greensock MorphSVG plugin (beta) is implementing the morphing algorithm wrong. If you interpolate the curves only, it will give rise to unwanted intersections and produce an unintuitive tween, especially for closed shapes. At the moment the plugin produces ugly self-intersections during the tween morphing animations. A correct approach is to find a correspondence between the interiors of the shapes and interpolate that. If you consider the two shapes as piecewise linear, you can triangulate both and find a correspondence b/w the triangles and eventually interpolate the triangles. You can add points at close intervals on the curve to make it 'almost' piecewise linear. The you do the same with the destination curve, until both origin and destination have the same number of points. Then any standard triangulation algorithm can be applied to the enhanced set of points. For best results you can use “Constrained Delaunay Triangulation”, or “Sorted Ear Clipping” (details can be found here: http://www.cosy.sbg.ac.at/~held/projects/triang/triang.html and here: http://www.geom.uiuc.edu/~samuelp/del_project.html ). The latter is faster and easier to implement. An example of triangulation implementation can be seen here: https://github.com/mattdesl/svg-mesh-3d and here: https://github.com/mattdesl/svg-path-contours . Once you have the triangulated curve, then you need to choose the best possible triangle (the one whose angles are not differing much) at each step to interpolate between the points. A good paper on the subject is this: “Intersection-Free Morphing of Planar Graphs” ( http://ftp.cs.arizona.edu/~kobourov/gmorph.pdf ). Another paper, more advanced algorithm because it can morph even self-overlapping curves, is this one: “Tweening Boundary Curves of Non-simple Immersions of a Disk” ( http://www.ics.uci.edu/~gopi/SamplePubs/Tweening.pdf ). Here are some videos of the latter morphing algorithm at work: http://youtu.be/EHBdTD5EA6M http://youtu.be/0DDC3fbwtIw If you decide to do morphing, please do it correctly. Thanks!

[mikemjharris]

Thanks for the comments. I'll add the papers to my reading list.

While intellectual accuracy is very high up on the list of priorities there are many other aspects such as speed of getting features out and speed in the browser. Jack and his team are overwhelmed with features but do an amazing job of getting out new features very quickly that work in the majority of cases. Over time the great community provides feedback and bug reports so that the process can be implemented bettter. As a web developer I would much prefer a feature I can use now that works in the majority of cases than one in six months that satisfies some obscure edge cases. Have beta tested the MorphSVG feature and it worked exceptionally well for everything I needed. While the implementation may not match your academic papers it is quick and was also easy to give feedback to the greensock team. There are additional flags/inputs which actually cover most of the issues you list above - while not as pure as your suggestions they do work and are available now.

I see that you also asked another animation library to implement the greesock morphsvg feature. They mentioned that their project is open source. If you do want to improve the community maybe helping jack or anyone else you want with the code rather than listing academic papers would be more helpful.

Greensock have a long list of features and bugs to get through. They balance speed or release and accuracy exceptionally well and I think have the backing of the community. They have reached out to some impressive names in the svg world who have all given feedback and support for the svg morph. It is beta and I am sure will improve over time.

p.s. Would suggest reading the lean startup by eric ries to understand the iterative improvement process of software development.

[jackdoyle]

Very kind of you to chime in, Mike. You echoed my sentiments almost exactly. Warmed my heart :)

Emasoft, I really appreciate your passion for getting this morphing thing "right". I'm not sure the methods you're prescribing are ideal, though. Some solutions are really impressive academically/theoretically but in practical reality they just aren't very feasible or intuitive. We place a high priority on performance and it looked like the "Constrained Delaunay Triangulation" would be exponentially more expensive processing-wise and probably file size-wise too. I'm just not sure it's worth the high price, especially because:

1) We already implement an algorithm that seems to do a decent job of avoiding ugly overlaps (though not always)

2) We provide a "shapeIndex" property that gives you control of where the points map so that you can manually override things if the morphing looks weird or generates overlaps that you don't like.

3) Most people would rather have smooth animation with an occasional brief overlap than a janky animation that avoids them by contorting in different ways with a fancier algorithm.

The examples you linked to, while very impressive, gave wildly different morphs than I would have intuitively expected. The in-between shapes might be considered desirable by some...or really weird even though they technically didn't have any overlaps. I'm just not sure it's fair to call our method "wrong".

I think it left a bit of a sour taste in my mouth when you went on such a rampage posting on so many social media outlets, github, our own forums, etc. and tweeted to other fans of ours that we're doing it "wrong" and then went to another open source library author, insulted our work and asked them to copy what we're doing (but in the "right" way).

We are only hearing rave reviews of MorphSVGPlugin thus far from the people who have tried it. But if we start hearing a lot of complaints about things looking wrong/weird/undesirable, we'll certainly try to resolve that somehow and perhaps the triangulation stuff would be the only decent option but I'm still pretty concerned about the CPU and file size price.

Thanks again for so passionately pushing for improvements in our work. I really do appreciate it when people offer ideas for making our tools better.

[JonDum]

I think it left a bit of a sour taste in my mouth

@Emasoft Damn son, that's like the meanest thing I've ever heard Jack say! You really gone done messed up now!

No, but seriously.

If you decide to do morphing, please do it correctly.

Jack is too nice to call you out on it, but I will: Your tone is snobbish with a hint of superiority complex. I don't at all get the impression that you actually want to contribute or improve the code from a stance of humble collaboration—only that you intended to show off how smart you think you are.

You catch more flies with honey than with vinegar.

[Emasoft]

I apologize. I was not trying to insult your work. I was just upset because too often academic research is ignored by developers. I feel like there is a fracture, a barrier between the academic world and the developers world. All that hard academic work is made by researchers to improve things and help developers, yet at times it seems pointless because nobody reads it. Brilliant solutions found years ago are often ignored, suggestions for solving problems are not followed by anyone because no one ever care to read about them, breakthroughs made after years of costly research lie overlooked in technical publications while developers struggle to reinvent the wheel every time. I'm not accusing you of doing this, I see from your answers that you are team of great and inspired people. But I didn't knew before, and being used to corporate scantness of feedback even after many tries, I was pushing all channels to make sure my message reached you. But you answered sooner than I expected, showing an uncommon degree of care and attention to the inputs of your community. I'm not sorry for asking other developers to make the same improvements, because I think competition is good for everybody. But I'm really sorry for giving the impression to show off or to diminish you. You make the best platform for animations on the web, and god knows how hard is to do such a thing when the big browsers corporations are working everyday to undermine any attempt of the W3C to create a common standard for the web. Thank you for your passionate work. I'm looking forward to buy a licence for your morphing SVG plugin as soon is available. I'm sure you will make it as good as possible.

[jackdoyle]

What a nice response, Emasoft. No problem at all - thanks for clarifying where you were coming from. Sometimes it's easy to read negative intent into written words that isn't really there.

Like I said, I do appreciate your passion for getting this morphing thing as good as it can be and I'm glad you're so aware of the academic work around this and may be able to bring some of that to bear on what we do here. I totally agree with you, by the way, that there's often a chasm between academia and real-world developers. I didn't meant to endorse that at all. The videos and PDF you shared were certainly interesting and worthwhile.

Thanks again!

[JonDum]

@Emasoft That sounded much more humbling and genuine :+1:

PS The papers you linked are very cool — I've already learned a thing or two, although I doubt I'll ever need to apply it :P