info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-26 17:54:52 +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

19
components/sections/curveintersection/content.en-GB.md Normal file
View File

@@ -0,0 +1,19 @@
# Curve/curve intersection
Using de Casteljau's algorithm to split the curve we can now implement curve/curve intersection finding using a "divide and conquer" technique:
- Take two curves *C<sub>1</sub>* and *C<sub>2</sub>*, and treat them as a pair.
- If their bounding boxes overlap, split up each curve into two sub-curves
- With *C<sub>1.1</sub>*, *C<sub>1.2</sub>*, *C<sub>2.1</sub>* and *C<sub>2.2</sub>*, form four new pairs (*C<sub>1.1</sub>*,*C<sub>2.1</sub>*), (*C<sub>1.1</sub>*, *C<sub>2.2</sub>*), (*C<sub>1.2</sub>*,*C<sub>2.1</sub>*), and (*C<sub>1.2</sub>*,*C<sub>2.2</sub>*).
- For each pair, check whether their bounding boxes overlap.
- If their bounding boxes do not overlap, discard the pair, as there is no intersection between this pair of curves.
- If there <em>is</em> overlap, rerun all steps for this pair.
- Once the sub-curves we form are so small that they effectively occupy sub-pixel areas, we consider an intersection found.
This algorithm will start with a single pair, "balloon" until it runs in parallel for a large number of potential sub-pairs, and then taper back down as it homes in on intersection coordinates, ending up with as many pairs as there are intersections.
The following graphic applies this algorithm to a pair of cubic curves, one step at a time, so you can see the algorithm in action. Click the button to run a single step in the algorithm, after setting up your curves in some creative arrangement. The algorithm resets once it's found a solution, so you can try this with lots of different curves (can you find the configuration that yields the maximum number of intersections between two cubic curves? Nine intersections!)
<Graphic preset="clipping" title="Curve/curve intersections" setup={this.setup} draw={this.draw} children={[<button onClick={this.stepUp}>advance one step</button>]}/>
Self-intersection is dealt with in the same way, except we turn a curve into two or more curves first based on the inflection points. We then form all possible curve pairs with the resultant segments, and run exactly the same algorithm. All non-overlapping curve pairs will be removed after the first iteration, and the remaining steps home in on the curve's self-intersection points.

50
components/sections/curveintersection/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 = "curveintersection";
var abs = Math.abs;
var CurveIntersections = React.createClass({
getDefaultProps: function() {
return {
title: "Curve/curve intersection"
title: locale.getTitle(page)
};
},
@@ -126,47 +128,7 @@ var CurveIntersections = React.createClass({
},
render: function() {
return (
<section>
<SectionHeader {...this.props} />
<p>Using de Casteljau's algorithm to split the curve we can now implement curve/curve intersection
finding using a "divide and conquer" technique:</p>
<ul>
<li>Take two curves <i>C<sub>1</sub></i> and <i>C<sub>2</sub></i>, and treat them as a pair.</li>
<li>If their bounding boxes overlap, split up each curve into two sub-curves</li>
<li>With <i>C<sub>1.1</sub></i>, <i>C<sub>1.2</sub></i>, <i>C<sub>2.1</sub></i> and <i>C<sub>2.2</sub></i>, form
four new pairs (<i>C<sub>1.1</sub></i>,<i>C<sub>2.1</sub></i>), (<i>C<sub>1.1</sub></i>, <i>C<sub>2.2</sub></i>), (<i>C<sub>1.2</sub></i>,<i>C<sub>2.1</sub></i>), and (<i>C<sub>1.2</sub></i>,<i>C<sub>2.2</sub></i>).</li>
<li>For each pair, check whether their bounding boxes overlap.
<ul>
<li>If their bounding boxes do not overlap, discard the pair, as there is no intersection between this pair of curves.</li>
<li>If there <em>is</em> overlap, rerun all steps for this pair.</li>
</ul>
</li>
<li>Once the sub-curves we form are so small that they effectively occupy sub-pixel areas, we consider an intersection found.</li>
</ul>
<p>This algorithm will start with a single pair, "balloon" until it runs in parallel for a large
number of potential sub-pairs, and then taper back down as it homes in on intersection coordinates,
ending up with as many pairs as there are intersections.</p>
<p>The following graphic applies this algorithm to a pair of cubic curves, one step at a time, so
you can see the algorithm in action. Click the button to run a single step in the algorithm,
after setting up your curves in some creative arrangement. The algorithm resets once it's found
a solution, so you can try this with lots of different curves (can you find the configuration
that yields the maximum number of intersections between two cubic curves? Nine intersections!)</p>
<Graphic preset="clipping" title="Curve/curve intersections" setup={this.setup} draw={this.draw}>
<button onClick={this.stepUp}>advance one step</button>
</Graphic>
<p>Self-intersection is dealt with in the same way, except we turn a curve into two or more curves first
based on the inflection points. We then form all possible curve pairs with the resultant segments, and
run exactly the same algorithm. All non-overlapping curve pairs will be removed after the first iteration,
and the remaining steps home in on the curve's self-intersection points.</p>
</section>
);
return <section>{ locale.getContent(page, this) }</section>;
}
});