Using a Path as a "skeleton" to another path (Bend path)

[jaronwanderley]

I'm trying to achieve this bend effect on a path, This effect takes an existing path (skeleton) and allows one to “bend” it in a shape path. The style of the bent path is taken from the style of the original shape path.
like the image below:

can someone tell me a way to achieve this effect with warp.js?
this deformation is used in the vector drawing tool Inkscape, which uses svg as a standard, and I would like to use animating with javascript and found warp.js, I am not sure how to try to implement this effect, any direction would be of great help.

The description of how the effect works is on this link
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathEffects-BendTool.html
and here is the c ++ implementation of the bend tool, has a brief description of the theory from J.F. Barraud,
https://gitlab.com/inkscape/inkscape/-/blob/master/src/live_effects/lpe-bendpath.cpp

even with the description I couldn’t understand what to do as a starting point, any help is welcome

[benjamminf]

We had some success using barycentric coordinates in #11 but it won't work with bezier curves like you need here.

This is certainly possible though with warp.js because as long as you have a transformer (x,y)->(x',y') then you can do almost anything. The problem is what you have requires significant math, as you'll notice with the aforementioned issue.

The links you've provided are really valuable. The Inkscape developer was kind enough to share the theoretical approach in a comment:

Let B be the skeleton path, and P the pattern (the path to be deformed).

P is a map t --> P(t) = ( x(t), y(t) ).
B is a map t --> B(t) = ( a(t), b(t) ).

The first step is to re-parametrize B by its arc length: this is the parametrization in which a point p on B is located by its distance s from start. One obtains a new map s --> U(s) = (a'(s),b'(s)), that still describes the same path B, but where the distance along B from start to U(s) is s itself.

We also need a unit normal to the path. This can be obtained by computing a unit tangent vector, and rotate it by 90. Call this normal vector N(s).

The basic deformation associated to B is then given by:

(x,y) --> U(x)+y*N(x)

(i.e. we go for distance x along the path, and then for distance y along the normal)

Of course this formula needs some minor adaptations (as is it depends on the absolute position of P for instance, so a little translation is needed first) but I think we can first forget about them.

We do some similar pre-processing in #11, but it'll still require a fair but of math knowledge to get this going. The code doesn't seem especially readable unfortunately.

Ultimately, I'd like to bake all of these things into the framework and more, but for right now I don't have the time for open source development outside of my main job (maybe in the near future, but we'll see).