Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.
Introduction to Bezier curves
We talked about drawing custom curves earlier, but the actual development process can also encounter more complex graphics, such as the following:
Bezier curve is such a curve, it is a smooth curve drawn from the coordinates of four arbitrary points. In history, people who studied Bessel curves originally designed this vector curve drawing method based on the idea that four points were determined by the known parametric equation of the curve. Bessel curves are more interesting because of their “rubber band effect”, which means that as points move regularly, the curve will produce a change like rubber band extension, which brings a visual impact. In 1962, French mathematician Pierre Bezier was the first to study this vector curve drawing method, and gave a detailed calculation formula, so the curve drawn according to such a formula is named after his family name is Bezier curve.
This is actually a little bit wrong, there are only four points for a cubic Bezier curve, and there are also a first bezier curve, a second sub-Bezier curve and a higher order Bezier curve, but we usually use the cubic Bezier curve. To understand where bezier curves come from, we have to start with first degree Bezier curves and second degree Bezier curves.
A Bessel curve
As shown in the figure above, point P moves with time t between two points P0 and P1, at time t=0, P and P0 overlap, and at time t=1, P and P1 overlap. Finally, the relationship between the position of point P and P0, P1 and T is a linear interpolation function:
Quadratic Bessel curve
There are three control points of quadratic Bessel curve, as shown in the figure below.
There are three control points P0, P1 and P2. How do you get the position of P? So P is actually A bezier curve from A to B, and A is A bezier curve from P0 to P1, and B is A Bezier curve from P1 to P2. As time changes, the positions of points A and B change, so that point P moves along A curve P0, P1, and P2, but even more impressively it is A smooth curve. Below is the mathematical formula derivation and actual GIF demonstration.
Cubic Bezier curves
With quadratic Bezier curves, it’s actually the same thing with cubic Bezier curves.
The cubic Bezier curve has 4 control points, and the relationship of each point in the figure is as follows:
- A is A primary Bezier curve from P0 to P1, B is A primary Bezier curve from P1 to P2, and C is A primary Bezier curve from P2 to P3.
- Point D is A primary Bezier curve from point A to point B (also quadratic bezier curves of P0, P1, and P2), and point E is A primary Bezier curve from point B to point C (also quadratic Bezier curves of P1, P2, and P3).
- P is the first Bezier curve from D to E, the second bezier curve from A,B, and C, and then the third Bezier curve from P0, P1, P2, and P3.
The following is a GIF showing the movement of the P point.
The derivation of the mathematical formula is as follows:
Higher order Bessel functions
In fact, the Bezier function can continue to add control points, the derivation is the same, but as we increase the number of points, the calculation becomes more and more, and we use three bezier curves in most cases.
conclusion
This article introduces the concept of Bessel function, the process of moving points and formula derivation, I believe that through these contents, you should be able to know how to Bessel curve. In the next article we will use Flutter to draw Bezier curves and experience the beauty of mathematics!
I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder.
👍🏻 : feel the harvest please point a praise to encourage!
🌟 : Collect articles, easy to look back!
💬 : Comment exchange, mutual progress!