From 0ab39eec0788630d1b99a72aa34c244440a93c2e Mon Sep 17 00:00:00 2001 From: Pomax Date: Sat, 8 Aug 2020 21:42:45 -0700 Subject: [PATCH] latex color fix + section titles --- chapters/explanation/circle.js | 10 +- .../39364a247a023d475d107aaf7b99d80c.svg | 1 + .../50679d61424222d7b6b97eb3aa663582.svg | 1 + .../741097d69c182e8742695af23980bd8f.svg | 1 + .../89ceb6024ead6f710e3e0f09d2864f43.svg | 1 + .../a9af1c06a00bb3c4af816a138fb0a66d.svg | 1 + .../b7815b1502029ed9d805b6ba0801a53f.svg | 1 + .../c78b203ff33e5c1606728b552505d61c.svg | 1 + .../c7b13e6507450b3da7dc4ce3c10c370f.svg | 1 + .../c81557b87f5547db59bc47f1e96409dc.svg | 1 + .../d480a9aa41917e5230d432cdbd6899b1.svg | 1 + .../e107caca1577e44293cd207388ac939c.svg | 1 + index.html | 152 +++++++++-------- ja-JP/index.html | 154 ++++++++++-------- placeholder-style.css | 5 + tools/build/create-index-page.js | 5 +- tools/build/latex/latex-to-svg.js | 14 ++ zh-CN/index.html | 152 +++++++++-------- 18 files changed, 295 insertions(+), 208 deletions(-) create mode 100644 images/latex/39364a247a023d475d107aaf7b99d80c.svg create mode 100644 images/latex/50679d61424222d7b6b97eb3aa663582.svg create mode 100644 images/latex/741097d69c182e8742695af23980bd8f.svg create mode 100644 images/latex/89ceb6024ead6f710e3e0f09d2864f43.svg create mode 100644 images/latex/a9af1c06a00bb3c4af816a138fb0a66d.svg create mode 100644 images/latex/b7815b1502029ed9d805b6ba0801a53f.svg create mode 100644 images/latex/c78b203ff33e5c1606728b552505d61c.svg create mode 100644 images/latex/c7b13e6507450b3da7dc4ce3c10c370f.svg create mode 100644 images/latex/c81557b87f5547db59bc47f1e96409dc.svg create mode 100644 images/latex/d480a9aa41917e5230d432cdbd6899b1.svg create mode 100644 images/latex/e107caca1577e44293cd207388ac939c.svg diff --git a/chapters/explanation/circle.js b/chapters/explanation/circle.js index 6f23c08b..ca282293 100644 --- a/chapters/explanation/circle.js +++ b/chapters/explanation/circle.js @@ -39,10 +39,8 @@ draw() { onKeyDown() { const key = this.keyboard.currentKey; - - if (key === `ArrowUp`) { this.step++; } - if (key === `ArrowDown`) { this.step--; } - + if (key === `ArrowUp`) { this.step += 0.1; } + if (key === `ArrowDown`) { this.step -= 0.1; } if (this.step < 1) this.step = 1; redraw(); } @@ -58,8 +56,8 @@ onMouseUp() { onMouseMove() { if (this.mark) { let diff = this.mark - this.cursor.y, - mapped = map(diff, -this.height/2, this.height/2, 1, 10, true); - this.step = mapped | 0; + mapped = map(diff, -this.height/2, this.height/2, 0, 10, true); + this.step = mapped; redraw(); } } diff --git a/images/latex/39364a247a023d475d107aaf7b99d80c.svg b/images/latex/39364a247a023d475d107aaf7b99d80c.svg new file mode 100644 index 00000000..bbb479db --- /dev/null +++ b/images/latex/39364a247a023d475d107aaf7b99d80c.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/50679d61424222d7b6b97eb3aa663582.svg b/images/latex/50679d61424222d7b6b97eb3aa663582.svg new file mode 100644 index 00000000..fc898450 --- /dev/null +++ b/images/latex/50679d61424222d7b6b97eb3aa663582.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/741097d69c182e8742695af23980bd8f.svg b/images/latex/741097d69c182e8742695af23980bd8f.svg new file mode 100644 index 00000000..2b15abd5 --- /dev/null +++ b/images/latex/741097d69c182e8742695af23980bd8f.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/89ceb6024ead6f710e3e0f09d2864f43.svg b/images/latex/89ceb6024ead6f710e3e0f09d2864f43.svg new file mode 100644 index 00000000..54f9887b --- /dev/null +++ b/images/latex/89ceb6024ead6f710e3e0f09d2864f43.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/a9af1c06a00bb3c4af816a138fb0a66d.svg b/images/latex/a9af1c06a00bb3c4af816a138fb0a66d.svg new file mode 100644 index 00000000..b80daec0 --- /dev/null +++ b/images/latex/a9af1c06a00bb3c4af816a138fb0a66d.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/b7815b1502029ed9d805b6ba0801a53f.svg b/images/latex/b7815b1502029ed9d805b6ba0801a53f.svg new file mode 100644 index 00000000..9527ca8b --- /dev/null +++ b/images/latex/b7815b1502029ed9d805b6ba0801a53f.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/c78b203ff33e5c1606728b552505d61c.svg b/images/latex/c78b203ff33e5c1606728b552505d61c.svg new file mode 100644 index 00000000..39f7d3ea --- /dev/null +++ b/images/latex/c78b203ff33e5c1606728b552505d61c.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/c7b13e6507450b3da7dc4ce3c10c370f.svg b/images/latex/c7b13e6507450b3da7dc4ce3c10c370f.svg new file mode 100644 index 00000000..c305a989 --- /dev/null +++ b/images/latex/c7b13e6507450b3da7dc4ce3c10c370f.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/c81557b87f5547db59bc47f1e96409dc.svg b/images/latex/c81557b87f5547db59bc47f1e96409dc.svg new file mode 100644 index 00000000..fae2ab00 --- /dev/null +++ b/images/latex/c81557b87f5547db59bc47f1e96409dc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/d480a9aa41917e5230d432cdbd6899b1.svg b/images/latex/d480a9aa41917e5230d432cdbd6899b1.svg new file mode 100644 index 00000000..369959d8 --- /dev/null +++ b/images/latex/d480a9aa41917e5230d432cdbd6899b1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/e107caca1577e44293cd207388ac939c.svg b/images/latex/e107caca1577e44293cd207388ac939c.svg new file mode 100644 index 00000000..021454ef --- /dev/null +++ b/images/latex/e107caca1577e44293cd207388ac939c.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 19856e72..6e4dfb70 100644 --- a/index.html +++ b/index.html @@ -473,7 +473,7 @@
-

A lightning introduction

+

A lightning introduction

Let's start with the good stuff: when we're talking about Bézier curves, we're talking about the things that you can see in the @@ -529,7 +529,7 @@

-

So what makes a Bézier Curve?

+

So what makes a Bézier Curve?

Playing with the points for curves may have given you a feel for how Bézier curves behave, but what are Bézier curves, really? @@ -607,7 +607,7 @@

-

The mathematics of Bézier curves

+

The mathematics of Bézier curves

Bézier curves are a form of "parametric" function. Mathematically speaking, parametric functions are cheats: a "function" is actually @@ -782,9 +782,9 @@

@@ -893,7 +893,7 @@ function Bezier(3,t):

-

Controlling Bézier curvatures

+

Controlling Bézier curvatures

Bézier curves are, like all "splines", interpolation functions. This means that they take a set of points, and generate values somewhere @@ -961,8 +961,8 @@ function Bezier(3,t):

@@ -1007,7 +1007,11 @@ function Bezier(3,t,w[]):
-

Controlling Bézier curvatures, part 2: Rational Béziers

+

+ Controlling Bézier curvatures, part 2: Rational Béziers +

We can further control Bézier curves by "rationalising" them: that is, adding a "ratio" value in addition to the weight value discussed @@ -1028,8 +1032,8 @@ function Bezier(3,t,w[]):

The function for rational Bézier curves has two more terms:

@@ -1114,7 +1118,7 @@ function RationalBezier(3,t,w[],r[]):
-

The Bézier interval [0,1]

+

The Bézier interval [0,1]

Now that we know the mathematics behind Bézier curves, there's one curious thing that you may have noticed: they always run from @@ -1206,7 +1210,7 @@ function RationalBezier(3,t,w[],r[]):

-

Bézier curvatures as matrix operations

+

Bézier curvatures as matrix operations

We can also represent Bézier curves as matrix operations, by expressing the Bézier formula as a polynomial basis function and a @@ -1339,7 +1343,7 @@ function RationalBezier(3,t,w[],r[]):

-

de Casteljau's algorithm

+

de Casteljau's algorithm

If we want to draw Bézier curves, we can run through all values of t from 0 to 1 and then compute the weighted basis @@ -1439,7 +1443,7 @@ function RationalBezier(3,t,w[],r[]):

-

Simplified drawing

+

Simplified drawing

We can also simplify the drawing process by "sampling" the curve at certain points, and then joining those points up with straight @@ -1509,7 +1513,7 @@ function RationalBezier(3,t,w[],r[]):

-

Splitting curves

+

Splitting curves

Using de Casteljau's algorithm, we can also find all the points we need to split up a Bézier curve into two, smaller curves, which @@ -1571,7 +1575,7 @@ function drawCurve(points[], t): />

-

Splitting curves using matrices

+

Splitting curves using matrices

Another way to split curves is to exploit the matrix representation of a Bézier curve. In the section on matrices, @@ -1871,7 +1875,7 @@ function drawCurve(points[], t):

-

Lowering and elevating curve order

+

Lowering and elevating curve order

One interesting property of Bézier curves is that an nth order curve can always be perfectly @@ -2110,7 +2114,7 @@ function drawCurve(points[], t):

-

Derivatives

+

Derivatives

There's a number of useful things that you can do with Bézier curves based on their derivative, and one of the more amusing observations @@ -2235,8 +2239,8 @@ function drawCurve(points[], t):

@@ -2254,16 +2258,16 @@ function drawCurve(points[], t):

And that's just a summation of lower order curves:

@@ -2324,7 +2328,7 @@ function drawCurve(points[], t):

-

Tangents and normals

+

Tangents and normals

If you want to move objects along a curve, or "away from" a curve, the two vectors you're most interested in are the tangent vector and @@ -2460,7 +2464,7 @@ function drawCurve(points[], t):

-

Working with 3D normals

+

Working with 3D normals

Before we move on to the next section we need to spend a little bit of time on the difference between 2D and 3D. While for many things @@ -2721,7 +2725,7 @@ function drawCurve(points[], t):

-

Component functions

+

Component functions

One of the first things people run into when they start using Bézier curves in their own programs is "I know how to draw the curve, but @@ -2766,7 +2770,7 @@ function drawCurve(points[], t): />

-

Finding extremities: root finding

+

Finding extremities: root finding

Now that we understand (well, superficially anyway) the component functions, we can find the extremities of our Bézier curve by @@ -3100,7 +3104,7 @@ function getCubicRoots(pa, pb, pc, pd) { />

-

Bounding boxes

+

Bounding boxes

If we have the extremities, and the start/end points, a simple for loop that tests for min/max values for x and y means we have the @@ -3147,7 +3151,7 @@ function getCubicRoots(pa, pb, pc, pd) {

-

Aligning curves

+

Aligning curves

While there are an incredible number of curves we can define by varying the x- and y-coordinates for the control points, not all @@ -3169,8 +3173,8 @@ function getCubicRoots(pa, pb, pc, pd) {

@@ -3181,8 +3185,8 @@ function getCubicRoots(pa, pb, pc, pd) {

@@ -3193,16 +3197,16 @@ function getCubicRoots(pa, pb, pc, pd) {

If we drop all the zero-terms, this gives us:

@@ -3224,7 +3228,7 @@ function getCubicRoots(pa, pb, pc, pd) { />
-

Tight boxes

+

Tight boxes

With our knowledge of bounding boxes, and curve alignment, We can now form the "tight" bounding box for curves. We first align our @@ -3258,7 +3262,7 @@ function getCubicRoots(pa, pb, pc, pd) {

-

Curve inflections

+

Curve inflections

Now that we know how to align a curve, there's one more thing we can calculate: inflection points. Imagine we have a variable size circle @@ -3417,7 +3421,7 @@ function getCubicRoots(pa, pb, pc, pd) { />

-

Canonical form (for cubic curves)

+

Canonical form (for cubic curves)

While quadratic curves are relatively simple curves to analyze, the same cannot be said of the cubic curve. As a curvature is controlled @@ -3794,7 +3798,7 @@ function getCubicRoots(pa, pb, pc, pd) { />

-

Finding Y, given X

+

Finding Y, given X

One common task that pops up in things like CSS work, or parametric equalisers, or image leveling, or any other number of applications @@ -3919,7 +3923,7 @@ if (roots.length > 0) { />

-

Arc length

+

Arc length

How long is a Bézier curve? As it turns out, that's not actually an easy question, because the answer requires maths that —much like @@ -4135,7 +4139,7 @@ if (roots.length > 0) { />

-

Approximated arc length

+

Approximated arc length

Sometimes, we don't actually need the precision of a true arc length, and we can get away with simply computing the approximate @@ -4173,7 +4177,7 @@ if (roots.length > 0) {

-

Curvature of a curve

+

Curvature of a curve

Imagine we have two curves, and we want to line them in up in a way that "looks right". What would we use as metric to let a computer @@ -4372,7 +4376,9 @@ if (roots.length > 0) { />

-

Tracing a curve at fixed distance intervals

+

+ Tracing a curve at fixed distance intervals +

Say you want to draw a curve with a dashed line, rather than a solid line, or you want to move something along the curve at fixed @@ -4457,7 +4463,7 @@ if (roots.length > 0) {

-

Intersections

+

Intersections

Let's look at some more things we will want to do with Bézier curves. Almost immediately after figuring out how to get bounding @@ -4567,7 +4573,7 @@ lli = function(line1, line2):

-

Curve/curve intersection

+

Curve/curve intersection

Using de Casteljau's algorithm to split the curve we can now implement curve/curve intersection finding using a "divide and @@ -4652,7 +4658,7 @@ lli = function(line1, line2):

-

The projection identity

+

The projection identity

De Casteljau's algorithm is the pivotal algorithm when it comes to Bézier curves. You can use it not just to split curves, but also to @@ -4852,7 +4858,7 @@ lli = function(line1, line2):

-

Manipulating a curve

+

Manipulating a curve

Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, @@ -4938,7 +4944,7 @@ lli = function(line1, line2):

And that's cubic curve manipulation.

-

Creating a curve from three points

+

Creating a curve from three points

Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, @@ -4999,7 +5005,7 @@ lli = function(line1, line2):

-

Curve fitting

+

Curve fitting

Given the previous section, one question you might have is "what if I don't want to guess t values?". After all, plenty of @@ -5460,7 +5466,9 @@ lli = function(line1, line2):

-

Bézier curves and Catmull-Rom curves

+

+ Bézier curves and Catmull-Rom curves +

Taking an excursion to different splines, the other common design curve is the @@ -5815,7 +5823,11 @@ lli = function(line1, line2): />

-

Creating a Catmull-Rom curve from three points

+

+ Creating a Catmull-Rom curve from three points +

Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to @@ -5869,7 +5881,7 @@ lli = function(line1, line2):

-

Forming poly-Bézier curves

+

Forming poly-Bézier curves

Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only @@ -6039,7 +6051,7 @@ lli = function(line1, line2):

-

Boolean shape operations

+

Boolean shape operations

We can apply the topics covered so far in this primer to effect boolean shape operations: getting the union, intersection, or @@ -6177,7 +6189,9 @@ lli = function(line1, line2):

-

Projecting a point onto a Bézier curve

+

+ Projecting a point onto a Bézier curve +

Say we have a Bézier curve and some point, not on the curve, of which we want to know which t value on the curve gives @@ -6242,7 +6256,7 @@ lli = function(line1, line2): />

-

Curve offsetting

+

Curve offsetting

Perhaps you're like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some @@ -6450,7 +6464,7 @@ lli = function(line1, line2):

-

Graduated curve offsetting

+

Graduated curve offsetting

What if we want to do graduated offsetting, starting at some distance s but ending at some other distance @@ -6517,7 +6531,7 @@ lli = function(line1, line2): />

-

Circles and quadratic Bézier curves

+

Circles and quadratic Bézier curves

Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is @@ -6755,7 +6769,7 @@ lli = function(line1, line2):

-

Circles and cubic Bézier curves

+

Circles and cubic Bézier curves

In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are @@ -7090,7 +7104,11 @@ lli = function(line1, line2): />

-

Approximating Bézier curves with circular arcs

+

+ Approximating Bézier curves with circular arcs +

Let's look at doing the exact opposite of the previous section: rather than approximating circular arc using Bézier curves, let's @@ -7274,7 +7292,7 @@ lli = function(line1, line2):

-

B-Splines

+

B-Splines

No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. @@ -7825,12 +7843,12 @@ for(let L = 1; L <= order; L++) { * PLEASE DO NOT LOCALISE THIS FILE * * I can't respond to questions that aren't asked in English, so this is one of - * the few cases where there is a content.en-GB.md but you shouldn't change it. + * the few cases where there is a content.en-GB.md but you should not localize it. * * ----------------------------------------------------------------------------- */ -

Comments and questions

+

Comments and questions

First off, if you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering diff --git a/ja-JP/index.html b/ja-JP/index.html index 0a0e432c..575b89f1 100644 --- a/ja-JP/index.html +++ b/ja-JP/index.html @@ -399,7 +399,7 @@

-

バッとした導入

+

バッとした導入

まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。

@@ -447,7 +447,9 @@

-

ではベジエ曲線はどうやってできるのでしょう？

+

+ ではベジエ曲線はどうやってできるのでしょう？ +

ベジエ曲線がどのように動くのか、点を触ってみて感覚が摑めたかもしれません。では、実際のところベジエ曲線とはいったい何でしょうか？これを説明する方法は2通りありますが、どちらの説明でも行き着く先はまったく同じです。一方は複雑な数学を使うのに対し、もう一方はとても簡単です。というわけで……簡単な説明の方から始めましょう。

@@ -496,7 +498,7 @@

-

ベジエ曲線の数学

+

ベジエ曲線の数学

ベジエ曲線は「パラメトリック」関数の一種です。数学的に言えば、パラメトリック関数というのはインチキです。というのも、「関数」はきっちり定義された用語であり、いくつかの入力を1つの出力に対応させる写像を表すものだからです。いくつかの数値を入れると、1つの数値が出てきます。入れる数値が変わっても、出てくる数値はやはり1つだけです。パラメトリック関数はインチキです。基本的には「じゃあわかった、値を複数個出したいから、関数を複数個使うことにするよ」ということです。例として、ある値xに何らかの操作を行い、別の値へと写す関数があるとします。

@@ -607,9 +609,9 @@

@@ -693,7 +695,7 @@ function Bezier(3,t):

-

ベジエ曲線の曲率の制御

+

ベジエ曲線の曲率の制御

ベジエ曲線は（すべての「スプライン」と同様に）補間関数です。これは点の集合を受け取って、それらの点のどこか「内側」の値を生成するということです。（このことから、制御点同士を結んで輪郭をつくったとき、その外側に位置する点は決して生成されないことがわかります。なお、この輪郭を曲線の「包」と呼びます。お役立ち情報でした！）実際に、補間関数によって生成された値に対する、各点の寄与の大きさを可視化することができますが、これを見れば、ベジエ曲線のどの場所でどの点が重要になるのかがわかります。

@@ -736,8 +738,8 @@ function Bezier(3,t):

@@ -779,7 +781,11 @@ function Bezier(3,t,w[]):
-

Controlling Bézier curvatures, part 2: Rational Béziers

+

+ Controlling Bézier curvatures, part 2: Rational Béziers +

We can further control Bézier curves by "rationalising" them: that is, adding a "ratio" value in addition to the weight value discussed @@ -800,8 +806,8 @@ function Bezier(3,t,w[]):

The function for rational Bézier curves has two more terms:

@@ -886,7 +892,7 @@ function RationalBezier(3,t,w[],r[]):
-

ベジエ曲線の区間 [0,1]

+

ベジエ曲線の区間 [0,1]

ここまでの説明で、ベジエ曲線の裏側にある数学がわかりました。しかし、気づいているかもしれませんが、ひとつ引っかかる点があります。ベジエ曲線はいつもt=0からt=1の間を動いていますが、どうしてこの特定の区間なのでしょう？

@@ -951,7 +957,7 @@ function RationalBezier(3,t,w[],r[]):

-

行列演算としてのベジエ曲線の曲率

+

行列演算としてのベジエ曲線の曲率

ベジエ曲線は、行列演算の形でも表現することができます。ベジエ曲線の式を多項式基底と係数行列で表し、実際の座標も行列として表現するのです。これがどういうことを意味しているのか、3次ベジエ曲線について見てみましょう。

@@ -1063,7 +1069,7 @@ function RationalBezier(3,t,w[],r[]):

-

ド・カステリョのアルゴリズム

+

ド・カステリョのアルゴリズム

ベジエ曲線を描く場合は、tの値を0から1まで動かしながら重みつき基底関数を計算し、プロットに必要なx/yの値を求めます。しかし、曲線が複雑になればなるほど、計算コストがかかるようになってしまいます。そこでその代わりに、「ド・カステリョのアルゴリズム」を使って曲線を描くこともできます。こちらは幾何学的に曲線を描く方法で、実装も非常に簡単です。実際、鉛筆と定規を使って手描きすることもできるほど、とても簡単な方法なのです。

@@ -1136,7 +1142,7 @@ function RationalBezier(3,t,w[],r[]): />
-

簡略化した描画

+

簡略化した描画

曲線を複数点で「サンプリング」し、さらにそれを直線で繫げてしまえば、描画の手順を簡略化することができます。単なる一連の直線、つまり「平坦」な線へと曲線を単純化するので、この処理は「平坦化」という名前で知られています。

@@ -1185,7 +1191,7 @@ function RationalBezier(3,t,w[],r[]):
-

曲線の分割

+

曲線の分割

ベジエ曲線を分割して、繫ぎ合わせたときに元に戻るような小さい2曲線にしたい場合にも、ド・カステリョのアルゴリズムを使えば、これに必要な点をすべて求めることができます。ある値tに対してド・カステリョの骨格を組み立てると、そのtで曲線を分割する際に必要になる点がすべて得られます。骨格内部の点のうち、曲線上の点から見て手前側にある点によって一方の曲線が定義され、向こう側にある点によってもう一方の曲線が定義されます。

@@ -1232,7 +1238,7 @@ function drawCurve(points[], t): />
-

行列による曲線の分割

+

行列による曲線の分割

曲線分割には、ベジエ曲線の行列表現を利用する方法もあります。

-

曲線の次数下げと次数上げ

+

曲線の次数下げと次数上げ

ベジエ曲線のおもしろい性質のひとつに、「n次の曲線は常に、n+1次の曲線で完璧に表すことができる」というものがあります。このとき、制御点は新しいものになります。

@@ -1526,7 +1532,7 @@ function drawCurve(points[], t):

-

Derivatives

+

Derivatives

There's a number of useful things that you can do with Bézier curves based on their derivative, and one of the more amusing observations @@ -1651,8 +1657,8 @@ function drawCurve(points[], t):

@@ -1670,16 +1676,16 @@ function drawCurve(points[], t):

And that's just a summation of lower order curves:

@@ -1740,7 +1746,7 @@ function drawCurve(points[], t):

-

Tangents and normals

+

Tangents and normals

If you want to move objects along a curve, or "away from" a curve, the two vectors you're most interested in are the tangent vector and @@ -1876,7 +1882,7 @@ function drawCurve(points[], t):

-

Working with 3D normals

+

Working with 3D normals

Before we move on to the next section we need to spend a little bit of time on the difference between 2D and 3D. While for many things @@ -2137,7 +2143,7 @@ function drawCurve(points[], t):

-

Component functions

+

Component functions

One of the first things people run into when they start using Bézier curves in their own programs is "I know how to draw the curve, but @@ -2182,7 +2188,7 @@ function drawCurve(points[], t): />

-

Finding extremities: root finding

+

Finding extremities: root finding

Now that we understand (well, superficially anyway) the component functions, we can find the extremities of our Bézier curve by @@ -2516,7 +2522,7 @@ function getCubicRoots(pa, pb, pc, pd) { />

-

Bounding boxes

+

Bounding boxes

If we have the extremities, and the start/end points, a simple for loop that tests for min/max values for x and y means we have the @@ -2563,7 +2569,7 @@ function getCubicRoots(pa, pb, pc, pd) {

-

Aligning curves

+

Aligning curves

While there are an incredible number of curves we can define by varying the x- and y-coordinates for the control points, not all @@ -2585,8 +2591,8 @@ function getCubicRoots(pa, pb, pc, pd) {

@@ -2597,8 +2603,8 @@ function getCubicRoots(pa, pb, pc, pd) {

@@ -2609,16 +2615,16 @@ function getCubicRoots(pa, pb, pc, pd) {

If we drop all the zero-terms, this gives us:

@@ -2640,7 +2646,7 @@ function getCubicRoots(pa, pb, pc, pd) { />
-

Tight boxes

+

Tight boxes

With our knowledge of bounding boxes, and curve alignment, We can now form the "tight" bounding box for curves. We first align our @@ -2674,7 +2680,7 @@ function getCubicRoots(pa, pb, pc, pd) {

-

Curve inflections

+

Curve inflections

Now that we know how to align a curve, there's one more thing we can calculate: inflection points. Imagine we have a variable size circle @@ -2833,7 +2839,7 @@ function getCubicRoots(pa, pb, pc, pd) { />

-

Canonical form (for cubic curves)

+

Canonical form (for cubic curves)

While quadratic curves are relatively simple curves to analyze, the same cannot be said of the cubic curve. As a curvature is controlled @@ -3210,7 +3216,7 @@ function getCubicRoots(pa, pb, pc, pd) { />

-

Finding Y, given X

+

Finding Y, given X

One common task that pops up in things like CSS work, or parametric equalisers, or image leveling, or any other number of applications @@ -3335,7 +3341,7 @@ if (roots.length > 0) { />

-

Arc length

+

Arc length

How long is a Bézier curve? As it turns out, that's not actually an easy question, because the answer requires maths that —much like @@ -3551,7 +3557,7 @@ if (roots.length > 0) { />

-

Approximated arc length

+

Approximated arc length

Sometimes, we don't actually need the precision of a true arc length, and we can get away with simply computing the approximate @@ -3589,7 +3595,7 @@ if (roots.length > 0) {

-

Curvature of a curve

+

Curvature of a curve

Imagine we have two curves, and we want to line them in up in a way that "looks right". What would we use as metric to let a computer @@ -3788,7 +3794,9 @@ if (roots.length > 0) { />

-

Tracing a curve at fixed distance intervals

+

+ Tracing a curve at fixed distance intervals +

Say you want to draw a curve with a dashed line, rather than a solid line, or you want to move something along the curve at fixed @@ -3873,7 +3881,7 @@ if (roots.length > 0) {

-

Intersections

+

Intersections

Let's look at some more things we will want to do with Bézier curves. Almost immediately after figuring out how to get bounding @@ -3983,7 +3991,7 @@ lli = function(line1, line2):

-

Curve/curve intersection

+

Curve/curve intersection

Using de Casteljau's algorithm to split the curve we can now implement curve/curve intersection finding using a "divide and @@ -4068,7 +4076,7 @@ lli = function(line1, line2):

-

The projection identity

+

The projection identity

De Casteljau's algorithm is the pivotal algorithm when it comes to Bézier curves. You can use it not just to split curves, but also to @@ -4268,7 +4276,7 @@ lli = function(line1, line2):

-

Manipulating a curve

+

Manipulating a curve

Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, @@ -4354,7 +4362,7 @@ lli = function(line1, line2):

And that's cubic curve manipulation.

-

Creating a curve from three points

+

Creating a curve from three points

Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, @@ -4415,7 +4423,7 @@ lli = function(line1, line2):

-

Curve fitting

+

Curve fitting

Given the previous section, one question you might have is "what if I don't want to guess t values?". After all, plenty of @@ -4876,7 +4884,9 @@ lli = function(line1, line2):

-

Bézier curves and Catmull-Rom curves

+

+ Bézier curves and Catmull-Rom curves +

Taking an excursion to different splines, the other common design curve is the @@ -5231,7 +5241,11 @@ lli = function(line1, line2): />

-

Creating a Catmull-Rom curve from three points

+

+ Creating a Catmull-Rom curve from three points +

Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to @@ -5285,7 +5299,7 @@ lli = function(line1, line2):

-

Forming poly-Bézier curves

+

Forming poly-Bézier curves

Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only @@ -5455,7 +5469,7 @@ lli = function(line1, line2):

-

Boolean shape operations

+

Boolean shape operations

We can apply the topics covered so far in this primer to effect boolean shape operations: getting the union, intersection, or @@ -5593,7 +5607,9 @@ lli = function(line1, line2):

-

Projecting a point onto a Bézier curve

+

+ Projecting a point onto a Bézier curve +

Say we have a Bézier curve and some point, not on the curve, of which we want to know which t value on the curve gives @@ -5658,7 +5674,7 @@ lli = function(line1, line2): />

-

Curve offsetting

+

Curve offsetting

Perhaps you're like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some @@ -5866,7 +5882,7 @@ lli = function(line1, line2):

-

Graduated curve offsetting

+

Graduated curve offsetting

What if we want to do graduated offsetting, starting at some distance s but ending at some other distance @@ -5933,7 +5949,7 @@ lli = function(line1, line2): />

-

Circles and quadratic Bézier curves

+

Circles and quadratic Bézier curves

Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is @@ -6171,7 +6187,7 @@ lli = function(line1, line2):

-

Circles and cubic Bézier curves

+

Circles and cubic Bézier curves

In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are @@ -6506,7 +6522,11 @@ lli = function(line1, line2): />

-

Approximating Bézier curves with circular arcs

+

+ Approximating Bézier curves with circular arcs +

Let's look at doing the exact opposite of the previous section: rather than approximating circular arc using Bézier curves, let's @@ -6690,7 +6710,7 @@ lli = function(line1, line2):

-

B-Splines

+

B-Splines

No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. @@ -7241,12 +7261,12 @@ for(let L = 1; L <= order; L++) { * PLEASE DO NOT LOCALISE THIS FILE * * I can't respond to questions that aren't asked in English, so this is one of - * the few cases where there is a content.en-GB.md but you shouldn't change it. + * the few cases where there is a content.en-GB.md but you should not localize it. * * ----------------------------------------------------------------------------- */ -

Comments and questions

+

Comments and questions

First off, if you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering diff --git a/placeholder-style.css b/placeholder-style.css index 942d161a..806fc1c6 100644 --- a/placeholder-style.css +++ b/placeholder-style.css @@ -29,6 +29,11 @@ h1 { margin-right: 1em; } +#chapters section > h1 > a { + text-decoration: none; + color: inherit; +} + graphics-element { background: #e8e8e8; } diff --git a/tools/build/create-index-page.js b/tools/build/create-index-page.js index 075a20ca..ec5bb450 100644 --- a/tools/build/create-index-page.js +++ b/tools/build/create-index-page.js @@ -29,7 +29,10 @@ export default async function createIndexPages( if (content) { let title = content.match(/

([^<]+)<\/h1>/)[1]; toc[section] = `
  • ${title}
    • `; - return `
    ${content}
    `; + // hyperlinked section titles please + return `
    ${content + .replace(`

    `, `

    `) + .replace(`

    `, `

    `)}
    `; } return ``; }); diff --git a/tools/build/latex/latex-to-svg.js b/tools/build/latex/latex-to-svg.js index be43898f..9370b127 100644 --- a/tools/build/latex/latex-to-svg.js +++ b/tools/build/latex/latex-to-svg.js @@ -24,6 +24,8 @@ fs.ensureDirSync(sourceDir); * in. */ export default async function latexToSVG(latex, chapter, localeStrings, block) { + latex = colorPreProcess(latex); + const locale = localeStrings.getCurrentLocale(); const hash = createHash(`md5`).update(latex).digest(`hex`); @@ -149,3 +151,15 @@ function runCmd(cmd, hash) { process.exit(1); } } + +// This function converst things like RED[a] into real LaTeX. +function colorPreProcess(input) { + var regexp = new RegExp(`([A-Z]+)\\[([^\\]]+)\\]`, `g`); + var output = input.replace(regexp, function (_, color, content) { + if (content.indexOf(` `) !== -1) { + content = ` ${content}`; + } + return `{\\color{${color.toLowerCase()}}${content.replace(/ /g, "\\ ")}}`; + }); + return output; +} diff --git a/zh-CN/index.html b/zh-CN/index.html index 363c0b7e..4754eb61 100644 --- a/zh-CN/index.html +++ b/zh-CN/index.html @@ -388,7 +388,7 @@
    -

    简单介绍

    +

    简单介绍

    让我们有个好的开始：当我们在谈论贝塞尔曲线的时候，所指的就是你在如下图像看到的东西。它们从某些起点开始，到终点结束，并且受到一个或多个的“中间”控制点的影响。本页面上的图形都是可交互的，你可以拖动这些点，看看这些形状在你的操作下会怎么变化。

    @@ -434,7 +434,7 @@

    -

    什么构成了贝塞尔曲线？

    +

    什么构成了贝塞尔曲线？

    操作点的移动，看看曲线的变化，可能让你感受到了贝塞尔曲线是如何表现的。但贝塞尔曲线究竟是什么呢？有两种方式来解释贝塞尔曲线，并且可以证明它们完全相等，但是其中一种用到了复杂的数学，另外一种比较简单。所以...我们先从简单的开始吧：

    @@ -483,7 +483,7 @@

    -

    贝塞尔曲线的数学原理

    +

    贝塞尔曲线的数学原理

    贝塞尔曲线是“参数”方程的一种形式。从数学上讲，参数方程作弊了：“方程”实际上是一个从输入到唯一输出的、良好定义的映射关系。几个输入进来，一个输出返回。改变输入变量，还是只有一个输出值。参数方程在这里作弊了。它们基本上干了这么件事，“好吧，我们想要更多的输出值，所以我们用了多个方程”。举个例子：假如我们有一个方程，通过一些计算，将假设为x的一些值映射到另外的值:

    @@ -592,9 +592,9 @@

    @@ -676,7 +676,7 @@ function Bezier(3,t):

    -

    控制贝塞尔的曲率

    +

    控制贝塞尔的曲率

    贝塞尔曲线是插值方程（就像所有曲线一样），这表示它们取一系列的点，生成一些处于这些点之间的值。（一个推论就是你永远无法生成一个位于这些控制点轮廓线外面的点，更普遍是称为曲线的外壳。这信息很有用！）实际上，我们可以将每个点对方程产生的曲线做出的贡献进行可视化，因此可以看出曲线上哪些点是重要的，它们处于什么位置。

    @@ -719,8 +719,8 @@ function Bezier(3,t):

    @@ -762,7 +762,11 @@ function Bezier(3,t,w[]):
    -

    Controlling Bézier curvatures, part 2: Rational Béziers

    +

    + Controlling Bézier curvatures, part 2: Rational Béziers +

    We can further control Bézier curves by "rationalising" them: that is, adding a "ratio" value in addition to the weight value discussed @@ -783,8 +787,8 @@ function Bezier(3,t,w[]):

    The function for rational Bézier curves has two more terms:

    @@ -869,7 +873,7 @@ function RationalBezier(3,t,w[],r[]):
    -

    贝塞尔区间[0,1]

    +

    贝塞尔区间[0,1]

    既然我们知道了贝塞尔曲线背后的数学原理，你可能会注意到一件奇怪的事：它们都是从t=0到t=1。为什么是这个特殊区间？

    @@ -934,7 +938,7 @@ function RationalBezier(3,t,w[],r[]):

    -

    用矩阵运算来表示贝塞尔曲率

    +

    用矩阵运算来表示贝塞尔曲率

    通过将贝塞尔公式表示成一个多项式基本方程、系数矩阵以及实际的坐标，我们也可以用矩阵运算来表示贝塞尔。让我们看一下这对三次曲线来说有什么含义：

    @@ -1037,7 +1041,7 @@ function RationalBezier(3,t,w[],r[]):

    -

    de Casteljau's 算法

    +

    de Casteljau's 算法

    要绘制贝塞尔曲线，我们可以从0到1遍历t的所有值，计算权重函数，得到需要画的x/y值。但曲线越复杂，计算量也变得越大。我们可以利用“de Casteljau算法"，这是一种几何画法，并且易于实现。实际上，你可以轻易地用笔和尺画出曲线。 @@ -1103,7 +1107,7 @@ function RationalBezier(3,t,w[],r[]):

    -

    简化绘图

    +

    简化绘图

    我们可以简化绘制的过程，先在具体的位置“采样”曲线，然后用线段把这些点连接起来。由于我们是将曲线转换成一系列“平整的”直线，故将这个过程称之为“拉平(flattening)”。

    @@ -1150,7 +1154,7 @@ function RationalBezier(3,t,w[],r[]):
    -

    分割曲线

    +

    分割曲线

    使用 de Casteljau 算法我们也可以将一条贝塞尔曲线分割成两条更小的曲线，二者拼接起来即可形成原来的曲线。当采用某个 @@ -1204,7 +1208,7 @@ function drawCurve(points[], t): />

    -

    Splitting curves using matrices

    +

    Splitting curves using matrices

    Another way to split curves is to exploit the matrix representation of a Bézier curve. In the section on matrices, @@ -1504,7 +1508,7 @@ function drawCurve(points[], t):

    -

    Lowering and elevating curve order

    +

    Lowering and elevating curve order

    One interesting property of Bézier curves is that an nth order curve can always be perfectly @@ -1743,7 +1747,7 @@ function drawCurve(points[], t):

    -

    Derivatives

    +

    Derivatives

    There's a number of useful things that you can do with Bézier curves based on their derivative, and one of the more amusing observations @@ -1868,8 +1872,8 @@ function drawCurve(points[], t):

    @@ -1887,16 +1891,16 @@ function drawCurve(points[], t):

    And that's just a summation of lower order curves:

    @@ -1957,7 +1961,7 @@ function drawCurve(points[], t):

    -

    Tangents and normals

    +

    Tangents and normals

    If you want to move objects along a curve, or "away from" a curve, the two vectors you're most interested in are the tangent vector and @@ -2093,7 +2097,7 @@ function drawCurve(points[], t):

    -

    Working with 3D normals

    +

    Working with 3D normals

    Before we move on to the next section we need to spend a little bit of time on the difference between 2D and 3D. While for many things @@ -2354,7 +2358,7 @@ function drawCurve(points[], t):

    -

    Component functions

    +

    Component functions

    One of the first things people run into when they start using Bézier curves in their own programs is "I know how to draw the curve, but @@ -2399,7 +2403,7 @@ function drawCurve(points[], t): />

    -

    Finding extremities: root finding

    +

    Finding extremities: root finding

    Now that we understand (well, superficially anyway) the component functions, we can find the extremities of our Bézier curve by @@ -2733,7 +2737,7 @@ function getCubicRoots(pa, pb, pc, pd) { />

    -

    Bounding boxes

    +

    Bounding boxes

    If we have the extremities, and the start/end points, a simple for loop that tests for min/max values for x and y means we have the @@ -2780,7 +2784,7 @@ function getCubicRoots(pa, pb, pc, pd) {

    -

    Aligning curves

    +

    Aligning curves

    While there are an incredible number of curves we can define by varying the x- and y-coordinates for the control points, not all @@ -2802,8 +2806,8 @@ function getCubicRoots(pa, pb, pc, pd) {

    @@ -2814,8 +2818,8 @@ function getCubicRoots(pa, pb, pc, pd) {

    @@ -2826,16 +2830,16 @@ function getCubicRoots(pa, pb, pc, pd) {

    If we drop all the zero-terms, this gives us:

    @@ -2857,7 +2861,7 @@ function getCubicRoots(pa, pb, pc, pd) { />
    -

    Tight boxes

    +

    Tight boxes

    With our knowledge of bounding boxes, and curve alignment, We can now form the "tight" bounding box for curves. We first align our @@ -2891,7 +2895,7 @@ function getCubicRoots(pa, pb, pc, pd) {

    -

    Curve inflections

    +

    Curve inflections

    Now that we know how to align a curve, there's one more thing we can calculate: inflection points. Imagine we have a variable size circle @@ -3050,7 +3054,7 @@ function getCubicRoots(pa, pb, pc, pd) { />

    -

    Canonical form (for cubic curves)

    +

    Canonical form (for cubic curves)

    While quadratic curves are relatively simple curves to analyze, the same cannot be said of the cubic curve. As a curvature is controlled @@ -3427,7 +3431,7 @@ function getCubicRoots(pa, pb, pc, pd) { />

    -

    Finding Y, given X

    +

    Finding Y, given X

    One common task that pops up in things like CSS work, or parametric equalisers, or image leveling, or any other number of applications @@ -3552,7 +3556,7 @@ if (roots.length > 0) { />

    -

    Arc length

    +

    Arc length

    How long is a Bézier curve? As it turns out, that's not actually an easy question, because the answer requires maths that —much like @@ -3768,7 +3772,7 @@ if (roots.length > 0) { />

    -

    Approximated arc length

    +

    Approximated arc length

    Sometimes, we don't actually need the precision of a true arc length, and we can get away with simply computing the approximate @@ -3806,7 +3810,7 @@ if (roots.length > 0) {

    -

    Curvature of a curve

    +

    Curvature of a curve

    Imagine we have two curves, and we want to line them in up in a way that "looks right". What would we use as metric to let a computer @@ -4005,7 +4009,9 @@ if (roots.length > 0) { />

    -

    Tracing a curve at fixed distance intervals

    +

    + Tracing a curve at fixed distance intervals +

    Say you want to draw a curve with a dashed line, rather than a solid line, or you want to move something along the curve at fixed @@ -4090,7 +4096,7 @@ if (roots.length > 0) {

    -

    Intersections

    +

    Intersections

    Let's look at some more things we will want to do with Bézier curves. Almost immediately after figuring out how to get bounding @@ -4200,7 +4206,7 @@ lli = function(line1, line2):

    -

    Curve/curve intersection

    +

    Curve/curve intersection

    Using de Casteljau's algorithm to split the curve we can now implement curve/curve intersection finding using a "divide and @@ -4285,7 +4291,7 @@ lli = function(line1, line2):

    -

    The projection identity

    +

    The projection identity

    De Casteljau's algorithm is the pivotal algorithm when it comes to Bézier curves. You can use it not just to split curves, but also to @@ -4485,7 +4491,7 @@ lli = function(line1, line2):

    -

    Manipulating a curve

    +

    Manipulating a curve

    Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, @@ -4571,7 +4577,7 @@ lli = function(line1, line2):

    And that's cubic curve manipulation.

    -

    Creating a curve from three points

    +

    Creating a curve from three points

    Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, @@ -4632,7 +4638,7 @@ lli = function(line1, line2):

    -

    Curve fitting

    +

    Curve fitting

    Given the previous section, one question you might have is "what if I don't want to guess t values?". After all, plenty of @@ -5093,7 +5099,9 @@ lli = function(line1, line2):

    -

    Bézier curves and Catmull-Rom curves

    +

    + Bézier curves and Catmull-Rom curves +

    Taking an excursion to different splines, the other common design curve is the @@ -5448,7 +5456,11 @@ lli = function(line1, line2): />

    -

    Creating a Catmull-Rom curve from three points

    +

    + Creating a Catmull-Rom curve from three points +

    Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to @@ -5502,7 +5514,7 @@ lli = function(line1, line2):

    -

    Forming poly-Bézier curves

    +

    Forming poly-Bézier curves

    Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only @@ -5672,7 +5684,7 @@ lli = function(line1, line2):

    -

    Boolean shape operations

    +

    Boolean shape operations

    We can apply the topics covered so far in this primer to effect boolean shape operations: getting the union, intersection, or @@ -5810,7 +5822,9 @@ lli = function(line1, line2):

    -

    Projecting a point onto a Bézier curve

    +

    + Projecting a point onto a Bézier curve +

    Say we have a Bézier curve and some point, not on the curve, of which we want to know which t value on the curve gives @@ -5875,7 +5889,7 @@ lli = function(line1, line2): />

    -

    Curve offsetting

    +

    Curve offsetting

    Perhaps you're like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some @@ -6083,7 +6097,7 @@ lli = function(line1, line2):

    -

    Graduated curve offsetting

    +

    Graduated curve offsetting

    What if we want to do graduated offsetting, starting at some distance s but ending at some other distance @@ -6150,7 +6164,7 @@ lli = function(line1, line2): />

    -

    Circles and quadratic Bézier curves

    +

    Circles and quadratic Bézier curves

    Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is @@ -6388,7 +6402,7 @@ lli = function(line1, line2):

    -

    Circles and cubic Bézier curves

    +

    Circles and cubic Bézier curves

    In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are @@ -6723,7 +6737,11 @@ lli = function(line1, line2): />

    -

    Approximating Bézier curves with circular arcs

    +

    + Approximating Bézier curves with circular arcs +

    Let's look at doing the exact opposite of the previous section: rather than approximating circular arc using Bézier curves, let's @@ -6907,7 +6925,7 @@ lli = function(line1, line2):

    -

    B-Splines

    +

    B-Splines

    No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. @@ -7458,12 +7476,12 @@ for(let L = 1; L <= order; L++) { * PLEASE DO NOT LOCALISE THIS FILE * * I can't respond to questions that aren't asked in English, so this is one of - * the few cases where there is a content.en-GB.md but you shouldn't change it. + * the few cases where there is a content.en-GB.md but you should not localize it. * * ----------------------------------------------------------------------------- */ -

    Comments and questions

    +

    Comments and questions

    First off, if you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering