Nice, fancy approach. The stupid simple approach I’ve used is to sample each path with path.getPointAtLength() at an appropriate resolution, and use that to approximate the paths with many short straight lines segments which are trivial to interpolate between.
The author, Boris Dalstein, published a novel algorithm for shape morphing at SIGGRAPH 2014, using vector animation complexes[2], which is the basis for this software.
AFAIK this is (still) state of the art for this stuff today. I.e. I haven't seen anything better if you do any sort of 2D animation based on vector graphics. Topology is more or less not a concern any more.
I've been following VGC for some time now, and I definitely think it's the coolest project of its kind right now! I sincerely hope it will be widely used.
It is a C++ library, builds for native (MacOS, Linux and MS-Windows via msys2/ming2 and WebAssembly). It also included a some-what user hostile demo to allow one to make their own animated paths (and save them and load them).
The library is not really worked on at all since I (the author) left InvisionApp quite some time ago; that and InvisionApp announced that they are shutting down by the end of 2024.
Because it targeted WebGL2 (which is jut GLES 3.0) it could not use compute so some portions of how path filling are handled become CPU bound instead of GPU bound once the GPU is too powerful; a Mac-Mini with an M1 was generally the sweet spot.
Is there a basic JS library to do something like this by giving it two image paths via a property of an html tag? (and then the library automatically replacing the html element with an animation)
For example:
<div x-img-1=“img1.svg” x-img-2=“img2.svt”>default content to replace with animation</div>
Extra bonus point if it works on the background image of an element, so that a whole page might have an animated svg background
Look at the heart to star morphing. How can you call it a "very cool effect"?! It's so damn ugly. It existed back in the day of Macromedia Flash 4 (maybe earlier), called shape tweening. Except there, you could use tween hints to control the transition.
Try this instead: look at the pairs of nearest points, take a heap sort of like 4 best matching pairs of points, and from those points traverse the curves, resampling the paths with less resolution. Now instead of interpolating positions, interpolate angles. This way the curves will naturally deform, instead of line segments passing through each-other.
Always open to suggestions! I don't claim this to be any kind of novel method, or even a "good method". It's just an explanation of one way to do it, which is (IMO) relatively easy to understand, and implement.
When researching about this, I didn’t find a lot of writing. Macromedia definitely had this a long time ago, but I don't think you can look up how it was implemented. Not to my knowledge, at least.
Do you have an example of the algorithm you describe? Or a more detailed explanation? I don't quite get how it would work from what you've described.
I haven't looked too in depth into it, but it looks closer to what I described? It doesn’t look like the method the other commenter was describing.
Also, keep in mind that I did not mean to implement something better than what Flash did. It's merely an extension to the kind of morphing the browsers already offer.
I am too young to have lived through that era, but it seems to me like tweening hints were all integrated in the editing UI? That is of course much more useful. But the scope of my post was not at all to do something better than Flash, or to integrate a full editor. It's just an explanation for one way to achieve it, leveraging what SMIL already offers.
Yeah, they were in the editor and buggy as hell and you ran an increasing risk of crashing the tool the more of them you used. Also IIRC, they were indexed by letter of the alphabet and everything became impossible > 26.
