How do you calculate the coordinates a quadratic curve follows?

1k Views Asked by At

I'm a programmer, and terrible at maths. Usually, I try Google or my math-addict co-worker for problems like this, but Google searches show nothing and my co-worker is on vacation for a few weeks. I am working in an HTML5 canvas, explained here:

http://www.rgraph.net/blog/2013/january/an-example-of-the-html5-canvas-quadraticcurveto-function.html

Basically, on an X/Y grid, the startpoint is at 75X/200Y, the control point is at 300X/50Y, and the endpoint is at 525X/200Y. What formula can I use to get a number of coordinates along the drawn line?

Edit: The formula created with the help of the selected answer:

var curveX = (1 - i) * ((1 - i) * startPoint.x + (i * controlPointX)) + i * (((1 - i) * controlPointX + (i * endPoint.x)));
var curveY = (1 - i) * ((1 - i) * startPoint.y + (i * controlPointY)) + i * (((1 - i) * controlPointY + (i * endPoint.y)));

The variable i is a variable from a for loop, that goes from 0.1 to i < 1, increasing by 0.1. You can increase this loop for more coordinates, like using 0.05 instead of 0.1.

1

There are 1 best solutions below

10
On BEST ANSWER

$$B(t)=(1-t)((1-t)P_0+tP_1)+t((1-t)P_1+tP_2)$$

As the Wikipedia page says, $B(t)$ is a point on the curve for all $t\in[0,1]$. $P_0,P_1, P_2$ are the starting point, control point, and end point.

In case you are not familiar with linear algebra or vectors, you can put the x-coordinates of the points into this equation, and then $B(t)$ will be the x-coordinate of a point on the line, for all $t\in[0,1]$. Same for y-coordinate.