1

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.

3
  • 1
    actually, Beziers are utterly horrible for projectile trajectories, as the time parameter isn't linear with distance. For projectiles you just want to use the far simpler, and correct-wrt-physics parabolic function. Mar 10, 2014 at 17:30
  • What is correct-wrt-physics parabolic function?
    – acidic
    Mar 10, 2014 at 20:38
  • 1
    "correct with respect to physics". Object trajectories typically follow a parabolic path, which is y expressed in terms of x. It's relatively easy to draw a parabolic function using Bezier curves, but you don't want to use the Bezier for anything other than purely drawing. Mar 10, 2014 at 23:36

3 Answers 3

6

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/

2
  • How much of an "approximation" is this?
    – acidic
    Mar 7, 2014 at 2:51
  • 1
    This calculation is based on interval T=0.50, so if you provide the starting, ending and midpoint of the curve the calculation will be perfect. This seems best for your needs where you're firing a projectile from A to B and you have the apex point. Good luck with your project!
    – markE
    Mar 7, 2014 at 3:08
0

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) 
1
  • 1
    What are h and w?
    – sam
    Sep 15, 2016 at 17:43
0

More accurate version to draw the parabola (with given a, b, c parameters) wit Bezier curve (solution with Lua for Love2D, but you can read the code):

function drawBezierParabola (a, b, c, y1, y2)
    -- crop points:
    local x1 = (-b + math.sqrt(b^2 - 4*a*(c-y1))) / (2*a)
    local x2 = (-b - math.sqrt(b^2 - 4*a*(c-y2))) / (2*a)
    
    --[[ or by given x1 and x2:
    local y1 = a * x1^2 + b * x1 + c
    local y2 = a * x2^2 + b * x2 + c
    ]]

    -- derivatives:
    local k1 = 2 * a * x1 + b
    local k2 = 2 * a * x2 + b

    -- bezier control point:
    local xi = -b/(2*a) - (y2 - y1) / (k1 - k2)
    local yi = k1 * (xi - x1) + y1

    local bezier = love.math.newBezierCurve (x1, y1, xi, yi, x2, y2)
    love.graphics.line (bezier:render())
end

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.