diff --git a/chapters/control/content.en-GB.md b/chapters/control/content.en-GB.md index 6b9b2d3d..7e4425b9 100644 --- a/chapters/control/content.en-GB.md +++ b/chapters/control/content.en-GB.md @@ -2,7 +2,7 @@ Bézier curves are, like all "splines", interpolation functions. This means that they take a set of points, and generate values somewhere "between" those points. (One of the consequences of this is that you'll never be able to generate a point that lies outside the outline for the control points, commonly called the "hull" for the curve. Useful information!). In fact, we can visualize how each point contributes to the value generated by the function, so we can see which points are important, where, in the curve. -The following graphs show the interpolation functions for quadratic and cubic curves, with "S" being the strength of a point's contribution to the total sum of the Bézier function. Click or click-drag to see the interpolation percentages for each curve-defining point at a specific t value. +The following graphs show the interpolation functions for quadratic and cubic curves, with "S" being the strength of a point's contribution to the total sum of the Bézier function. Click-and-drag to see the interpolation percentages for each curve-defining point at a specific t value.
diff --git a/chapters/control/content.ja-JP.md b/chapters/control/content.ja-JP.md index f02cb05c..82447736 100644 --- a/chapters/control/content.ja-JP.md +++ b/chapters/control/content.ja-JP.md @@ -2,7 +2,7 @@ ベジエ曲線は（すべての「スプライン」と同様に）補間関数です。これは点の集合を受け取って、それらの点のどこか「内側」の値を生成するということです。（このことから、制御点同士を結んで輪郭をつくったとき、その外側に位置する点は決して生成されないことがわかります。なお、この輪郭を曲線の「包」と呼びます。お役立ち情報でした！）実際に、補間関数によって生成された値に対する、各点の寄与の大きさを可視化することができますが、これを見れば、ベジエ曲線のどの場所でどの点が重要になるのかがわかります。 -下のグラフは、2次ベジエ曲線や3次ベジエ曲線の補間関数を表しています。ここでSは、ベジエ関数全体に対しての、その点の寄与の大きさを示します。あるtにおいて、ベジエ曲線を定義する各点の補間率がどのようになっているのか、クリックやドラッグをして確かめてみてください。 +下のグラフは、2次ベジエ曲線や3次ベジエ曲線の補間関数を表しています。ここでSは、ベジエ関数全体に対しての、その点の寄与の大きさを示します。あるtにおいて、ベジエ曲線を定義する各点の補間率がどのようになっているのか、クリックドラッグをして確かめてみてください。
diff --git a/chapters/control/content.zh-CN.md b/chapters/control/content.zh-CN.md index cdc8e54e..cc51ae43 100644 --- a/chapters/control/content.zh-CN.md +++ b/chapters/control/content.zh-CN.md @@ -2,7 +2,7 @@ 贝塞尔曲线是插值方程（就像所有曲线一样），这表示它们取一系列的点，生成一些处于这些点之间的值。（一个推论就是你永远无法生成一个位于这些控制点轮廓线外面的点，更普遍是称为曲线的外壳。这信息很有用！）实际上，我们可以将每个点对方程产生的曲线做出的贡献进行可视化，因此可以看出曲线上哪些点是重要的，它们处于什么位置。 -下面的图形显示了二次曲线和三次曲线的差值方程，“S”代表了点对贝塞尔方程总和的贡献。点击或拖动点来看看在特定的t值时，每个曲线定义的点的插值百分比。 +下面的图形显示了二次曲线和三次曲线的差值方程，“S”代表了点对贝塞尔方程总和的贡献。点击拖动点来看看在特定的t值时，每个曲线定义的点的插值百分比。
diff --git a/chapters/weightcontrol/content.en-GB.md b/chapters/weightcontrol/content.en-GB.md index 73232e8c..0b0c494d 100644 --- a/chapters/weightcontrol/content.en-GB.md +++ b/chapters/weightcontrol/content.en-GB.md @@ -11,27 +11,21 @@ Adding these ratio values to the regular Bézier curve function is fairly easy. The function for rational Bézier curves has two more terms: \[ - Rational\ Bézier(n,t) = \left ( \sum_{i=0}^{n} \binom{n}{i} \cdot (1-t)^{n-i} \cdot t^{i} \cdot w_i \cdot BLUE[ratio_i] \right ) \cdot BLUE[\frac{ 1 }{ Basis_{(n,t)} }] + Rational\ Bézier(n,t) = \frac{ \sum_{i=0}^{n} \binom{n}{i} \cdot (1-t)^{n-i} \cdot t^{i} \cdot w_i \cdot BLUE[ratio_i] }{ BLUE[ \sum_{i=0}^{n} \binom{n}{i} \cdot (1-t)^{n-i} \cdot t^{i} \cdot ratio_i ] } \] -In this, the first new term represents the ratio for each coordinate, as a multiplication factor. If our ratio values are [1, 0.5, 0.5, 1] then ratio0 = 1, ratio1 = 0.5, and so on. The second term then corrects for all those multiplications by dividing the total value by the "basis" value of the Bézier curve, i.e. the value we get by computing the curve without any weighting at (but _with_ ratios): +In this, the first new term represents the ratio for each coordinate, as a multiplication factor. If our ratio values are [1, 0.5, 0.5, 1] then ratio0 = 1, ratio1 = 0.5, and so on. The second term then corrects for all those multiplications by dividing the total value by the "basis" value of the Bézier curve, i.e. the value we get by computing the curve without any weighting (but _with_ ratios): -\[ - Basis_{n,t} = \sum_{i=0}^{n} \binom{n}{i} \cdot (1-t)^{n-i} \cdot t^{i} \cdot ratio_i -\] +So what does this actually do? Let's look at the effect of "rationalising" our Bézier curves by interacting with the curve and ratios. The following graphic shows the curve from the previous section, enriched with ratio factors: the closer to zero we set one or more terms, the less relative influence the associated coordinate exerts on the curve (and of course the higher we set them, the more influence they have). -So what does this actually do? + + ratio 1 1.0
+ ratio 2 1.0
+ ratio 3 1.0
+ ratio 4 1.0 + -Let's look at the effect of "rationalising" our Bézier curves by interacting with the curve and ratios. The following graphic shows the curve from the previous section, enriched with ratio factors: the closer to zero we set one or more terms, the less relative influence the associated coordinates exert on the curve (and of course the higher we set them, the more influence they have). - - - - You can think of the ratio values as each coordinate's "gravity": the higher the gravity, the closer to that coordinate the curve will want to be. You'll also notice that if you simply increase or decrease all the ratios by the same amount, nothing changes... much like with gravity, if the relative strengths stay the same, nothing really changes. The values define each coordinate's influence _relative to all other points_. +You can think of the ratio values as each coordinate's "gravity": the higher the gravity, the closer to that coordinate the curve will want to be. You'll also notice that if you simply increase or decrease all the ratios by the same amount, nothing changes... much like with gravity, if the relative strengths stay the same, nothing really changes. The values define each coordinate's influence _relative to all other points_.
diff --git a/chapters/weightcontrol/rational.js b/chapters/weightcontrol/rational.js new file mode 100644 index 00000000..94f3c35d --- /dev/null +++ b/chapters/weightcontrol/rational.js @@ -0,0 +1,30 @@ +setup() { + this.curve = Bezier.defaultCubic(this); + setMovable(this.curve.points); + + const inputs = findAll(`input[type=range]`); + if (inputs) { + const ratios = inputs.map(i => parseFloat(i.value)); + this.curve.setRatios(ratios); + inputs.forEach((input,pos) => { + input.listen([`input`], evt => { + evt.target.nextSibling.textContent = ratios[pos] = parseFloat(evt.target.value); + this.curve.update(); + this.redraw(); + }); + }) + } + } + + draw() { + clear(); + const curve = this.curve; + curve.drawSkeleton(); + curve.drawCurve(); + curve.drawPoints(); + } + + onMouseMove() { + this.curve.update(); + redraw(); + } diff --git a/images/chapters/introduction/8d7391688575c8c588ea741ada7b893e.png b/images/chapters/introduction/8d7391688575c8c588ea741ada7b893e.png index 3aecf69e..91c110ec 100644 Binary files a/images/chapters/introduction/8d7391688575c8c588ea741ada7b893e.png and b/images/chapters/introduction/8d7391688575c8c588ea741ada7b893e.png differ diff --git a/images/chapters/introduction/c0aa6126567320c80a3039a47edf994a.png b/images/chapters/introduction/c0aa6126567320c80a3039a47edf994a.png index eb125732..51fb9cc2 100644 Binary files a/images/chapters/introduction/c0aa6126567320c80a3039a47edf994a.png and b/images/chapters/introduction/c0aa6126567320c80a3039a47edf994a.png differ diff --git a/images/chapters/weightcontrol/1128afb7511e00ad4c5e8c0628204b56.png b/images/chapters/weightcontrol/1128afb7511e00ad4c5e8c0628204b56.png new file mode 100644 index 00000000..51fb9cc2 Binary files /dev/null and b/images/chapters/weightcontrol/1128afb7511e00ad4c5e8c0628204b56.png differ diff --git a/images/latex/3fd61ab3fe88f694e70f61e4f8ea056b.svg b/images/latex/3fd61ab3fe88f694e70f61e4f8ea056b.svg new file mode 100644 index 00000000..f34f28db --- /dev/null +++ b/images/latex/3fd61ab3fe88f694e70f61e4f8ea056b.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/latex/fe880741c0d91317587412f1badeab3f.svg b/images/latex/fe880741c0d91317587412f1badeab3f.svg new file mode 100644 index 00000000..346c4f36 --- /dev/null +++ b/images/latex/fe880741c0d91317587412f1badeab3f.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index a88f4696..fb92287b 100644 --- a/index.html +++ b/index.html @@ -912,9 +912,9 @@ function Bezier(3,t):

The following graphs show the interpolation functions for quadratic and cubic curves, with "S" being the strength of a point's - contribution to the total sum of the Bézier function. Click or - click-drag to see the interpolation percentages for each - curve-defining point at a specific t value. + contribution to the total sum of the Bézier function. Click-and-drag + to see the interpolation percentages for each curve-defining point + at a specific t value.

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

@@ -1093,35 +1093,51 @@ function Bezier(3,t,w[]): ratio1 = 0.5, and so on. The second term then corrects for all those multiplications by dividing the total value by the "basis" value of the Bézier curve, i.e. the value we - get by computing the curve without any weighting at (but + get by computing the curve without any weighting (but with ratios):

- -

So what does this actually do?

- Let's look at the effect of "rationalising" our Bézier curves by - interacting with the curve and ratios. The following graphic shows - the curve from the previous section, enriched with ratio factors: - the closer to zero we set one or more terms, the less relative - influence the associated coordinates exert on the curve (and of - course the higher we set them, the more influence they have). -

-

- <Graphic title="Our rational cubic Bézier curve" - setup={this.drawCubic} draw={this.drawCurve} sliders={[ {min:0, - max:2, value:1, step:0.01, label:ratio 1}, {min:0, - max:2, value:1, step:0.01, label:ratio 2}, {min:0, - max:2, value:1, step:0.01, label:ratio 3}, {min:0, - max:2, value:1, step:0.01, label:ratio 4} ]} - setSliders={this.setRatio} onSlide={this.changeRatio} - context={this}/> + So what does this actually do? Let's look at the effect of + "rationalising" our Bézier curves by interacting with the curve and + ratios. The following graphic shows the curve from the previous + section, enriched with ratio factors: the closer to zero we set one + or more terms, the less relative influence the associated coordinate + exerts on the curve (and of course the higher we set them, the more + influence they have).

+ + + + Scripts are disabled. Showing fallback image. + + ratio 1 + 1.0
+ ratio 2 + 1.0
+ ratio 3 + 1.0
+ ratio 4 + 1.0 + +

You can think of the ratio values as each coordinate's "gravity": the higher the gravity, the closer to that coordinate the curve will diff --git a/ja-JP/index.html b/ja-JP/index.html index e691dd2d..d5c4a48e 100644 --- a/ja-JP/index.html +++ b/ja-JP/index.html @@ -705,7 +705,7 @@ function Bezier(3,t): ベジエ曲線は（すべての「スプライン」と同様に）補間関数です。これは点の集合を受け取って、それらの点のどこか「内側」の値を生成するということです。（このことから、制御点同士を結んで輪郭をつくったとき、その外側に位置する点は決して生成されないことがわかります。なお、この輪郭を曲線の「包」と呼びます。お役立ち情報でした！）実際に、補間関数によって生成された値に対する、各点の寄与の大きさを可視化することができますが、これを見れば、ベジエ曲線のどの場所でどの点が重要になるのかがわかります。

- 下のグラフは、2次ベジエ曲線や3次ベジエ曲線の補間関数を表しています。ここでSは、ベジエ関数全体に対しての、その点の寄与の大きさを示します。あるtにおいて、ベジエ曲線を定義する各点の補間率がどのようになっているのか、クリックやドラッグをして確かめてみてください。 + 下のグラフは、2次ベジエ曲線や3次ベジエ曲線の補間関数を表しています。ここでSは、ベジエ関数全体に対しての、その点の寄与の大きさを示します。あるtにおいて、ベジエ曲線を定義する各点の補間率がどのようになっているのか、クリックドラッグをして確かめてみてください。

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

@@ -823,35 +823,51 @@ function Bezier(3,t,w[]): ratio1 = 0.5, and so on. The second term then corrects for all those multiplications by dividing the total value by the "basis" value of the Bézier curve, i.e. the value we - get by computing the curve without any weighting at (but + get by computing the curve without any weighting (but with ratios):

- -

So what does this actually do?

- Let's look at the effect of "rationalising" our Bézier curves by - interacting with the curve and ratios. The following graphic shows - the curve from the previous section, enriched with ratio factors: - the closer to zero we set one or more terms, the less relative - influence the associated coordinates exert on the curve (and of - course the higher we set them, the more influence they have). -

-

- <Graphic title="Our rational cubic Bézier curve" - setup={this.drawCubic} draw={this.drawCurve} sliders={[ {min:0, - max:2, value:1, step:0.01, label:ratio 1}, {min:0, - max:2, value:1, step:0.01, label:ratio 2}, {min:0, - max:2, value:1, step:0.01, label:ratio 3}, {min:0, - max:2, value:1, step:0.01, label:ratio 4} ]} - setSliders={this.setRatio} onSlide={this.changeRatio} - context={this}/> + So what does this actually do? Let's look at the effect of + "rationalising" our Bézier curves by interacting with the curve and + ratios. The following graphic shows the curve from the previous + section, enriched with ratio factors: the closer to zero we set one + or more terms, the less relative influence the associated coordinate + exerts on the curve (and of course the higher we set them, the more + influence they have).

+ + + + Scripts are disabled. Showing fallback image. + + ratio 1 + 1.0
+ ratio 2 + 1.0
+ ratio 3 + 1.0
+ ratio 4 + 1.0 + +

You can think of the ratio values as each coordinate's "gravity": the higher the gravity, the closer to that coordinate the curve will diff --git a/lib/custom-element/api/base-api.js b/lib/custom-element/api/base-api.js index e827259d..ffff558b 100644 --- a/lib/custom-element/api/base-api.js +++ b/lib/custom-element/api/base-api.js @@ -88,6 +88,13 @@ class BaseAPI { ); } + stopEvent(evt) { + if (evt.target === this.canvas) { + evt.preventDefault(); + evt.stopPropagation(); + } + } + /** * */ @@ -116,7 +123,7 @@ class BaseAPI { * */ onMouseDown(evt) { - stop(evt); + this.stopEvent(evt); this.cursor.down = true; this.getCursorCoords(evt); } @@ -125,7 +132,7 @@ class BaseAPI { * */ onMouseMove(evt) { - stop(evt); + this.stopEvent(evt); this.cursor.move = true; this.getCursorCoords(evt); } @@ -134,7 +141,7 @@ class BaseAPI { * */ onMouseUp(evt) { - stop(evt); + this.stopEvent(evt); this.cursor.down = false; this.cursor.move = false; this.getCursorCoords(evt); @@ -148,7 +155,7 @@ class BaseAPI { // going to allow unmodified keys, or shift-modified keys, // and tab has to always work. For obvious reasons. if (!evt.altKey && !evt.ctrlKey && !evt.metaKey && evt.key !== "Tab") { - stop(evt); + this.stopEvent(evt); } } @@ -184,6 +191,7 @@ class BaseAPI { canvas.setAttribute(`tabIndex`, 0); canvas.classList.add(`focus-enabled`); canvas._force_listener = () => { + /* // I have NO idea why forceFocus() causes a scroll, but // I don't have time to dig into what is no doubt deep // black spec magic, so: check where we are, force the @@ -194,8 +202,11 @@ class BaseAPI { // Oh yeah... using round() because apparently scrollTo // is not NOT idempotent and rounding errors cause it to // drift. IT'S FUCKING HILARIOUS + */ this.forceFocus(); + /* window.scrollTo(x, y); + */ }; [`touchstart`, `mousedown`].forEach((evtName) => canvas.addEventListener(evtName, canvas._force_listener) @@ -286,10 +297,4 @@ function enhanceContext(ctx) { return ctx; } -// Outright kill off an event. -function stop(evt) { - evt.preventDefault(); - evt.stopPropagation(); -} - export { BaseAPI }; diff --git a/lib/custom-element/api/graphics-api.js b/lib/custom-element/api/graphics-api.js index 44d36bb8..fff201a1 100644 --- a/lib/custom-element/api/graphics-api.js +++ b/lib/custom-element/api/graphics-api.js @@ -177,6 +177,7 @@ class GraphicsAPI extends BaseAPI { * custom element scoped querySelector */ find(qs) { + if (!this.element) return false; return enrich(this.element.querySelector(qs)); } @@ -184,6 +185,7 @@ class GraphicsAPI extends BaseAPI { * custom element scoped querySelectorAll */ findAll(qs) { + if (!this.element) return false; return Array.from(this.element.querySelectorAll(qs)).map((e) => enrich(e)); } diff --git a/lib/custom-element/api/types/bezier.js b/lib/custom-element/api/types/bezier.js index 8ecb6ced..56ed79f2 100644 --- a/lib/custom-element/api/types/bezier.js +++ b/lib/custom-element/api/types/bezier.js @@ -72,16 +72,16 @@ class Bezier extends Original { drawCurve() { const ctx = this.ctx; - const p = this.points; ctx.cacheStyle(); ctx.lineWidth = 2; ctx.strokeStyle = `#333`; ctx.beginPath(); - ctx.moveTo(p[0].x, p[0].y); - if (p[3]) { - ctx.bezierCurveTo(p[1].x, p[1].y, p[2].x, p[2].y, p[3].x, p[3].y); - } else { - ctx.quadraticCurveTo(p[1].x, p[1].y, p[2].x, p[2].y); + const lut = this.getLUT().slice(); + let p = lut.shift(); + ctx.moveTo(p.x, p.y); + while (lut.length) { + p = lut.shift(); + ctx.lineTo(p.x, p.y); } ctx.stroke(); ctx.restoreStyle(); diff --git a/package-lock.json b/package-lock.json index 91d9938f..b3a6e791 100644 --- a/package-lock.json +++ b/package-lock.json @@ -201,6 +201,12 @@ "fill-range": "^7.0.1" } }, + "buffer-from": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", + "dev": true + }, "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", @@ -263,6 +269,16 @@ "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", "dev": true }, + "clean-html": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/clean-html/-/clean-html-1.5.0.tgz", + "integrity": "sha512-eDu0vN44ZBvoEU0oRIKwWPIccGWXtdnUNmKJuTukZ1de00Uoqavb5pfIMKiC7/r+knQ5RbvAjGuVZiN3JwJL4Q==", + "dev": true, + "requires": { + "htmlparser2": "^3.8.2", + "minimist": "^1.1.1" + } + }, "coa": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", @@ -313,6 +329,18 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, + "concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "dev": true, + "requires": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" + } + }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", @@ -498,6 +526,15 @@ "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", "dev": true }, + "domhandler": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", + "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", + "dev": true, + "requires": { + "domelementtype": "1" + } + }, "domutils": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", @@ -758,6 +795,48 @@ "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==", "dev": true }, + "html": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/html/-/html-1.0.0.tgz", + "integrity": "sha1-pUT6nqVJK/s6LMqCEKEL57WvH2E=", + "dev": true, + "requires": { + "concat-stream": "^1.4.7" + } + }, + "htmlparser2": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", + "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==", + "dev": true, + "requires": { + "domelementtype": "^1.3.1", + "domhandler": "^2.3.0", + "domutils": "^1.5.1", + "entities": "^1.1.1", + "inherits": "^2.0.1", + "readable-stream": "^3.1.1" + }, + "dependencies": { + "entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==", + "dev": true + }, + "readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + } + } + }, "http-proxy": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", @@ -811,6 +890,12 @@ "minimatch": "^3.0.4" } }, + "indent": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/indent/-/indent-0.0.2.tgz", + "integrity": "sha1-jHnwgBkFWbaHA0uEx676l9WpEdk=", + "dev": true + }, "indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -2025,6 +2110,12 @@ "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", "dev": true }, + "typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", + "dev": true + }, "typedarray-to-buffer": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", diff --git a/package.json b/package.json index db113c39..4d738cae 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "url": "https://github.com/Pomax/BezierInfo-2/issues" }, "scripts": { - "start": "rm -f .timing && run-s time lint:* build time", + "start": "rm -f .timing && run-s time lint:* build time && rm -f .timing", "test": "run-p server browser", "---": "---", "browser": "open-cli http://localhost:8000", @@ -35,9 +35,12 @@ "devDependencies": { "bezier-js": "^2.6.1", "canvas": "^2.6.1", + "clean-html": "^1.5.0", "fs-extra": "^9.0.1", "glob": "^7.1.6", + "html": "^1.0.0", "http-server": "^0.12.3", + "indent": "0.0.2", "marked": "^1.1.1", "npm-run-all": "^4.1.5", "nunjucks": "^3.2.2", diff --git a/tools/build/create-index-page.js b/tools/build/create-index-page.js index aaf36dce..22e92580 100644 --- a/tools/build/create-index-page.js +++ b/tools/build/create-index-page.js @@ -1,5 +1,6 @@ import fs from "fs-extra"; import path from "path"; + import prettier from "prettier"; import generateLangSwitcher from "./generate-lang-switcher.js"; import nunjucks from "nunjucks"; @@ -57,7 +58,11 @@ async function createIndexPages(locale, localeStrings, chapters) { const index = nunjucks.render(`index.template.html`, context); + // TODO: FIXME: Prettier is slow as hell, find an alternative that isn't... + const start = Date.now(); const data = prettier.format(index, { parser: `html` }); + const end = Date.now(); + console.log(`beautification for ${locale} took ${(end - start) / 1000}s`); if (locale === defaultLocale) { fs.writeFileSync(`index.html`, data, `utf8`); diff --git a/tools/build/markdown/preprocess-graphics-element.js b/tools/build/markdown/preprocess-graphics-element.js index b38d101d..e28fa1af 100644 --- a/tools/build/markdown/preprocess-graphics-element.js +++ b/tools/build/markdown/preprocess-graphics-element.js @@ -28,8 +28,9 @@ async function preprocessGraphicsElement(chapter, localeStrings, markdown) { // if there are no width/height attributes, inject them - // FIXME: This will not work if there is UI html that - // TODO: uses width/height attributes, of course! + // FIXME: This will not work if there is UI html that uses the + // TODO: width/height attributes, but the graphics-element + // does not, of course! [known bug] if (updated.indexOf(`width=`) === -1) updated = updated.replace( @@ -78,8 +79,7 @@ async function preprocessGraphicsElement(chapter, localeStrings, markdown) { } /** - * - * @param {*} src + * ...docs go here... */ async function generateFallbackImage(src, width, height) { // Get the sketch code diff --git a/tools/build/process-locale.js b/tools/build/process-locale.js index caf7a358..68b1ceca 100644 --- a/tools/build/process-locale.js +++ b/tools/build/process-locale.js @@ -23,6 +23,8 @@ nunjucks.configure(".", { autoescape: false }); * ...docs go here... */ async function processLocale(locale, localeStrings, chapterFiles) { + const start = Date.now(); + const defaultLocale = localeStrings.getDefaultLocale(); const localeFiles = chapterFiles[locale]; @@ -74,6 +76,9 @@ async function processLocale(locale, localeStrings, chapterFiles) { console.log(`${locale} fully localized.`); } + const end = Date.now(); + console.log(`Processing ${locale} took ${(end - start) / 1000}s`); + return chapters; } diff --git a/zh-CN/index.html b/zh-CN/index.html index ed481930..49dbbf24 100644 --- a/zh-CN/index.html +++ b/zh-CN/index.html @@ -686,7 +686,7 @@ function Bezier(3,t): 贝塞尔曲线是插值方程（就像所有曲线一样），这表示它们取一系列的点，生成一些处于这些点之间的值。（一个推论就是你永远无法生成一个位于这些控制点轮廓线外面的点，更普遍是称为曲线的外壳。这信息很有用！）实际上，我们可以将每个点对方程产生的曲线做出的贡献进行可视化，因此可以看出曲线上哪些点是重要的，它们处于什么位置。

- 下面的图形显示了二次曲线和三次曲线的差值方程，“S”代表了点对贝塞尔方程总和的贡献。点击或拖动点来看看在特定的t值时，每个曲线定义的点的插值百分比。 + 下面的图形显示了二次曲线和三次曲线的差值方程，“S”代表了点对贝塞尔方程总和的贡献。点击拖动点来看看在特定的t值时，每个曲线定义的点的插值百分比。

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

@@ -804,35 +804,51 @@ function Bezier(3,t,w[]): ratio1 = 0.5, and so on. The second term then corrects for all those multiplications by dividing the total value by the "basis" value of the Bézier curve, i.e. the value we - get by computing the curve without any weighting at (but + get by computing the curve without any weighting (but with ratios):

- -

So what does this actually do?

- Let's look at the effect of "rationalising" our Bézier curves by - interacting with the curve and ratios. The following graphic shows - the curve from the previous section, enriched with ratio factors: - the closer to zero we set one or more terms, the less relative - influence the associated coordinates exert on the curve (and of - course the higher we set them, the more influence they have). -

-

- <Graphic title="Our rational cubic Bézier curve" - setup={this.drawCubic} draw={this.drawCurve} sliders={[ {min:0, - max:2, value:1, step:0.01, label:ratio 1}, {min:0, - max:2, value:1, step:0.01, label:ratio 2}, {min:0, - max:2, value:1, step:0.01, label:ratio 3}, {min:0, - max:2, value:1, step:0.01, label:ratio 4} ]} - setSliders={this.setRatio} onSlide={this.changeRatio} - context={this}/> + So what does this actually do? Let's look at the effect of + "rationalising" our Bézier curves by interacting with the curve and + ratios. The following graphic shows the curve from the previous + section, enriched with ratio factors: the closer to zero we set one + or more terms, the less relative influence the associated coordinate + exerts on the curve (and of course the higher we set them, the more + influence they have).

+ + + + Scripts are disabled. Showing fallback image. + + ratio 1 + 1.0
+ ratio 2 + 1.0
+ ratio 3 + 1.0
+ ratio 4 + 1.0 + +

You can think of the ratio values as each coordinate's "gravity": the higher the gravity, the closer to that coordinate the curve will