How do I create a bendable arrow?

Hi! I'd like to create a curved arrow where the amount of curve can be controlled by the user. Here is a picture from an app called Notability that has curved arrows with the same controls as I want. You can see all 3 controls are on-path. The arrow shaft (line) is created and then the arrow head is rotated to be in-line with the end of the line. Any *pointers* on how to do this?

The above example is just a line. Here is what I'd like my final version to look like. I'd like to start with an SVG file and deform the arrow shaft, then drop to pixels to preserve clarity of the final image. But I'll take suggestions.

Thanks!

qarp(a,b,c,x) on a Drawing Canvas would be the simplest method.

qarp(a, b, c, x) Quadratic interpolation through a, b and c by x.

Calculates lerp(lerp(a, b, x), lerp(b, c, x), x).

Quadratic interpolation looks like it's the right way to go, but how do you input (x,y) coordinates into qarp(a, b, c, x)?

qarp(xa,xb,xc,0-1), qarp(ya,yb,yc,0-1)

dropbox.com/s/bcigads5c9w4d07/qarpline.c3p

This is really close! It certainly creates a curved arrow shaft, and I see that the a, b, c variables are inputs from scene objects, not set x,y coordinates. Makes sense.

The problem, however, is that the sprite that defines the curve of the arrow shaft is not on the line. Off curve controls are difficult for users to understand. When I looked up quadratic splines the images all showed on-curve control points but for some reason your demo project has the center control off-curve.

Any idea why?

It happens because qarp is a Bézier curve and b is a control point that the curve won’t ever touch.

But you can take the equation and find the control point so that b is on the curve.

stackoverflow.com/questions/6711707/draw-a-quadratic-b%C3%A9zier-curve-through-three-given-points

X=qarp(xa, 2*xb-xa/2-xc/2, xc, t)

Y=qarp(ya, 2*yb-ya/2-yc/2, yc, t)

Alternatively you can utilize another kind of spline curve such as hermite or catmull-rom which always passes the curve through the points.

Thanks R0J0hound

I've updated the file with the formula, and a function for a better implementation.

Excellent. This is exactly it! Thanks guys so much for your help. You are truly stellar people!

OK, the arrow shaft is implemented but now I need to place the arrowhead at the end of the shaft. Using the 3 controls points is not working, given my limited skills. Any suggestions?

R0J0's math to the rescue again.

dropbox.com/s/ql2kefn63rhpje9/qarpVect.c3p

Basically you take the angle between two points(angle()).

That just happens to be 99% of the way between the control point, and the last point splined.

Wow. This is perfect. I'll have to study how you made this. Thanks again!!!