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

yforx

Browse Source
This commit is contained in:
Pomax
2020-08-23 13:33:00 -07:00
parent c6d91e2c41
commit 9349103b48
60 changed files with 5561 additions and 23694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/chapters/whatis/content.en-GB.md
View File

@@ -20,7 +20,7 @@ Given \left (
So let's look at that in action: the following graphic is interactive in that you can use your up and down arrow keys to increase or decrease the interpolation ratio, to see what happens. We start with three points, which gives us two lines. Linear interpolation over those lines gives us two points, between which we can again perform linear interpolation, yielding a single point. And that point —and all points we can form in this way for all ratios taken together— form our Bézier curve:
<graphics-element title="Linear Interpolation leading to Bézier curves" width="825" src="./interpolation.js">
<input type="range" min="10" max="90" step="1" value="75" class="slide-control">
<input type="range" min="10" max="90" step="1" value="25" class="slide-control">
</graphics-element>
And that brings us to the complicated maths: calculus.

2
docs/chapters/whatis/content.ja-JP.md
View File

@@ -20,7 +20,7 @@
では、実際に見てみましょう。下の図はインタラクティブになっています。上下キーで補間の比率が増減しますので、どうなるか確かめてみましょう。最初に3点があり、それを結んで2本の直線が引かれています。この直線の上でそれぞれ線形補間を行うと、2つの点が得られます。この2点の間でさらに線形補間を行うと、1つの点を得ることができます。そして、あらゆる比率に対して同様に点を求め、それをすべて集めると、このようにベジエ曲線ができるのです。
<graphics-element title="Linear Interpolation leading to Bézier curves" width="825" src="./interpolation.js">
<input type="range" min="10" max="90" step="1" value="75" class="slide-control">
<input type="range" min="10" max="90" step="1" value="25" class="slide-control">
</graphics-element>
また、これが複雑な方の数学につながっていきます。微積分です。

2
docs/chapters/whatis/content.zh-CN.md
View File

@@ -20,7 +20,7 @@ Given \left (
让我们来通过实际操作看一下：下面的图形都是可交互的，因此你可以通过上下键来增加或减少插值距离，来观察图形的变化。我们从三个点构成的两条线段开始。通过对各条线段进行线性插值得到两个点，对点之间的线段再进行线性插值，产生一个新的点。最终这些点——所有的点都可以通过选取不同的距离插值产生——构成了贝塞尔曲线
：
<graphics-element title="Linear Interpolation leading to Bézier curves" width="825" src="./interpolation.js">
<input type="range" min="10" max="90" step="1" value="75" class="slide-control">
<input type="range" min="10" max="90" step="1" value="25" class="slide-control">
</graphics-element>
这为我们引出了复杂的数学：微积分。

7
docs/chapters/whatis/interpolation.js
View File

@@ -1,12 +1,7 @@
setup() {
this.step = 25;
this.curve = Bezier.defaultQuadratic(this);
setMovable(this.curve.points);
setSlider(`.slide-control`, v => this.setStep(v))
}
setStep(v) {
this.step = 100 - v;
setSlider(`.slide-control`, `step`, 25)
}
draw() {