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

up to and including section 21

Browse Source
This commit is contained in:
Pomax
2016-01-04 16:17:01 -08:00
parent 8b78e22ac4
commit 76fc269b07
37 changed files with 5576 additions and 3407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/sections/flattening/index.js
View File

@@ -40,10 +40,8 @@ var Flattening = React.createClass({
},
values: {
"107": 1, // numpad + key
"187": 1, // =/+ main board key
"109": -1, // numpad - key
"189": -1 // -/_ main board key
"38": 1, // up arrow
"40": -1, // down arrow
},
onKeyDown: function(e, api) {
@@ -64,12 +62,18 @@ var Flattening = React.createClass({
<p>We can also simplify the drawing process by "sampling" the curve at certain points, and then joining those points up with straight lines, a process known as "flattening", as we are reducing a curve to a simple sequence of straight, "flat" lines.</p>
<p>We can do this is by saying "we want X segments", and then sampling the curve at intervals that are spaced such that we end up with the number of segments we wanted. The advantage of this method is that it's fast: instead of evaluating 100 or even 1000 curve coordinates, we can sample a much lower number and still end up with a curve that sort-of-kind-of looks good enough. The disadvantage of course is that we lose the precision of working with "the real curve", so we usually can't use the flattened for for doing true intersection detection, or curvature alignment.</p>
<p>We can do this is by saying "we want X segments", and then sampling the curve at intervals that are spaced such that we
end up with the number of segments we wanted. The advantage of this method is that it's fast: instead of evaluating 100 or
even 1000 curve coordinates, we can sample a much lower number and still end up with a curve that sort-of-kind-of looks good
enough. The disadvantage of course is that we lose the precision of working with "the real curve", so we usually can't use
the flattened for for doing true intersection detection, or curvature alignment.</p>
<Graphic preset="twopanel" title="Flattening a quadratic curve" setup={this.setupQuadratic} draw={this.drawFlattened} onKeyDown={this.onKeyDown}/>
<Graphic preset="twopanel" title="Flattening a cubic curve" setup={this.setupCubic} draw={this.drawFlattened} onKeyDown={this.onKeyDown} />
<p>Try clicking on the sketch and using your '+' and '-' keys to lower the number of segments for both the quadratic and cubic curve. You'll notice that for certain curvatures, a low number of segments works quite well, but for more complex curvatures (try this for the cubic curve), a higher number is required to capture the curvature changes properly.</p>
<p>Try clicking on the sketch and using your up and down arrow keys to lower the number of segments for both the quadratic
and cubic curve. You'll notice that for certain curvatures, a low number of segments works quite well, but for more complex
curvatures (try this for the cubic curve), a higher number is required to capture the curvature changes properly.</p>
<div className="howtocode">
<h3>How to implement curve flattening</h3>