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

#1 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 123
  • View blog
  • Posts: 551
  • 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);


Second order quadratic curve
ctx.moveTo(x1,y1)
ctx.quadraticCurveTo(x2,y2,x3,y3);


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];
}


Quadratic
// 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]
function getPointOnQuadCurve(p,x1,y1,x2,y2,x3,y3){
    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
Attached Image

Is This A Good Question/Topic? 2
  • +

Replies To: Finding a point on a bezier curve.

#2 btlsp  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 17-July 14

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1