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

regenerated all images

Browse Source
This commit is contained in:
Pomax
2020-09-06 17:23:52 -07:00
parent 17c50a403b
commit 42b9818441
66 changed files with 407 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -255,7 +255,7 @@ So let's try it out! The following graphic lets you place points, and will start
<graphics-element title="Fitting a Bézier curve" width="550" src="./curve-fitting.js" >
<button class="toggle">toggle</button>
<div class="sliders"><!-- this will contain range inputs, created by the graphic --></div>
<!-- additional sliders will get created on the fly -->
</graphics-element>
You'll note there is a convenient "toggle" buttons that lets you toggle between equidistant `t` values, and distance ratio along the polygon formed by the points. Arguably more interesting is that once you have points to abstract a curve, you also get <em>direct control</em> over the time values through sliders for each, because if the time values are our degree of freedom, you should be able to freely manipulate them and see what the effect on your curve is.

2
docs/chapters/curvefitting/curve-fitting.js
View File

@@ -110,7 +110,7 @@ updateSliders() {
const l = points.length-1;
if (l >= 2) {
points.forEach((_,i) => {
addSlider(`slide-control`, false, 0, 1, 0.01, i/l, v => this.setTvalue(i, v));
addSlider(`slide-control`, `!t<sub>${i}</sub>`, 0, 1, 0.01, i/l, v => this.setTvalue(i, v));
});
}
this.label = `Using equidistant t values`;