Question: how does flubber approach morphing paths with different #s of shapes? about flubber HOT 13 CLOSED

@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).

from flubber.

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

from flubber.

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

from flubber.

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

from flubber.

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. :)

from flubber.

@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?

from flubber.

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.

from flubber.

@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?

from flubber.

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.

from flubber.

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

from flubber.

@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?

from flubber.

@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)

from flubber.

@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

from flubber.