info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-02 21:02:49 +02:00
Code Issues Releases Wiki Activity

extended

Browse Source
This commit is contained in:
Pomax
2020-08-11 14:51:59 -07:00
parent 9d0953c0f6
commit 7ffaae7f36
16 changed files with 267 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
chapters/extended/content.en-GB.md
View File

@@ -22,7 +22,7 @@ In the case of Bézier curves, extending the interval simply makes our curve "ke
The following two graphics show you Bézier curves rendered "the usual way", as well as the curves they "lie on" if we were to extend the `t` values much further. As you can see, there's a lot more "shape" hidden in the rest of the curve, and we can model those parts by moving the curve points around.
<Graphic title="Quadratic infinite interval Bézier curve" setup={this.setupQuadratic} draw={this.draw} />
<Graphic title="Cubic infinite interval Bézier curve" setup={this.setupCubic} draw={this.draw} />
<graphics-element title="Quadratic infinite interval Bézier curve" src="./quadratic.js"></graphics-element>
<graphics-element title="Cubic infinite interval Bézier curve" src="./cubic.js"></graphics-element>
In fact, there are curves used in graphics design and computer modelling that do the opposite of Bézier curves; rather than fixing the interval, and giving you freedom to choose the coordinates, they fix the coordinates, but give you freedom over the interval. A great example of this is the ["Spiro" curve](http://levien.com/phd/phd.html), which is a curve based on part of a [Cornu Spiral, also known as Euler's Spiral](https://en.wikipedia.org/wiki/Euler_spiral). It's a very aesthetically pleasing curve and you'll find it in quite a few graphics packages like [FontForge](https://fontforge.github.io) and [Inkscape](https://inkscape.org). It has even been used in font design, for example for the Inconsolata typeface.

4
chapters/extended/content.ja-JP.md
View File

@@ -22,7 +22,7 @@
下の2つの図は「いつもの方法」で描いたベジエ曲線ですが、これと一緒に、`t`の値をずっと先まで広げた場合の「延びた」ベジエ曲線も表示しています。見てわかるように、曲線の残りの部分には多くの「かたち」が隠れています。そして曲線の点を動かせば、その部分の形状も変わります。
<Graphic title="無限区間の2次ベジエ曲線" setup={this.setupQuadratic} draw={this.draw} />
<Graphic title="無限区間の3次ベジエ曲線" setup={this.setupCubic} draw={this.draw} />
<graphics-element title="無限区間の2次ベジエ曲線" src="./quadratic.js"></graphics-element>
<graphics-element title="無限区間の3次ベジエ曲線" src="./cubic.js"></graphics-element>
実際に、グラフィックデザインやコンピュータモデリングで使われている曲線の中には、座標が固定されていて、区間は自由に動かせるような曲線があります。これは、区間が固定されていて、座標を自由に動かすことのできるベジエ曲線とは反対になっています。すばらしい例が[「Spiro」曲線](http://levien.com/phd/phd.html)で、これは[オイラー螺旋とも呼ばれるクロソイド曲線](https://ja.wikipedia.org/wiki/クロソイド曲線)の一部分に基づいた曲線です。非常に美しく心地よい曲線で、[FontForge](https://fontforge.github.io)や[Inkscape](https://inkscape.org/ja/)など多くのグラフィックアプリに実装されており、フォントデザインにも利用されています（Inconsolataフォントなど）。

4
chapters/extended/content.zh-CN.md
View File

@@ -22,7 +22,7 @@
下面两个图形给你展示了以“普通方式”来渲染的贝塞尔曲线，以及如果我们扩大`t`值时它们所“位于”的曲线。如你所见，曲线的剩余部分隐藏了很多“形状”，我们可以通过移动曲线的点来建模这部分。
<Graphic title="二次无限区间贝塞尔曲线" setup={this.setupQuadratic} draw={this.draw} />
<Graphic title="三次无限区间贝塞尔曲线" setup={this.setupCubic} draw={this.draw} />
<graphics-element title="二次无限区间贝塞尔曲线" src="./quadratic.js"></graphics-element>
<graphics-element title="三次无限区间贝塞尔曲线" src="./cubic.js"></graphics-element>
实际上，图形设计和计算机建模中还用了一些和贝塞尔曲线相反的曲线，这些曲线没有固定区间和自由的坐标，相反，它们固定座标但给你自由的区间。["Spiro"曲线](http://levien.com/phd/phd.html)就是一个很好的例子，它的构造是基于[羊角螺线,也就是欧拉螺线](https://zh.wikipedia.org/wiki/%E7%BE%8A%E8%A7%92%E8%9E%BA%E7%BA%BF)的一部分。这是在美学上很令人满意的曲线，你可以在一些图形包中看到它，比如[FontForge](https://fontforge.github.io)和[Inkscape](https://inkscape.org)，它也被用在一些字体设计中（比如Inconsolata字体）。

36
chapters/extended/cubic.js Normal file
View File

@@ -0,0 +1,36 @@
setup() {
this.curve = Bezier.defaultCubic(this);
setMovable(this.curve.points);
}
draw() {
const curve = this.curve;
clear();
curve.drawCurve();
curve.drawSkeleton();
let step=0.05, min=-10, max=10;
let pt = curve.get(min - step), pn;
setStroke(`lightgrey`);
for (let t=min; t<=step; t+=step) {
pn = curve.get(t);
line(pt.x, pt.y, pn.x, pn.y);
pt = pn;
}
pt = curve.get(1);
for (let t=1+step; t<=max; t+=step) {
pn = curve.get(t);
line(pt.x, pt.y, pn.x, pn.y);
pt = pn;
}
curve.drawPoints();
}
onMouseMove() {
redraw();
}

34
chapters/extended/handler.js
View File

@@ -1,34 +0,0 @@
module.exports = {
setupQuadratic: function(api) {
var curve = new api.Bezier(70, 155, 20, 110, 100,75);
api.setCurve(curve);
},
setupCubic: function(api) {
var curve = new api.Bezier(60,105, 75,30, 215,115, 140,160);
api.setCurve(curve);
},
draw: function(api, curve) {
api.reset();
api.drawSkeleton(curve);
api.drawCurve(curve);
api.setColor("lightgrey");
var t, step=0.05, min=-10;
var pt = curve.get(min - step), pn;
for (t=min; t<=step; t+=step) {
pn = curve.get(t);
api.drawLine(pt, pn);
pt = pn;
}
pt = curve.get(1);
var max = 10;
for (t=1+step; t<=max; t+=step) {
pn = curve.get(t);
api.drawLine(pt, pn);
pt = pn;
}
}
};

3
chapters/extended/index.js
View File

@@ -1,3 +0,0 @@
var handler = require("./handler.js");
var generateBase = require("../../generate-base");
module.exports = generateBase("extended", handler);

36
chapters/extended/quadratic.js Normal file
View File

@@ -0,0 +1,36 @@
setup() {
this.curve = Bezier.defaultQuadratic(this);
setMovable(this.curve.points);
}
draw() {
const curve = this.curve;
clear();
curve.drawCurve();
curve.drawSkeleton();
let step=0.05, min=-10, max=10;
let pt = curve.get(min - step), pn;
setStroke(`lightgrey`);
for (let t=min; t<=step; t+=step) {
pn = curve.get(t);
line(pt.x, pt.y, pn.x, pn.y);
pt = pn;
}
pt = curve.get(1);
for (let t=1+step; t<=max; t+=step) {
pn = curve.get(t);
line(pt.x, pt.y, pn.x, pn.y);
pt = pn;
}
curve.drawPoints();
}
onMouseMove() {
redraw();
}

8
chapters/weightcontrol/content.en-GB.md
View File

@@ -14,9 +14,13 @@ The function for rational Bézier curves has two more terms:
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 <code>ratio<sub>0</sub> = 1</code>, <code>ratio<sub>1</sub> = 0.5</code>, 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):
In this, the first new term represents an additional weight for each coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1] then <code>ratio<sub>0</sub> = 1</code>, <code>ratio<sub>1</sub> = 0.5</code>, and so on, and is effectively identical as if we were just using different weight. So far, nothing too special.
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).
However, the second new term is what makes the difference: every point on the curve isn't just a "double weighted" point, it is a _fraction_ of the "doubly weighted" value we compute by introducing that ratio. When computing points on the curve, we compute the "normal" Bézier value and then _divide_ that by the Bézier value for the curve that only uses ratios, not weights.
This does something unexpected: it turns our polynomial into something that _isn't_ a polynomial anymore. It is now a kind of curve that is a super class of the polynomials, and can do some really cool things that Bézier curves can't do "on their own", such as perfectly describing circles (which we'll see in a later section is literally impossible using standard Bézier curves).
But the best way to show what this does is to do literally that: let's look at the effect of "rationalising" our Bézier curves using an interactive graphic for a rationalised curves. The following graphic shows the Bézier curve from the previous section, "enriched" with ratio factors for each coordinate. 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). Try to change the values and see how it affects what gets drawn:
<graphics-element title="Our rational cubic Bézier curve" src="./rational.js">
ratio 1 <input type="range" min="0" max="2" value="1" step="0.01"><span>1.0</span><br>

BIN
images/chapters/extended/1fe3b1a82239206cf84cfb5c40501e86.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
images/chapters/extended/3953e70caad4d8af3d0d9fb3b99fcdb4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
images/chapters/extended/478e2ee26117a091261fb504d66780c2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
images/chapters/extended/74a3ba53c0d1a79938bd2b1b8d57497d.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 B

BIN
images/chapters/extended/90028fd96e5bdf547a0dd356bb56ea61.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

84
index.html
View File

@@ -1087,23 +1087,39 @@ function Bezier(3,t,w[]):
loading="lazy"
/>
<p>
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 <code>ratio<sub>0</sub> = 1</code>,
<code>ratio<sub>1</sub> = 0.5</code>, 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
<em>with</em> ratios):
In this, the first new term represents an additional weight for each
coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1]
then <code>ratio<sub>0</sub> = 1</code>,
<code>ratio<sub>1</sub> = 0.5</code>, and so on, and is effectively
identical as if we were just using different weight. So far, nothing
too special.
</p>
<p>
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).
However, the second new term is what makes the difference: every
point on the curve isn't just a "double weighted" point, it is a
<em>fraction</em> of the "doubly weighted" value we compute by
introducing that ratio. When computing points on the curve, we
compute the "normal" Bézier value and then <em>divide</em> that by
the Bézier value for the curve that only uses ratios, not weights.
</p>
<p>
This does something unexpected: it turns our polynomial into
something that <em>isn't</em> a polynomial anymore. It is now a kind
of curve that is a super class of the polynomials, and can do some
really cool things that Bézier curves can't do "on their own", such
as perfectly describing circles (which we'll see in a later section
is literally impossible using standard Bézier curves).
</p>
<p>
But the best way to show what this does is to do literally that:
let's look at the effect of "rationalising" our Bézier curves using
an interactive graphic for a rationalised curves. The following
graphic shows the Bézier curve from the previous section, "enriched"
with ratio factors for each coordinate. 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). Try to change the values and
see how it affects what gets drawn:
</p>
<graphics-element
title="Our rational cubic Bézier curve"
@@ -1246,16 +1262,38 @@ function RationalBezier(3,t,w[],r[]):
lot more "shape" hidden in the rest of the curve, and we can model
those parts by moving the curve points around.
</p>
<Graphic
<graphics-element
title="Quadratic infinite interval Bézier curve"
setup="{this.setupQuadratic}"
draw="{this.draw}"
/>
<Graphic
width="275"
height="275"
src="./chapters/extended/quadratic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\extended\3953e70caad4d8af3d0d9fb3b99fcdb4.png"
loading="lazy"
/>
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
<graphics-element
title="Cubic infinite interval Bézier curve"
setup="{this.setupCubic}"
draw="{this.draw}"
/>
width="275"
height="275"
src="./chapters/extended/cubic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\extended\90028fd96e5bdf547a0dd356bb56ea61.png"
loading="lazy"
/>
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
<p>
In fact, there are curves used in graphics design and computer

84
ja-JP/index.html
View File

@@ -817,23 +817,39 @@ function Bezier(3,t,w[]):
loading="lazy"
/>
<p>
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 <code>ratio<sub>0</sub> = 1</code>,
<code>ratio<sub>1</sub> = 0.5</code>, 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
<em>with</em> ratios):
In this, the first new term represents an additional weight for each
coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1]
then <code>ratio<sub>0</sub> = 1</code>,
<code>ratio<sub>1</sub> = 0.5</code>, and so on, and is effectively
identical as if we were just using different weight. So far, nothing
too special.
</p>
<p>
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).
However, the second new term is what makes the difference: every
point on the curve isn't just a "double weighted" point, it is a
<em>fraction</em> of the "doubly weighted" value we compute by
introducing that ratio. When computing points on the curve, we
compute the "normal" Bézier value and then <em>divide</em> that by
the Bézier value for the curve that only uses ratios, not weights.
</p>
<p>
This does something unexpected: it turns our polynomial into
something that <em>isn't</em> a polynomial anymore. It is now a kind
of curve that is a super class of the polynomials, and can do some
really cool things that Bézier curves can't do "on their own", such
as perfectly describing circles (which we'll see in a later section
is literally impossible using standard Bézier curves).
</p>
<p>
But the best way to show what this does is to do literally that:
let's look at the effect of "rationalising" our Bézier curves using
an interactive graphic for a rationalised curves. The following
graphic shows the Bézier curve from the previous section, "enriched"
with ratio factors for each coordinate. 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). Try to change the values and
see how it affects what gets drawn:
</p>
<graphics-element
title="Our rational cubic Bézier curve"
@@ -952,16 +968,38 @@ function RationalBezier(3,t,w[],r[]):
<p>
下の2つの図は「いつもの方法」で描いたベジエ曲線ですが、これと一緒に、<code>t</code>の値をずっと先まで広げた場合の「延びた」ベジエ曲線も表示しています。見てわかるように、曲線の残りの部分には多くの「かたち」が隠れています。そして曲線の点を動かせば、その部分の形状も変わります。
</p>
<Graphic
<graphics-element
title="無限区間の2次ベジエ曲線"
setup="{this.setupQuadratic}"
draw="{this.draw}"
/>
<Graphic
width="275"
height="275"
src="./chapters/extended/quadratic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\extended\3953e70caad4d8af3d0d9fb3b99fcdb4.png"
loading="lazy"
/>
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
<graphics-element
title="無限区間の3次ベジエ曲線"
setup="{this.setupCubic}"
draw="{this.draw}"
/>
width="275"
height="275"
src="./chapters/extended/cubic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\extended\90028fd96e5bdf547a0dd356bb56ea61.png"
loading="lazy"
/>
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
<p>
実際に、グラフィックデザインやコンピュータモデリングで使われている曲線の中には、座標が固定されていて、区間は自由に動かせるような曲線があります。これは、区間が固定されていて、座標を自由に動かすことのできるベジエ曲線とは反対になっています。すばらしい例が<a

84
zh-CN/index.html
View File

@@ -798,23 +798,39 @@ function Bezier(3,t,w[]):
loading="lazy"
/>
<p>
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 <code>ratio<sub>0</sub> = 1</code>,
<code>ratio<sub>1</sub> = 0.5</code>, 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
<em>with</em> ratios):
In this, the first new term represents an additional weight for each
coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1]
then <code>ratio<sub>0</sub> = 1</code>,
<code>ratio<sub>1</sub> = 0.5</code>, and so on, and is effectively
identical as if we were just using different weight. So far, nothing
too special.
</p>
<p>
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).
However, the second new term is what makes the difference: every
point on the curve isn't just a "double weighted" point, it is a
<em>fraction</em> of the "doubly weighted" value we compute by
introducing that ratio. When computing points on the curve, we
compute the "normal" Bézier value and then <em>divide</em> that by
the Bézier value for the curve that only uses ratios, not weights.
</p>
<p>
This does something unexpected: it turns our polynomial into
something that <em>isn't</em> a polynomial anymore. It is now a kind
of curve that is a super class of the polynomials, and can do some
really cool things that Bézier curves can't do "on their own", such
as perfectly describing circles (which we'll see in a later section
is literally impossible using standard Bézier curves).
</p>
<p>
But the best way to show what this does is to do literally that:
let's look at the effect of "rationalising" our Bézier curves using
an interactive graphic for a rationalised curves. The following
graphic shows the Bézier curve from the previous section, "enriched"
with ratio factors for each coordinate. 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). Try to change the values and
see how it affects what gets drawn:
</p>
<graphics-element
title="Our rational cubic Bézier curve"
@@ -933,16 +949,38 @@ function RationalBezier(3,t,w[],r[]):
<p>
下面两个图形给你展示了以“普通方式”来渲染的贝塞尔曲线，以及如果我们扩大<code>t</code>值时它们所“位于”的曲线。如你所见，曲线的剩余部分隐藏了很多“形状”，我们可以通过移动曲线的点来建模这部分。
</p>
<Graphic
<graphics-element
title="二次无限区间贝塞尔曲线"
setup="{this.setupQuadratic}"
draw="{this.draw}"
/>
<Graphic
width="275"
height="275"
src="./chapters/extended/quadratic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\extended\3953e70caad4d8af3d0d9fb3b99fcdb4.png"
loading="lazy"
/>
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
<graphics-element
title="三次无限区间贝塞尔曲线"
setup="{this.setupCubic}"
draw="{this.draw}"
/>
width="275"
height="275"
src="./chapters/extended/cubic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\extended\90028fd96e5bdf547a0dd356bb56ea61.png"
loading="lazy"
/>
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
<p>
实际上，图形设计和计算机建模中还用了一些和贝塞尔曲线相反的曲线，这些曲线没有固定区间和自由的坐标，相反，它们固定座标但给你自由的区间。<a