You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 5-animation/1-bezier-curve/article.md
+30-18Lines changed: 30 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,17 +27,17 @@ Four points curve:
27
27
If you look closely at these curves, you can immediately notice:
28
28
29
29
1.**Points are not always on curve.** That's perfectly normal, later we'll see how the curve is built.
30
-
2.**Curve order equals the number of points minus one**.
30
+
2.**The curve order equals the number of points minus one**.
31
31
For two points we have a linear curve (that's a straight line), for three points -- quadratic curve (parabolic), for three points -- cubic curve.
32
32
3.**A curve is always inside the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of control points:**
33
33
34
34
35
35
36
-
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.
36
+
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.
37
37
38
38
The main value of Bezier curves for drawing -- by moving the points the curve is changing *in intuitively obvious way*.
39
39
40
-
Try to move points using a mouse in the example below:
40
+
Try to move control points using a mouse in the example below:
A Bezier curve can be described using a mathematical formula.
55
55
56
-
As we'll see soon -- there's no need to know it. But for completeness -- here you go.
56
+
As we'll see soon -- there's no need to know it. But for completeness -- here it is.
57
57
58
-
We have coordinates of control points <code>P<sub>i</sub></code>: the first control point has coordinates <code>P<sub>1</sub> = (x<sub>1</sub>, y<sub>1</sub>)</code>, the second: <code>P<sub>2</sub> = (x<sub>2</sub>, y<sub>2</sub>)</code>, and so on.
58
+
Given the coordinates of control points <code>P<sub>i</sub></code>: the first control point has coordinates <code>P<sub>1</sub> = (x<sub>1</sub>, y<sub>1</sub>)</code>, the second: <code>P<sub>2</sub> = (x<sub>2</sub>, y<sub>2</sub>)</code>, and so on, the curve coordinates are described by the equation that depends on the parameter `t` from the segment `[0,1]`.
59
59
60
-
Then the curve coordinates are described by the equation that depends on the parameter `t` from the segment `[0,1]`.
Instead of <code>x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>, x<sub>3</sub>, y<sub>3</sub></code> we should put coordinates of 3 control points, and `t` runs from `0` to `1`. The set of values `(x,y)` for each `t` forms the curve.
77
+
Instead of <code>x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>, x<sub>3</sub>, y<sub>3</sub></code> we should put coordinates of 3 control points.
78
+
79
+
For instance, if control points are `(0,0)`, `(0.5, 1)` and `(1, 0)`, the equations are:
Now as `t` runs from `0` to `1`, the set of values `(x,y)` for each `t` forms the curve.
80
85
81
86
That's probably too scientific, not very obvious why curves look like that, and how they depend on control points.
82
87
83
-
Another drawing algorithm may be easier to understand.
88
+
So here's the drawing algorithm that may be easier to understand.
84
89
85
90
## De Casteljau's algorithm
86
91
87
92
[De Casteljau's algorithm](https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm) is identical to the mathematical definition of the curve, but visually shows how it is built.
88
93
89
-
Let's explain it on the 3-points example.
94
+
Let's see it on the 3-points example.
95
+
96
+
Here's the demo, and the explanation follow.
90
97
91
-
Here's the demo. Points can be moved by the mouse. Press the "play" button to run it.
98
+
Points can be moved by the mouse. Press the "play" button to run it.
4.On the <spanstyle="color:#167490">new</span> segment we take a point on the distance proportional to `t`. That is, for `t=0.25` (the left picture) we have a point at the end of the left quarter of the segment, and for `t=0.5` (the right picture) -- in the middle of the segment. On pictures above that point is <spanstyle="color:red">red</span>.
121
+
4.Now the <spanstyle="color:#167490">blue</span> segment take a point on the distance proportional to the same value of`t`. That is, for `t=0.25` (the left picture) we have a point at the end of the left quarter of the segment, and for `t=0.5` (the right picture) -- in the middle of the segment. On pictures above that point is <spanstyle="color:red">red</span>.
115
122
116
123
5. As `t` runs from `0` to `1`, every value of `t` adds a point to the curve. The set of such points forms the Bezier curve. It's red and parabolic on the pictures above.
117
124
@@ -130,9 +137,14 @@ The algorithm:
130
137
- On the blue segment we take a point proportional to `t`. On the example above it's <spanstyle="color:red">red</span>.
131
138
- These points together form the curve.
132
139
133
-
The algorithm is recursive. For each `t` from `0` to `1` we have first N segments, then take points of them and connect -- N-1 segments and so on till we have one point. These make the curve.
140
+
The algorithm is recursive and can be generalized for any number of control points.
141
+
142
+
Given N of control points, we connect them to get initially N-1 segments.
134
143
135
-
Press the "play" button in the example above to see it in action.
144
+
Then for each `t` from `0` to `1`:
145
+
- Take a point on each of segment on the distance proportional to `t` and connect them -- there will be N-2 segments.
146
+
- Take a point on each of these segments on the distance proportional to `t` and connect -- there will be N-3 segments, and so on...
147
+
- Till we have one point. These points make the curve.
As the algorithm is recursive, we can build Bezier curves of any order: using 5, 6 or more control points. But on practice they are less useful. Usually we take 2-3 points, and for complex lines glue several curves together. That's simpler for support and in calculations.
165
+
As the algorithm is recursive, we can build Bezier curves of any order: using 5, 6 or more control points. But in practice they are less useful. Usually we take 2-3 points, and for complex lines glue several curves together. That's simpler to develop and calculate.
154
166
155
167
```smart header="How to draw a curve *through* given points?"
156
-
We use control points for a Bezier curve. As we can see, they are not on the curve. Or, to be precise, the first and the last one do belong to curve, but others don't.
168
+
We use control points for a Bezier curve. As we can see, they are not on the curve. Or, to be precise, the first and the last ones do belong to curve, but others don't.
157
169
158
170
Sometimes we have another task: to draw a curve *through several points*, so that all of them are on a single smooth curve. That task is called [interpolation](https://en.wikipedia.org/wiki/Interpolation), and here we don't cover it.
0 commit comments