# Draw land for motocross game

I would like to draw a land for a motocross game. I've been thinking of Bezier Curves but I am not sure whether this is the best approach. Can you give me some advice? I want to do it in JavaScript, not very good choice but it's personal project so for time being it's OK.

-
Why are you saying JavaScript is a bad choice? Sure for a AAA it would be a bad choice, but for a simple online game, it is a good choice. – AttackingHobo Oct 31 '10 at 17:25

Instead of beziers, you probably want b-splines or catmull-rom splines.

``````float bspline(float t, float p0, float p1, float p2, float p3)
{
float it = 1.0f - t;

float b0 = it*it*it * (1.0f / 6.0f);
float b1 = (3*t*t*t - 6*t*t +4) * (1.0f / 6.0f);
float b2 = (-3*t*t*t +3*t*t + 3*t + 1) * (1.0f / 6.0f);
float b3 =  t*t*t * (1.0f / 6.0f);

return
b0*p0 +
b1*p1 +
b2*p2 +
b3*p3;
}

float catmullrom(float t, float p0, float p1, float p2, float p3)
{
return 0.5f * (
(2 * p1) +
(-p0 + p2) * t +
(2 * p0 - 5 * p1 + 4 * p2 - p3) * t * t +
(-p0 + 3 * p1 - 3 * p2 + p3) * t * t * t
);
}
``````

Usage: t ranges from 0 to 1, where the value interpolates the spline between two control points, and the floats p0, p1, p2 and p3 are represent the control points (previous, current, next, and the following). To interpolate n-dimensional curves, just call the functions once per axis.

The practical difference between bsplines and catmull-rom is basically that catmull-rom goes through all control points while bsplines are more smooth.

-
Question about the bspline formula. What is the purpose of `float it = 1.0f - t` and using `it` for the `b0` value? Why do that for the bspline, and not the catmull rom? – canderson Oct 13 '11 at 20:25

I found a couple of links that might be useful for others:

Example script of Bezier implementation in JS
http://jsfromhell.com/math/bezier

It can be used from JavaScript or ActionScript to animate along a bezier path.