Question: how does flubber approach morphing paths with different #s of shapes?

[alexjlockwood]

This isn't a bug report... more just a question. Hope you don't mind. :)

I'm the author of ShapeShifter, an SVG icon animation app. You can see an example video showing how to animate a play icon into a pause icon here: https://www.youtube.com/watch?v=2aq3ljlnQdI

Shape Shifter provides a feature called "auto-fix" which gives "best guess estimates" for path morphing animations, similar to your library. It uses an application of the Needleman-Wunsch algorithm. Right now I only have it working well with single-shape SVGs though.

Flubber looks like it handles multi-shape path morphs pretty well, so I am kind of curious how you approached creating "best guess" animations for paths with different #s of shapes? Thanks in advance if you have any tips. :)

[dalisoft]

@alexjlockwood I have too multi-shape handling (published, then removed repo), i split paths, tweening each and combine while tweening.

[alexjlockwood]

Just wondering... how do you determine where to split the paths?

[dalisoft]

Split by moveto command. But flubber does same thing plus triangulation matches where to split. I tried implement flubber way, works with full flubber library, but slower

[alexjlockwood]

ah-ha! triangulation sounds super useful. in fact, I think I may have found a demo you wrote in the past that might explain it. https://bl.ocks.org/veltman/218a162265c772f86bc26c1bc91fe58b

thanks for the tip, i'm definitely going to explore this further. :)

[dalisoft]

@alexjlockwood I looked to your code, looks amazing, but i never understand Angular (learned React, Vue, etc...) but not understand Angular. Is you have basic/es6 js version?

[veltman]

The general approach is as follows, to morph a shape into N shapes:

1. Triangulate the polygon using earcut.
2. Put those triangles into a TopoJSON topology.
3. Merge the smallest triangle into one of its neighbors.
4. Repeat step 3 until only N shapes are left.

[dalisoft]

@veltman I've using your app (requires flubber.min.js for minimal size) to improve visually morphing, but very slow comparing to my tools (visually best is your). And earcut+topojson very high size. Maybe there we reduce size, improve performance together?

[veltman]

Oops, submitted too early.

5. Match the resulting pieces with the destination shapes by finding the permutation that minimizes the distance between the centroid of each piece and the centroid of its destination shape. (Flubber skips this optimization if there are too many shapes, it would take forever otherwise)
6. Morph each pair.

[dalisoft]

@veltman Triangulation is bit slow and has some cons, it creates unexcepted line as you see in some case

[alexjlockwood]

@veltman For step 3:

Merge the smallest triangle into one of its neighbors.

How do you determine which neighbor to merge with? My best guess is that you would pick the neighbor with the smallest total area?

I am also wondering if flubber does any special handling for shapes that contain holes?

[alexjlockwood]

@dalisoft Most of the math for ShapeShifter is contained in these two directories:

https://github.com/alexjlockwood/ShapeShifter/blob/master/src/app/scripts/algorithms/AutoAwesome.ts (Needleman-Wunsch algorithm for aligning SVGs)

https://github.com/alexjlockwood/ShapeShifter/tree/master/src/app/model/paths (a bunch of Path-related math for splitting/reversing/shifting/winding/etc. SVG paths)

[veltman]

@alexjlockwood it currently just merges into the first neighbor by arc order so it's rather arbitrary (but deterministic). I did experiment with some alternative merging strategies but didn't see any real improvement in the look of the results. I may try to modify the triangulation to produce more regular triangles, since the current approach produces a lot of very long skinny ones (#1).

[dalisoft]

@veltman I try your solution triangulation but slow, also i am tried to decurve my points and then after triangulation recurve, not works. Can you have solution curves? Without getPointAtLength solution, because it is slower