Bezier Curves

A Bezier curve is a parametric curve used widely in designing and computer graphics. It was first used by French engineer Pierre Bezier in the 1960s. A bezier curve is generated through the process of recursive linear interpolation of control points. All text on computers are rendered as Bezier curves, since it is more efficient to store a bunch of coordinates than to store the coordinates of all pixels involved.


Click and drag a control point to move it

On Mobiles: If unable to scroll, then touch the below canvas and try again









Description

Linear interpolation between two points \((x_1, y_1)\) and \((x_2, y_2)\) is a process of uniformly tracing the space between them. To be more mathematical, it involves varying a parameter, say \(t\), from 0 to 1, in the following equations: \[ x = x_1 + t (x_2 - x_1) \] \[ y = y_1 + t (y_2 - y_1) \] The line traced by the point \((x, y)\) as \(t\) varies from 0 to 1 is called a linear interpolation. At \(t = 0\), the line begins from \((x_1, y_1)\). At \(t = 1\), the line ends at \((x_2, y_2)\).

Let us consider the case of just two points. Then linear interpolation between them will just generate a straight line connecting the two points. The red dot is the initial point whereas the blue dot is the final point.

Now, add another point. This point fits in between the initial and final point. We consider (but won't draw) a line between the 1st and 2nd point, and a line between the 2nd and 3rd point. Interpolating between these two lines and joining the interpolated points will give us a moving line. When interpolation takes place between the two lines, we also interpolate the resulting line, and trace the interpolated point. This gives us a quadratic bezier curve.

In general, with \(n\) points, we get \(n-1\) lines by interpolation. We interpolate between these lines to get \(n-2\) lines and so on. Until we arrive at only one interpolated line. Tracing it's interpolation gives us the corresponding Bezier curve.

It might be hard to understand the working of a Bezier curve using just textual description. In this case, fret not. A lot of videos are available online (I would recommend this one). This website just allows you to play with Bezier curves.



Developed by ChanRT | Fork me at GitHub