info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-31 20:11:59 +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/curveintersection/content.en-GB.md
View File

@@ -17,9 +17,9 @@ The following graphic applies this algorithm to a pair of cubic curves, one step
(can you find the configuration that yields the maximum number of intersections between two cubic curves? Nine intersections!)
<graphics-element title="Curve/curve intersections" width="825" src="./curve-curve.js">
<input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control">
<button class="next">Advance one step</button>
<button class="reset">Reset</button>
<input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control">
</graphics-element>
Finding self-intersections is effectively the same procedure, except that we're starting with a single curve, so we need to turn that into two separate curves first. This is trivially achieved by splitting at an inflection point, or if there are none, just splitting at `t=0.5` first, and then running the exact same algorithm as above, with all non-overlapping curve pairs getting removed at each iteration, and each successive step homing in on the curve's self-intersection points.

6
docs/chapters/curveintersection/curve-curve.js
View File

@@ -4,7 +4,7 @@ setup() {
setPanelCount(3);
this.pairReset();
this.setupEventListening();
setSlider(`.slide-control`, `epsilon`, 1.0, v => this.reset(v));
setSlider(`.slide-control`, `threshold`, 1.0, v => this.reset(v));
}
pairReset() {
@@ -52,7 +52,7 @@ draw() {
this.drawIteration();
setFill(`black`);
let information = `Initial curves, threshold = ${this.epsilon}px`
let information = `Initial curves, threshold = ${this.threshold}px`
if (this.step) {
information = `Curve collection at iteration ${this.step}`;
}
@@ -72,7 +72,7 @@ drawIteration() {
const pairs = this.pairs;
this.pairs = [];
pairs.forEach(pair => {
if(pair[0].length() < this.epsilon && pair[1].length() < this.epsilon)
if(pair[0].length() < this.threshold && pair[1].length() < this.threshold)
return this.finals.push(pair);
// split two curves into four curves