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

**URL:** <https://discourse.processing.org/t/measure-distance-along-curves-curvepoint-in-p5-js/4583>\
**Category:** Coding Questions\
**Created:** [October 17, 2018, 10:21pm UTC](https://discourse.processing.org/t/measure-distance-along-curves-curvepoint-in-p5-js/4583 "2018-10-17T22:21:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![christianbird](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/christianbird/32/2002_2.png) [@christianbird](https://discourse.processing.org/u/christianbird)\
**Post date:** [October 17, 2018, 10:21pm UTC](https://discourse.processing.org/t/measure-distance-along-curves-curvepoint-in-p5-js/4583/1 "2018-10-17T22:21:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [October 17, 2018, 10:56pm UTC](https://discourse.processing.org/t/measure-distance-along-curves-curvepoint-in-p5-js/4583/2 "2018-10-17T22:56:29Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![christianbird](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/christianbird/32/2002_2.png) [@christianbird](https://discourse.processing.org/u/christianbird)\
**Post date:** [October 17, 2018, 11:43pm UTC](https://discourse.processing.org/t/measure-distance-along-curves-curvepoint-in-p5-js/4583/3 "2018-10-17T23:43:35Z")

</div>

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](https://processing.org/reference/curvePoint_.html)

---

<div class="post-metadata">

**Author:** ![christianbird](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/christianbird/32/2002_2.png) [@christianbird](https://discourse.processing.org/u/christianbird)\
**Post date:** [October 18, 2018, 11:31pm UTC](https://discourse.processing.org/t/measure-distance-along-curves-curvepoint-in-p5-js/4583/4 "2018-10-18T23:31:28Z")

</div>

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,

> **[A Primer on Bézier Curves](https://pomax.github.io/bezierinfo/#tracing)**
>
> A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them.

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 24, 2018, 11:23pm UTC](https://discourse.processing.org/t/measure-distance-along-curves-curvepoint-in-p5-js/4583/5 "2018-10-24T23:23:27Z")

</div>

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.