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

t-value control

Browse Source
This commit is contained in:
Pomax
2018-06-23 23:22:58 -07:00
parent 1da8c3966b
commit 3d334c2559
13 changed files with 4301 additions and 1907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/sections/curvefitting/content.en-GB.md
View File

@@ -238,12 +238,15 @@ So before we try that out, how much code is involved in implementing this? Hones
So let's try it out! The following graphic lets you place points, and will start computing exact-fit curves once you've placed at least three. You can click for more points, and the code will simply try to compute an exact fit using a Bezier curve of the appropriate order. Four points? Cubic Bezier. Five points? Quartic. And so on. Of course, this does break down at some point: depending on where you place your points, it might become mighty hard for the fitter to find an exact fit, and things might actually start looking horribly off once you hit 10<sup>th</sup> or higher order curves. But it might not!
There are also two convenient buttons: the "toggle" button lets you toggle between equidistance `t` values, and distance ratio along the polygon, and the "reset" button just clears the graphic so you can draw a new set of points.
<div className="figure">
<Graphic title="Fitting a Bézier curve" setup={this.setup} draw={this.draw} onClick={this.onClick}>
<button onClick={this.toggle}>toggle</button>
<button onClick={this.reset}>reset</button>
<SliderSet ref={ set => (this.sliders=set) } onChange={this.processTimeUpdate} />
</Graphic>
</div>
You'll note there are also two convenient buttons: the "toggle" button lets you toggle between equidistance `t` values, and distance ratio along the polygon, and the "reset" button just clears the graphic so you can draw a new set of 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, 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.

24
components/sections/curvefitting/handler.js
View File

@@ -20,6 +20,7 @@ module.exports = {
toggle: function() {
if (this.api) {
this.customTimeValues = false;
this.mode = (this.mode + 1) % fit.modes.length;
this.fitCurve(this.api);
this.api.redraw();
@@ -33,22 +34,33 @@ module.exports = {
api.drawGrid(10,10);
api.setColor('black');
if (!this.curveset && this.points.length > 2) {
this.fitCurve(api);
curve = this.fitCurve(api);
}
if (curve) {
api.drawCurve(curve);
api.drawSkeleton(curve);
}
api.drawPoints(this.points);
api.setFill(0);
api.text("using "+fit.modes[this.mode]+" t values", {x: 5, y: 10});
if (!this.customTimeValues) {
api.setFill(0);
api.text("using "+fit.modes[this.mode]+" t values", {x: 5, y: 10});
}
},
fitCurve(api) {
let bestFitData = fit(this.points, this.mode),
processTimeUpdate(sliderid, timeValues) {
var api = this.api;
this.customTimeValues = true;
this.fitCurve(api, timeValues);
api.redraw();
},
fitCurve(api, timeValues) {
let bestFitData = fit(this.points, timeValues || this.mode),
x = bestFitData.C.x,
y = bestFitData.C.y,
bpoints = [];
@@ -61,6 +73,8 @@ module.exports = {
var curve = new api.Bezier(bpoints);
api.setCurve(curve);
this.curveset = true;
this.sliders.setOptions(bestFitData.S);
return curve;
},
onClick: function(evt, api) {