Simple Curves

This example shows the default curve iterated by the sample movie. The small black square moves from the origin point x0,y0 (large green dot) to the destination point x3,y3 (large red dot), successively coming under the influence of the control points: first the small green dot x1,y1, then the small red dot x2,y2.

The movement along this curve is fairly steady. There are 50 points along the curve, with t increasing by 0.02 each iteration.

The curve's slope (or direction) at the origin is tangent to the line between x0,y0 and x1,y1. The same holds true for the slope at the destination and the line between x2,y2 and x3,y3.

The length of the line between each endpoint and its associated control point determines the speed of the movement along segments of the curve, as we'll see when we look at how you can use Bézier curves to create straight-line animations with acceleration and deceleration.

Home of the Bézier | The math | A simple curve | Lines | Recurves | Loops
Shockwave Bézier demo | The Bézier curve slider demo
The Virtual Ouija Board

1996 by Darrel Plant, Moshofsky/Plant Creative Services. Permission is granted to link to these pages.