How to handle morphing when paths have a differing number of lines?

[colinmeinke]

SVG paths can include multiple move to commands, and hence we can have a path with multiple lines. Morphing between two paths with a differing number of lines poses a challenge. Here is the most simple example - a morph between a path with 1 line, and a path with 2 lines http://codepen.io/anon/pen/BpdEZY?editors=0010.

The morph does not work. This is because there are a mismatched number of points with the moveTo property. moveTo is boolean, it's either on or off, we cannot ease moveTo. So a gap appears in the second line. Removing the moveTo command at any stage of the animation would result in a jarring join of the line.

My initial thoughts are that to produce a smooth animation, morphs need to map lines one-to-one. Any mismatch in the number of lines in a path would require the addition of extra invisible lines on the secondary shape. It would essentially do something like this under the hood http://codepen.io/anon/pen/zNdQZN?editors=0010.

There is also an overlap here with deciding on how to handle a morph between two groups with a differing number of shapes.

[dalisoft]

We can use boundingBox center as missing points. Is this good idea? See #64

[dalisoft]

Please let me contact you privately, i have some demos (exactly some SVG used that should not be used public) and may fix this issue. Thanks to you i maked some nice svg plugin for myjs, so i too want improve all of these js for better.
Give me mail

[colinmeinke]

Centre of the shape is one option. I think a better option might be to ease each additional line to the nearest point of the next shape. I imagine that would give the nicest visual transition. I think it might work to split any path shape with multiple move to commands into a group shape. That way we can apply a different style to each line (as we want some to transition to transparent, that will be required).

[dalisoft]

I already did similar to convert to group. But not did nearest point because this may cause some triangulation as i hate that. SnapSVG partly fix this issue with fixM function by adding M to same position of missing moveto path

[colinmeinke]

What do you mean by triangulation?

[dalisoft]

You seen my pen with light and plug? When morph to light tween creates much of triangulation.

[colinmeinke]

You mean this kind of thing https://www.w3.org/TR/SVG/painting.html#FillRuleProperty ?

[dalisoft]

No no. Its different thing. I send you today or tomorrow some my work

[colinmeinke]

If you can just send me a screenshot of what triangulation looks like, that would be great.

[dalisoft]

http://codepen.io/dalisoft/pen/egdPZX

[dalisoft]

http://codepen.io/dalisoft/pen/jyrBOL

[colinmeinke]

I'm no clearer on what triangulation means.

[dalisoft]

Some peoples say intersection and some are overlap. At all it is not a points nor wilderness issue. All of that need add missing path and everything ok

[dalisoft]

Users should add. Points works well. I now have some issue with my work. As i fix that then i send to you because myjs tweens same path d with some moving

[colinmeinke]

Would you say these animations have triangulation? http://codepen.io/colinmeinke/pen/pRWewx

[dalisoft]

Yes. Its that what i mean.

[colinmeinke]

Having thought about this some more, splitting a path into a group shape won't work because it will paint intersecting paths incorrectly. I don't think Wilderness can do too much about intersection/triangulation during an animation. It can generally do a better job of animating paths with differing number of lines though.

For example, in the following example currently 10 additional points would be added around the square created by to. This will leave gaps between lines in the second shape during an animation.

const from = 'M20,20H80V80H20Z   M30,30V70H70Z   M40,40H60V60H40Z'
const to = 'M420,20H480V80H420Z'

Instead of simply adding points around the existing to shape, Wilderness could create two additional (invisible) lines to match the structure of from.

const from = 'M20,20H80V80H20Z   M30,30V70H70Z  M40,40H60V60H40Z'
const to = 'M420,20H480V80H420Z   M430,30v0h0Z   M440,40h0v0h0Z'

[dalisoft]

In exaple i have 15 subpath, with this idea shapes while tweening just scaleouts. It looks but nice but not complex as nearest point

[colinmeinke]

This is a priority for colinmeinke/wilderness-core#7

[colinmeinke]

@dalisoft in case you are still interested - I have been rewriting the core of wilderness over at wilderness-core and have fixed this issue https://github.com/colinmeinke/wilderness-core/tree/master/examples/complex-morph (this is handling your exact codepen example). I should have this merged into this library over the next few weeks.

[dalisoft]

Thanks for fix. This library helps a lot for much of peoples. Thank you for providing amazing library for free.
EDIT: I am already solved this issue for my lib with nearest point. I am deleted repo due of i am used more library for make my lib and my lib can be change the future much of succed libs. This solution too nice. I am see in my local demo (npm run build)