One Dimensional Rational Cubic Bezier Curve

Click and drag control points to change curve. Modify weights in boxes below the curve.

For more information, check out the post on my blog: Bezier Curves.


Your browser doesn't seem to support the necesary html5 features ):

W1: W2:
W3: W4:

Rational cubic bezier curves have 4 control points, a weight per control point (4 total), and total up the values of the 4 functions below to get the final point at time t.
  1. A * W1 * (1-t)^3
  2. B * W2 * 3t(1-t)^2
  3. C * W3 * 3t^2(1-t)
  4. D * W4 * t^3
They then divide that by the total of these 4 functions.
  1. W1 * (1-t)^3
  2. W2 * 3t(1-t)^2
  3. W3 * 3t^2(1-t)
  4. W4 * t^3
Parameters:
t - "time", but in our case we are going to use the x axis value for t.
A - The first control point, which is also the value of the function when x = 0.
B - The second control point.
C - The third control point.
D - The fourth control point, which is also the value of the function when x = 1.
W1 - The weighting of control point A.
W2 - The weighting of control point B.
W3 - The weighting of control point C.
W4 - The weighting of control point D.

In this particular case, A, B, C and D are scalars, which makes the curve into the function:
y = (A * W1 * (1-x)^3 + B * W2 * 3x(1-x)^2 + C * W3 * 3x^2(1-x) + D * W4 * x^3) / (W1 * (1-x)^3 + W2 * 3x(1-x)^2 + W3 * 3x^2(1-x) + W4 * x^3)


Note that this bezier curve is 1 dimensional because A,B,C,D are 1 dimensional, but you could use these same equations in any dimension. Also, these control points range from 0 to 1 on the X axis, but you could scale the X axis and/or the Y axis to get a different range of values.