Measure distance along curves, curvePoint()? in p5.js?

p5.js Coding Questions
1

Hello!

Please forgive me if I have posted this topic in the wrong location.
This is my first post, thanks in advance for any pointers or suggestions.

I’m hoping to measure along a spline or bezier curve within p5.js - I have found suggestions for Processing, and a few posts on the GitHub (which is far beyond my current level of understanding). Are there any examples of implementation which you could point me toward?

Thank you very much,

Christian

1 Like
2

What exactly do you want to acomplish? Measure along a spline? I’m not sure I understand what you mean. Do you want to measure a distance?

3

Thank you for your reply,

I ultimately wish to animate a shape along a predefined curve, ideally bezier, and hope to be able to measure in increments along its length.

e.g between 0 to 1 along the distance, as per t in the example curvePoint function below

https://processing.org/reference/curvePoint_.html

4

I found a facinating website by Pomax, which appears an exhaustive collection of curve related scenarios and formulae.

The tracing section outlines how equidistant points can be achieved,

Sadly, this is far beyond my quite fundamental experience with programming, and so I will continue to look for p5.js examples and share anything I find here. Thanks again for any pointers posted here

Christian

5

Is your goal to have continuous-speed motion along the curve?

In Processing (Java), there is an Examples > Topics > Curves > ArcLengthParameterization sketch that you may find interesting.

1 Like