How to model quadratic equation using a bezier curve (calculate control point)

Question

I am making a projectile motion simulation using canvas and I need to draw the line of the projectile's path (trajectory). I believe the best way to do this would be to draw a bezier curve using the quadraticCurveTo() method to accomplish this (since projectile motion can be modeled with a parabola).

I know the start and end points of the parabola along with the max value, but I am not sure how I would go about calculating the control point for my bezier curve.

Answer 1

There are more accurate ways to calculate a quadratic control point, but this close approximation has the benefit of being very quick to calculate:

// calc a control point
var cpX = 2*anywhereOnCurveX -startX/2 -endX/2;
var cpY = 2*anywhereOnCurveY -startY/2 -endY/2;

Here's a live demo which calculates the approximate control point given a starting point, ending point and any point on the curve (any point other than the start/end point):

http://jsfiddle.net/m1erickson/6jNCM/

Answer 2

For a Bezier curve to form a parabola, the second derivative must be constant. This requires: P0 - 3 * P1 = P3 - 3 * P2.

The following control points can be used:

P0 = (x - w, y)
P1 = (x - w/3, y + h)
P2 = (x + w/3, y + h)
P3 = (x + w, y)