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

figured out how to reuse sketches with data-attribute parameters

Browse Source
This commit is contained in:
Pomax
2020-08-26 21:56:58 -07:00
parent bf88ba4e4c eb997e6455
commit 94a98120ae
93 changed files with 5805 additions and 24390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/chapters/extended/content.en-GB.md
View File

@@ -22,7 +22,9 @@ 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.
<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>
<div class="figure">
<graphics-element title="Quadratic infinite interval Bézier curve" src="./extended.js" data-type="quadratic"></graphics-element>
<graphics-element title="Cubic infinite interval Bézier curve" src="./extended.js" data-type="cubic"></graphics-element>
</div>
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.

6
docs/chapters/extended/content.ja-JP.md
View File

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

6
docs/chapters/extended/content.zh-CN.md
View File

@@ -22,7 +22,9 @@
下面两个图形给你展示了以“普通方式”来渲染的贝塞尔曲线，以及如果我们扩大`t`值时它们所“位于”的曲线。如你所见，曲线的剩余部分隐藏了很多“形状”，我们可以通过移动曲线的点来建模这部分。
<graphics-element title="二次无限区间贝塞尔曲线" src="./quadratic.js"></graphics-element>
<graphics-element title="三次无限区间贝塞尔曲线" src="./cubic.js"></graphics-element>
<div class="figure">
<graphics-element title="二次无限区间贝塞尔曲线" src="./extended.js" data-type="quadratic"></graphics-element>
<graphics-element title="三次无限区间贝塞尔曲线" src="./extended.js" data-type="cubic"></graphics-element>
</div>
实际上，图形设计和计算机建模中还用了一些和贝塞尔曲线相反的曲线，这些曲线没有固定区间和自由的坐标，相反，它们固定座标但给你自由的区间。["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字体）。

9
docs/chapters/extended/cubic.js → docs/chapters/extended/extended.js
View File

@@ -1,11 +1,12 @@
let curve;
setup() {
this.curve = Bezier.defaultCubic(this);
setMovable(this.curve.points);
const type = this.getParameter(`type`, `quadratic`);
curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this);
setMovable(curve.points);
}
draw() {
const curve = this.curve;
clear();
curve.drawCurve();
curve.drawSkeleton();

32
docs/chapters/extended/quadratic.js
View File

@@ -1,32 +0,0 @@
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(`skyblue`);
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();
}