Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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.

share|improve this question
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

2 Answers 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);

    b0*p0 +
    b1*p1 +
    b2*p2 +

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.

share|improve this answer
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
up vote 2 down vote accepted

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

Example script of Bezier implementation in JS

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

Online drawing script/plot, quite useful if you want to make some tests

A bit of theory and an implementation example

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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