Bezier Cirves

Bezier Curves

A bezier curve is defined by control points.
There may be 2, 3, 4 or more.
For instance, two points curve:

Three points curve:

Four points curve:

If you look closely at these curves, you can immediately notice:

1. Points are not always on curve. That’s perfectly normal, later we’ll see how the curve is built.
   
2. The curve order equals the number of points minus one. For two points we have a linear curve (that’s a straight line), for three points – quadratic curve (parabolic), for four points – cubic curve.
   
3. A curve is always inside the convex hull of control points:
   
   

Because of that last property, in computer graphics it’s possible to optimize intersection tests. If convex hulls do not intersect, then curves do not either. So checking for the convex hulls intersection first can give a very fast “no intersection” result. Checking the intersection or convex hulls is much easier, because they are rectangles, triangles and so on (see the picture above), much simpler figures than the curve.
The main value of Bezier curves for drawing – by moving the points the curve is changing in intuitively obvious way.


Output Screenshots:

Code:
function setup() {
  createCanvas(720, 400);
  stroke(255);
  noFill();
}

function draw() {
  background(0);
  for (let i = 0; i < 200; i += 20) {
    bezier(
      mouseX - i / 2.0,
      40 + i,
      410,
      20,
      440,
      300,
      240 - i / 16.0,
      300 + i / 8.0
    );
  }
}