How to split singlepath to multipath without affecting visually look

[dalisoft]

Can this possible? I sure you have idea about. This would be useful. If you do this, i will submit another idea PR. Because without this thing my PR was cannot be done. Thanks

[colinmeinke]

What is the use case? I'm not sure it's possible to split all shapes into multiple paths without affecting the visual look, as wouldn't this change fill rule behaviour?

[dalisoft]

I try to match subpath equalising by splitting lesser subpath points. Like flubberjs does like this thing. But slower

[colinmeinke]

I'm sorry, I don't understand. Could you show me a concise code example?

[dalisoft]

https://veltman.github.io/flubber/demos/medley.html

I want implement this thing with alternative fast solution

[colinmeinke]

I have done this in Wilderness core - https://github.com/colinmeinke/wilderness-core/tree/master/examples/complex-morph

I have released Wilderness core now, and it includes the examples compiled. So download it, open the example index.html file and take a look. This specific example actually uses your use case from a while ago.

I am currently in the process of rebuilding Wilderness using Wilderness core https://github.com/colinmeinke/wilderness/tree/next

[dalisoft]

Thanks

[dalisoft]

There wilderness core v1.0 only and not includes compiled file. I now out of computer. Or something missing?

[dalisoft]

I havent node access

[colinmeinke]

The release includes a the compiled dist.js file for each example. It also includes the library in common js, es2015 modules and umd versions https://unpkg.com/wilderness-core@1.0.0/

[dalisoft]

I think on github. It is good for npm. Thanks

[colinmeinke]

Yep, I don't commit build files to the github repo.

[dalisoft]

@colinmeinke look at pen, I am did some work, here demo at CodePen. I mean its splitting single-path to sub-path. And it's source is here. Can you help with that? Somewhere i am missing?

[colinmeinke]

That's exactly why I don't think you can split a single path to multiple paths, it messes with fill rule behaviour. In Wilderness I am morphing the horse to one triangle, and the other two triangles would morph to nothing - example https://github.com/colinmeinke/wilderness/blob/next/examples/horse-triangles

[dalisoft]

@colinmeinke I am almost done. I have 90% working code. EDIT: I have my fast solution alternative for triangulation

[dalisoft]

@colinmeinke Look at update pen https://codepen.io/dalisoft/pen/qXWYqb UPDATE: Look at flubber.js demo that i am inspired: https://veltman.github.io/flubber/demos/medley.html

I think they may look similar (60%), but, solution is faster than flubber.js solution, even on mobile

[colinmeinke]

Hmm - I think I'm happier with my solution in Wilderness. Whilst it is nice for all shapes in the group to map to part of the single shape, as soon as you add a stroke to the shapes it looks very messy. Flubber handles this better than your example, but I have a feeling this might just be because of the shapes they have chosen to morph between. I will definitely be looking into what Flubber is doing once I have launched Wilderness Next, to see if there is anything I can learn.

[dalisoft]

Yea, i see that my shapes not best flubber.js solution in case of visual. Because flubber uses getPointAtLength gives better result only too-much line-to and it's easier to autoIndex and inserting moveTo is easier. Thats why it's visually best. I note, it's optional, in future it maybe improved. Flubber does too bit messy when adding stroke-width: {n}px, stroke: {color}

[colinmeinke]

Flubber does too bit messy when adding stroke-width: {n}px, stroke: {color}

Yep, that's why I think there's an inherent floor with this method.

[dalisoft]

You mean this solution? https://codepen.io/dalisoft/pen/dzbgZK

[dalisoft]

It's too optional and works good for me now

[colinmeinke]

Yes - that's the Wilderness solution. It's the only solution that I can think of that would work well with strokes.

[dalisoft]

Yes, it's right.