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

added sliders to sketches that should have one, improved lazy loading

Browse Source
This commit is contained in:
Pomax
2020-08-21 23:39:36 -07:00
parent 65173c10a2
commit ad5da1f088
67 changed files with 833 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,9 @@ 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" height="275" src="./interpolation.js"></graphics-element>
<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">
</graphics-element>
And that brings us to the complicated maths: calculus.

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

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

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

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

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

@@ -2,6 +2,11 @@ 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;
}
draw() {
@@ -101,41 +106,6 @@ drawCurveCoordinates() {
this.curve.drawPoints();
}
onKeyDown() {
this.mark = false;
if (this.keyboard[`ArrowDown`]) {
this.stepDown();
}
if (this.keyboard[`ArrowUp`]) {
this.stepUp();
}
redraw();
}
stepDown(value = 1) {
this.step -= value;
if (this.step < 10) this.step = 10;
}
stepUp(value = 1) {
this.step += value;
if (this.step > 90) this.step = 90;
}
onMouseDown() {
this.mark = this.cursor.y;
}
onMouseUp() {
this.mark = false;
}
onMouseMove() {
if (this.mark && !this.currentPoint) {
let diff = this.mark - this.cursor.y,
mapped = map(diff, -this.height/2, this.height/2, 10, 90, true);
this.step = mapped | 0;
}
redraw();
}