Curves(曲線)

週一到週五，天天一篇，北京時間早上7點準時更新~

Curves(曲線)

If moving everything along a straight line between two points is all we wanted to do, then this would be enough. However, in the real world, objects move in smooth curves and accelerate and decelerate smoothly. A curve can be represented by three or more control points. For most curves, there are more than three control points, two of which form the endpoints; the others define the shape of the curve. Consider the simple curve shown in Figure 4.14

若是沿着一條直線運動就能知足咱們的全部需求，那麼線性插值就足夠了，然而，實際上，物體更多的是沿着曲線運動，慢慢的加速和減速。三個或者三個以上的點能夠表達一個曲線，大部分曲線有三個以上的控制點。 其中兩個點用來定義邊界，其餘的點用來定義曲線的形狀，圖4.14展現了一個簡單的曲線

The curve shown in Figure 4.14 has three control points, A, B, and C. A and C are theendpoints of the curve and B defines the shape of the curve. If we join points A and B with one line and points B and C together with another line, then we can interpolate along the two lines using a simple linear interpolation to find a new pair of points, D and E. Now, given these two points, we can join them with yet another line and interpolate along it to find a new point, P. As we vary our interpolation parameter, t, point P will move in a smooth curved path from A to D. Expressed mathematically, this is

圖4.14中的曲線有3個控制點，其中A和C是端點，B控制着曲線的形狀。若是咱們將AB和BC連起來，咱們就能夠沿着這兩條線段進行線性插值，找到相似於D、E這樣的一對一對的點。 鏈接D、E兩點又能夠獲得一條新的線段，插值這條線又會獲得新的點p。當咱們去讓t變化，就能夠獲得p點從A到D平滑運動，計算公式以下：

Substituting for D and E and doing a little crunching, we come up with the following:(一樣的對於D、E之間的插值，咱們有以下式子:)

You should recognize this as a quadratic equation in t. The curve that it describes is known as a quadratic Bézier curve(你會發現，這個插值實際上就是二階的貝塞爾曲線). We can actually implement this very easily in GLSL using the mix function, as all we’re doing is linearly interpolating (mixing) the results of two previous interpolations(咱們在GLSL裏面很容易去實現這一插值)

vec4 quadratic_bezier(vec4 A, vec4 B, vec4 C, float t)
{
vec4 D = mix(A, B, t); // D = A + t(B - A)
vec4 E = mix(B, C, t); // E = B + t(C - B)
vec4 P = mix(D, E, t); // P = D + t(E - D)
return P;
}
By adding a fourth control point as shown in Figure 4.15, we can increase the order by 1 and produce a cubic Bézier curve.

當咱們添加第四個控制點後，這個插值又變成了三次方的貝塞爾曲線了

We now have four control points, A, B, C, and D. The process for constructing the curve is similar to that for the quadratic Bézier curve. We form a first line from A to B, a second line from B to C, and a third line from C to D. Interpolating along each of the three lines gives rise to three new points, E, F, and G. Using these three points, we form two more lines, one from E to F and another from F to G, interpolating along which gives rise to points H and I, between which we can interpolate to find our final point, P. Therefore, we have

如今咱們有四個控制點了，構建曲線的方法跟三個控制點構建曲線的方法相似。咱們首先鏈接AB、BC、CD，而後分別對他們插值，獲得新的點E、F、G。而後用這仨點作出新的兩條線EF、FG， 而後繼續對EF、FG插值獲得H、I點，而後咱們對HI進行插值，獲得了p點，這樣一來咱們有下面的公式

If you think these equations look familiar, you’re right: Our points E, F, and G form a quadratic Bézier curve that we use to interpolate to our final point P. If we were to substitute the equations for E, F, and G into the equations for H and I, then substitute those into the equation for P, and crunch through the expansions, we would be left with a cubic equation with terms in t—hence the name cubic Bézier curve. Again, we can implement this simply and efficiently in terms of linear interpolations in GLSL using the mix function:

若是你以爲這個等式很是類似，那麼你的直覺是正確的，咱們E、F、G組成了的二次方的貝塞爾曲線去插值p點的時候，若是把E、F、G求得H、I，那麼就能夠獲得P，如此這般，最後咱們就會獲得 由因子t影響的插值公式，下面給出了GLSL裏面的插值實現算法

vec4 cubic_bezier(vec4 A, vec4 B, vec4 C, vec4 D, float t)
{
vec4 E = mix(A, B, t); // E = A + t(B - A)
vec4 F = mix(B, C, t); // F = B + t(C - B)
vec4 G = mix(C, D, t); // G = C + t(D – C)
vec4 H = mix(E, F, t); // H = E + t(F - E)
vec4 I = mix(F, G, t); // I = F + t(G - F)
vec4 P = mix(H, I, t); // P = H + t(I - H)
return P;
}
Just as the structure of the equations for a cubic Bézier curve 「includes」 the equations for a quadratic curve, so, too, does the code to implement them. In fact, we can layer these curves on top of each other, using the code for one to build the next

正如三次方與二次方的貝塞爾曲線的關係那樣，是包含關係，實際上，我們的代碼也是這樣的包含關係。以下所示：

vec4 cubic_bezier(vec4 A, vec4 B, vec4 C, vec4 D, float t)
{
vec4 E = mix(A, B, t); // E = A + t(B - A)
vec4 F = mix(B, C, t); // F = B + t(C - B)
vec4 G = mix(C, D, t); // G = C + t(D - C)
return quadratic_bezier(E, F, G, t);
}
Now that we see this pattern, we can take it further and produce even higher-order curves. For example, a quintic Bézier curve (one with five control points) can be implemented as

相似的，咱們能夠獲得更高階的曲線的推導公式，長相以下這般

vec4 quintic_bezier(vec4 A, vec4 B, vec4 C, vec4 D, vec4 E, float t)
{
vec4 F = mix(A, B, t); // F = A + t(B - A)
vec4 G = mix(B, C, t); // G = B + t(C - B)
vec4 H = mix(C, D, t); // H = C + t(D - C)
vec4 I = mix(D, E, t); // I = D + t(E - D)
return cubic_bezier(F, G, H, I, t);
}
This layering could theoretically be applied over and over for any number of control points. However, in practice, curves with more than four control points are not commonly used. Rather, we use splines.

這種形勢的曲線實際上能夠一層層的嵌套下去，可是在現實中，咱們不多使用有4個控制點以上的貝塞爾曲線，若是控制點比較多的使用咱們使用樣條曲線

本日的翻譯就到這裏，明天見，拜拜~~

第一時間獲取最新橋段，請關注東漢書院以及圖形之心公衆號

東漢書院，等你來玩哦