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

sections 21-30 converted for localization

Browse Source
This commit is contained in:
Pomax
2017-02-25 18:16:03 -08:00
parent 3894fddb17
commit a889d16f36
21 changed files with 819 additions and 1028 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/sections/pointcurves/content.en-GB.md Normal file
View File

@@ -0,0 +1,13 @@
# Creating a curve from three points
Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, unlike circle-fitting, which requires just three points, Bézier curve fitting requires three points, as well as a *t* value, so we can figure out where point 'C' needs to be.
The following graphic lets you place three points, and will use the preceding sections on the ABC ratio and curve construction to form a quadratic curve through them. You can move the points you've placed around by click-dragging, or try a new curve by drawing new points with pure clicks. (There's some freedom here, so for illustrative purposes we clamped *t* to simply be 0.5, lets us bypass some maths, since a *t* value of 0.5 always puts C in the middle of the start--end line segment)
<Graphic preset="generate" title="Fitting a quadratic Bézier curve" setup={this.setup} draw={this.drawQuadratic} onClick={this.onClick} />
For cubic curves we also need some values to construct the "de Casteljau line through B" with, and that gives us quite a bit of choice. Since we've clamped *t* to 0.5, we'll set up a line through B parallel to the line start--end, with a length that is proportional to the length of the line B--C: the further away from the baseline B is, the wider its construction line will be, and so the more "bulby" the curve will look. This still gives us some freedom in terms of exactly how to scale the length of the construction line as we move B closer or further away from the baseline, so I simply picked some values that sort-of-kind-of look right in that if a circle through (start,B,end) forms a perfect hemisphere, the cubic curve constructed forms something close to a hemisphere, too, and if the points lie on a line, then the curve constructed has the control points very close to B, while still lying between B and the correct curve end point:
<Graphic preset="generate" title="Fitting a cubic Bézier curve" setup={this.setup} draw={this.drawCubic} onClick={this.onClick} />
In each graphic, the blue parts are the values that we "just have" simply by setting up our three points, combined with our decision on which *t* value to use (and construction line orientation and length for cubic curves). There are of course many ways to determine a combination of *t* and tangent values that lead to a more "æsthetic" curve, but this will be left as an exercise to the reader, since there are many, and æsthetics are often quite personal.

49
components/sections/pointcurves/index.js
View File

@@ -1,13 +1,15 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var Locale = require("../../../lib/locale");
var locale = new Locale();
var page = "pointcurves";
var abs = Math.abs;
var PointCurves = React.createClass({
getDefaultProps: function() {
return {
title: "Creating a curve from three points"
title: locale.getTitle(page)
};
},
@@ -173,46 +175,7 @@ var PointCurves = React.createClass({
},
render: function() {
return (
<section>
<SectionHeader {...this.props} />
<p>Given the preceding section on curve manipulation, we can also generate quadratic and cubic
curves from any three points. However, unlike circle-fitting, which requires just three points,
Bézier curve fitting requires three points, as well as a <i>t</i> value, so we can figure out
where point 'C' needs to be.</p>
<p>The following graphic lets you place three points, and will use the preceding sections on the
ABC ratio and curve construction to form a quadratic curve through them. You can move the points
you've placed around by click-dragging, or try a new curve by drawing new points with pure clicks.
(There's some freedom here, so for illustrative purposes we clamped <i>t</i> to simply be
0.5, lets us bypass some maths, since a <i>t</i> value of 0.5 always puts C in the middle of
the start--end line segment)</p>
<Graphic preset="generate" title="Fitting a quadratic Bézier curve" setup={this.setup} draw={this.drawQuadratic}
onClick={this.onClick} />
<p>For cubic curves we also need some values to construct the "de Casteljau line through B" with,
and that gives us quite a bit of choice. Since we've clamped <i>t</i> to 0.5, we'll set up a line
through B parallel to the line start--end, with a length that is proportional to the length of the
line B--C: the further away from the baseline B is, the wider its construction line will be, and so
the more "bulby" the curve will look. This still gives us some freedom in terms of exactly how to
scale the length of the construction line as we move B closer or further away from the baseline, so
I simply picked some values that sort-of-kind-of look right in that if a circle through (start,B,end)
forms a perfect hemisphere, the cubic curve constructed forms something close to a hemisphere, too,
and if the points lie on a line, then the curve constructed has the control points very close to
B, while still lying between B and the correct curve end point:</p>
<Graphic preset="generate" title="Fitting a cubic Bézier curve" setup={this.setup} draw={this.drawCubic}
onClick={this.onClick} />
<p>In each graphic, the blue parts are the values that we "just have" simply by setting up
our three points, combined with our decision on which <i>t</i> value to use (and construction line
orientation and length for cubic curves). There are of course many ways to determine a combination
of <i>t</i> and tangent values that lead to a more "æsthetic" curve, but this will be left as an
exercise to the reader, since there are many, and æsthetics are often quite personal.</p>
</section>
);
return <section>{ locale.getContent(page, this) }</section>;
}
});