info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-30 11:40:27 +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

14
docs/chapters/control/content.en-GB.md
View File

@@ -5,9 +5,17 @@ Bézier curves are, like all "splines", interpolation functions. This means that
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 <i>t</i> value.
<div class="figure">
<graphics-element title="Quadratic interpolations" src="./lerp-quadratic.js"></graphics-element>
<graphics-element title="Cubic interpolations" src="./lerp-cubic.js"></graphics-element>
<graphics-element title="15th degree interpolations" src="./lerp-fifteenth.js"></graphics-element>
<graphics-element title="Quadratic interpolations" src="./lerp-quadratic.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
<graphics-element title="Cubic interpolations" src="./lerp-cubic.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
<graphics-element title="15th degree interpolations" src="./lerp-fifteenth.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
</div>
Also shown is the interpolation function for a 15<sup>th</sup> order Bézier function. As you can see, the start and end point contribute considerably more to the curve's shape than any other point in the control point set.

14
docs/chapters/control/content.ja-JP.md
View File

@@ -5,9 +5,17 @@
下のグラフは、2次ベジエ曲線や3次ベジエ曲線の補間関数を表しています。ここでSは、ベジエ関数全体に対しての、その点の寄与の大きさを示します。ある<i>t</i>において、ベジエ曲線を定義する各点の補間率がどのようになっているのか、クリックドラッグをして確かめてみてください。
<div class="figure">
<Graphic inline={true} title="2次の補間" draw={this.drawQuadraticLerp}/>
<Graphic inline={true} title="3次の補間" draw={this.drawCubicLerp}/>
<Graphic inline={true} title="15次の補間" draw={this.draw15thLerp}/>
<graphics-element title="2次の補間" src="./lerp-quadratic.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
<graphics-element title="3次の補間" src="./lerp-cubic.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
<graphics-element title="15次の補間" src="./lerp-fifteenth.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
</div>
あわせて、15次ベジエ関数における補間関数も示しています。始点と終点は他の制御点と比較して、曲線の形に対してかなり大きな影響を与えていることがわかります。

14
docs/chapters/control/content.zh-CN.md
View File

@@ -5,9 +5,17 @@
下面的图形显示了二次曲线和三次曲线的差值方程，“S”代表了点对贝塞尔方程总和的贡献。点击拖动点来看看在特定的<i>t</i>值时，每个曲线定义的点的插值百分比。
<div class="figure">
<Graphic inline={true} title="二次插值" draw={this.drawQuadraticLerp}/>
<Graphic inline={true} title="三次插值" draw={this.drawCubicLerp}/>
<Graphic inline={true} title="15次插值" draw={this.draw15thLerp}/>
<graphics-element title="二次插值" src="./lerp-quadratic.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
<graphics-element title="三次插值" src="./lerp-cubic.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
<graphics-element title="15次插值" src="./lerp-fifteenth.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
</div>
上面有一张是15<sup>th</sup>阶的插值方程。如你所见，在所有控制点中，起点和终点对曲线形状的贡献比其他点更大些。

43
docs/chapters/control/lerp-cubic.js
View File

@@ -10,6 +10,12 @@ setup() {
];
this.s = this.f.map(f => plot(f) );
this.position = 0;
setSlider(`.slide-control`, v => this.setPosition(v))
}
setPosition(v) {
this.position = v;
}
draw() {
@@ -33,30 +39,23 @@ draw() {
}
drawHighlight() {
if (this.cursor.down) {
let c = screenToWorld({
x: map(this.position, 0, 1, -10, this.width + 10),
y: this.height/2
});
let c = screenToWorld(this.cursor);
if (c.x < 0) return;
if (c.x > this.width) return;
if (c.x < 0) return;
if (c.x > this.width) return;
noStroke();
setFill(`rgba(255,0,0,0.3)`);
rect(c.x - 2, 0, 5, this.height);
noStroke();
setFill(`rgba(255,0,0,0.3)`);
rect(c.x - 2, 0, 5, this.height);
const p = this.f.map(f => f(c.x / this.width));
const p = this.f.map(f => f(c.x / this.width));
setFill(`black`);
p.forEach(p => {
circle(p.x, p.y, 3);
text(`${ round(100 * p.y/this.height) }%`, p.x + 10, p.y);
});
}
}
onMouseMove() {
redraw();
}
onMouseUp() {
redraw();
setFill(`black`);
p.forEach(p => {
circle(p.x, p.y, 3);
text(`${ round(100 * p.y/this.height) }%`, p.x + 10, p.y);
});
}

43
docs/chapters/control/lerp-fifteenth.js
View File

@@ -2,6 +2,12 @@ setup() {
this.degree = 15;
this.triangle = [[1], [1,1]];
this.generate();
this.position = 0;
setSlider(`.slide-control`, v => this.setPosition(v))
}
setPosition(v) {
this.position = v;
}
binomial(n,k) {
@@ -52,30 +58,23 @@ draw() {
}
drawHighlight() {
if (this.cursor.down) {
let c = screenToWorld({
x: map(this.position, 0, 1, -10, this.width + 10),
y: this.height/2
});
let c = screenToWorld(this.cursor);
if (c.x < 0) return;
if (c.x > this.width) return;
if (c.x < 0) return;
if (c.x > this.width) return;
noStroke();
setFill(`rgba(255,0,0,0.3)`);
rect(c.x - 2, 0, 5, this.height);
noStroke();
setFill(`rgba(255,0,0,0.3)`);
rect(c.x - 2, 0, 5, this.height);
const p = this.f.map(f => f(c.x / this.width));
const p = this.f.map(f => f(c.x / this.width));
setFill(`black`);
p.forEach(p => {
circle(p.x, p.y, 3);
text(`${ round(100 * p.y/this.height) }%`, p.x + 10, p.y);
});
}
}
onMouseMove() {
redraw();
}
onMouseUp() {
redraw();
setFill(`black`);
p.forEach(p => {
circle(p.x, p.y, 3);
text(`${ round(100 * p.y/this.height) }%`, p.x + 10, p.y);
});
}

43
docs/chapters/control/lerp-quadratic.js
View File

@@ -9,6 +9,12 @@ setup() {
];
this.s = this.f.map(f => plot(f) );
this.position = 0;
setSlider(`.slide-control`, v => this.setPosition(v))
}
setPosition(v) {
this.position = v;
}
draw() {
@@ -32,30 +38,23 @@ draw() {
}
drawHighlight() {
if (this.cursor.down) {
let c = screenToWorld({
x: map(this.position, 0, 1, -10, this.width + 10),
y: this.height/2
});
let c = screenToWorld(this.cursor);
if (c.x < 0) return;
if (c.x > this.width) return;
if (c.x < 0) return;
if (c.x > this.width) return;
noStroke();
setFill(`rgba(255,0,0,0.3)`);
rect(c.x - 2, 0, 5, this.height);
noStroke();
setFill(`rgba(255,0,0,0.3)`);
rect(c.x - 2, 0, 5, this.height);
const p = this.f.map(f => f(c.x / this.width));
const p = this.f.map(f => f(c.x / this.width));
setFill(`black`);
p.forEach(p => {
circle(p.x, p.y, 3);
text(`${ round(100 * p.y/this.height) }%`, p.x + 10, p.y);
});
}
}
onMouseMove() {
redraw();
}
onMouseUp() {
redraw();
setFill(`black`);
p.forEach(p => {
circle(p.x, p.y, 3);
text(`${ round(100 * p.y/this.height) }%`, p.x + 10, p.y);
});
}