How to correctly calculate the curve parameters of arrows?

Questions
1

hey~all, I expect to have an arrow with a hand-drawn effect. But I don’t know how to correctly calculate the curve of the arrow. What I mean is how the arrow points along the direction of the curve.
pg: Babylon.js Playground

2

I think that’s a bit vague to understand what result you’re looking for. Can you give us an example?

3

Sorry I didn’t describe it clearly. I expected it to be like this:

20230925181619
20230925181619697×493 64.2 KB

0230925181059
0230925181059891×589 20.9 KB

4

I’m not sure it’s clearer :slight_smile:

If there’s a function curvature(listOfPoints) { ... return ?; }, what do you expect as the returned result from this function?

If it’s a direction (a vector), then I think you can calculate the tangent to the curve at the endpoint (by using the last few points of listOfPoints).

[EDIT] PG to illustrate using the tangent to find the direction:

1 Like
5

Maybe check out Freya Hólmer’s videos on curves, they’re a great resource:
The Beauty of Bézier Curves - YouTube
The Continuity of Splines - YouTube

2 Likes
6

Thanks for the inspiration, I feel like I’m getting closer
pg: https://playground.babylonjs.com/#1JNVTM#2
https://playground.babylonjs.com/#1JNVTM#3
https://playground.babylonjs.com/#1JNVTM#4

1 Like