# Finding a point on a bezier curve.

Page 1 of 1

## 1 Replies - 10056 Views - Last Post: 17 July 2014 - 05:23 PM

### #1 Blindman67 Reputation: 140
• Posts: 620
• Joined: 15-March 14

# Finding a point on a bezier curve.

Posted 03 June 2014 - 08:23 AM

Bezier Curves.

This curve is used all the time in vector graphics and makes very smooth curves.

There are 3 types used by the canvas for rendering.

First order curve is linear. The line
```ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);

```

```ctx.moveTo(x1,y1)

```

Third order cubic curve
```ctx.moveTo(x1,y1)
ctx.bezierCurveTo(x2,y2,x3,y3,x4,y4);

```

This is all well and good, easy to use, and give satisfying results. So why the snippit I hear you ask.

Well the problem is that its great to have these lovely curves displayed but what if you want to animate something along the curve, or presciently pick a point on the curve, there is no function to return a point on the curve so wee need to do it our selves.

So here are the functions you need to find a point on these curves.

Line
```// pointOnLine
// Arguments
// points (x1,y1) and (x2,y2) are the start and end
// p is the normalised distance along the line you want.
// p=0 returns the start
// p=1 returns the end
// p = 0.5 return the halfway point.
// Returns
// an array contain [x,y]
function pointOnLine(p,x1,y1,x2,y2){
return [(x2-x1*a+x1),(y2-y1)*a+y1];
}
```

```// Second order  curve
// points (x1,y1) and (x3,y3) are the start and end
// point (x2,y2) is the control point
// p is the normalised distance along the line you want.
// p=0 returns the start
// p=1 returns the end
// p = 0.5 return the halfway point.
// Returns
// an array containing the point [x,y]
var xx1 = (x2-x1)*p+x1;
var yy1 = (y2-y1)*p+y1;
return [(((x3-x2)*p+x2)-xx1)*p+xx1,(((y3-y2)*p+y2)-yy1)*p+yy1];
}
```

Bezier
```// Third order curve
// points (x1,y1) and (x4,y4) are the start and end
// points (x2,y2) and (x3,y3) are the control points
// p is the normalised distance along the line you want.
// p=0 returns the start
// p=1 returns the end
// p = 0.5 return the halfway point.
// Returns
// an array containing the point [x,y]
function getPointOnBezierCurve(p,x1,y1,x2,y2,x3,y3,x4,y4){
var xx1 = (x2-x1)*p+x1;  // get the x coordinate p along line x1,x2  p=0 start p=0.5 mid p=1 end
var yy1 = (y2-y1)*p+y1;  // get the y coordinate p along line y1,y2  p=0 start p=0.5 mid p=1 end
var xx2 = (x3-x2)*p+x2;  // get the x coordinate p along line x2,x3  p=0 start p=0.5 mid p=1 end
var yy2 = (y3-y2)*p+y2;  // get the y coordinate p along line y2,y3  p=0 start p=0.5 mid p=1 end
var xx3 = (x4-x3)*p+x3;  // get the x coordinate p along line x3,x4  p=0 start p=0.5 mid p=1 end
var yy3 = (y4-y3)*p+y3;  // get the y coordinate p along line y3,y4  p=0 start p=0.5 mid p=1 end
// this has created two new lines xx1,yy1 to xx2,yy2 and xx2,yy2 to xx3,yy3

var xxA1 = (xx2-xx1)*p+xx1;   // get the x coordinate p along line xx1,xx2  p=0 start p=0.5 mid p=1 end
var yyA1 = (yy2-yy1)*p+yy1;   // get the y coordinate p along line yy1,yy2  p=0 start p=0.5 mid p=1 end
var xxA2 = (xx3-xx2)*p+xx2;   // get the x coordinate p along line xx2,xx3  p=0 start p=0.5 mid p=1 end
var yyA2 = (yy3-yy2)*p+yy2;   // get the y coordinate p along line yy2,yy3  p=0 start p=0.5 mid p=1 end
// this has created the final line xxA1,yyA1 to xxA2,yyA2
// now just return tghe point p along the final line
return [(xxA2-xxA1)*p+xxA1,(yyA2-yyA1)*p+yyA1];
}

}
```

A visual guide to the above function for clarity representing a point mid way along the curve. p = 0.5 Is This A Good Question/Topic? 2

## Re: Finding a point on a bezier curve.

Posted 17 July 2014 - 05:23 PM

Nice
I just want to get canvas right. I keep loosing my lines.
Woe is me. I want to do a spoke picture of towns within a
given radius of the new town to which I am bound Saturday.
And annotate the lines extending from the hub with mileage.

Page 1 of 1

 .related ul { list-style-type: circle; font-size: 12px; font-weight: bold; } .related li { margin-bottom: 5px; background-position: left 7px !important; margin-left: -35px; } .related h2 { font-size: 18px; font-weight: bold; } .related a { color: blue; } 