Bezier curves are used in computer graphics to draw shapes, for CSS animation and in many other places.
They are a very simple thing, worth to study once and then feel comfortable in the world of vector graphics and advanced animations.
A bezier curve is defined by control points.
There may be 2, 3, 4 or more.
Points are not always on curve. That’s perfectly normal, later we’ll see how the curve is built.
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.
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.
References:
https://javascript.info/bezier-curve
No comments:
Post a Comment