Draw land for motocross game

Question

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.

Answer 1

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.
http://code.google.com/p/javascript-beziers/

Online drawing script/plot, quite useful if you want to make some tests
http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm

A bit of theory and an implementation example
http://13thparallel.com/archive/bezier-curves/

Answer 2

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.