Morphing 2D shapes

[jib]

Hello!
I’d want to make an animation of various shapes shifting from one to another. I looked at some SVG nodes but cant find anything similar so I try to use DrawPath from XY coordinates but they lost the rounded angle (of course). Any suggestion of the best way to do it ?
Thanks !

[elektromeier]

hey jib

im not sure what exactly the problem is you try to solve, maybe “GetFillPath” (converts stroke parametersettings to a path) or “SetPathEffects” (applys some effects - there is a corner effect nodes which rounds corners) helps you.

cheers ele

[jib]

Hi @elektromeier, what I’m trying to solve is the smoothness of the shapes and the morphing. I’m trying 2 directions :

A) using Draw SVG : the shapes are smoother, almost like original file seen in vector graphics software but I don’t know how to do the morphing.

B) using Path : I can do more or less morphing but the smoothness of the shapes themselves is hard to control. For example, this shape wouldn’t work with rounded corner effect since it has both sharp corner and round corner. Also, in order to make the shapes more precise I had to export so many vectors for each shape, i.e. 300 points,

and that also make the rounded corner effect not working

I hope it is clear, thanks!

[jib]

I mean something like this MorphSVG plugin for web would be perfect. it works even with different number of points on SVG and you can even choose from which index to start on…

[antokhio]

Well unless you find some .NET plugin, that you can use in VL and port that, this no easy topic in CG
Basically you can sort that out in two ways:

1. Prepare bunch of files with correct points order and exact same amount of points.
2. Use math and create something that would sort points in order so they morph…

The algorithm may look like so:
You can try for to take the points you have and for each point you have, sort incoming points by distance, then from that array of arrays with sorted points you have to get all the unique id’s. (the amount of points should be equal)

The most easy way would be to take an SVG file, sort points in it by x and y, resample to exact count, store to file, take next one and so on…

[jib]

Thanks @antokhio. In the end I adopt for using Rhino+grasshopper to prepare vector files : every shapes have the same amount of point, in more or less the same point of origin and run in the same direction. Then in vvvv with a little bit of rounded corner in “SetPathEffects” as @elektromeier suggested it does turn out ok, not very precise as orginal shapes but for our use-case it works fine!

[antokhio]

Good job