mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-13 20:24:16 +02:00
code comments
This commit is contained in:
Pomax
@@ -56,7 +56,7 @@ draw() {
|
||||
text(`${this.finals.length} intersections found.`, this.panelWidth/2, this.height - 10, CENTER);
|
||||
}
|
||||
|
||||
// panel 3: intersections
|
||||
// panel 3: the (already known) intersections
|
||||
nextPanel();
|
||||
this.drawIntersections();
|
||||
}
|
||||
@@ -73,7 +73,7 @@ drawIteration() {
|
||||
const s1 = pair[0].split(0.5);
|
||||
const s2 = pair[1].split(0.5);
|
||||
|
||||
// cross check
|
||||
// cross check to see if we need to keep any of the pairs
|
||||
if (s1.left.overlaps(s2.left)) { this.pairs.push([ s1.left, s2.left ]); }
|
||||
if (s1.left.overlaps(s2.right)) { this.pairs.push([ s1.left, s2.right ]); }
|
||||
if (s1.right.overlaps(s2.left)) { this.pairs.push([ s1.right, s2.left ]); }
|
||||
@@ -81,10 +81,12 @@ drawIteration() {
|
||||
});
|
||||
}
|
||||
|
||||
// if we have no pairs left, the next button should not be clickable anymore.
|
||||
if (!this.pairs.length && next) {
|
||||
next.disabled = true;
|
||||
}
|
||||
|
||||
// draw any curves we have in our pairs list
|
||||
this.pairs.forEach(pair => {
|
||||
pair.forEach(b => {
|
||||
let curve = new Bezier(this, b.points);
|
||||
@@ -93,6 +95,7 @@ drawIteration() {
|
||||
})
|
||||
});
|
||||
|
||||
// and draw any "finals" as established intersections at this point.
|
||||
setStroke(`red`);
|
||||
this.finals.forEach(pair => {
|
||||
let p = pair[0].get(0.5);
|
||||
|
||||
@@ -23,12 +23,15 @@ draw() {
|
||||
|
||||
this.drawLine(...line);
|
||||
|
||||
// To find our intersections, we align the curve to our line,
|
||||
// so that all we need to do now is find the roots for the curve.
|
||||
const [p1, p2] = line;
|
||||
const aligned = utils.align(curve.points, {p1,p2});
|
||||
const nB = new Bezier(this, aligned);
|
||||
const roots = utils.roots(nB.points);
|
||||
const coords = roots.map(t => curve.get(t));
|
||||
|
||||
// done: any roots we find are intersections on our original curve.
|
||||
if (roots.length) {
|
||||
roots.forEach((t,i) => {
|
||||
var p = coords[i];
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
let Point = Vector, points = [];
|
||||
|
||||
setup() {
|
||||
points.push(new Point(50,50));
|
||||
points.push(new Point(150,110));
|
||||
points.push(new Point(50,250));
|
||||
points.push(new Point(170,170));
|
||||
points = [
|
||||
new Point(50,50),
|
||||
new Point(150,110),
|
||||
new Point(50,250),
|
||||
new Point(170,170),
|
||||
];
|
||||
setMovable(points);
|
||||
}
|
||||
|
||||
@@ -16,6 +18,9 @@ draw() {
|
||||
this.drawLine(p1,p2);
|
||||
this.drawLine(p3,p4);
|
||||
|
||||
// compute the line/line intesection: note that this does NOT
|
||||
// mean the line *segments* intersect, just that the lines,
|
||||
// which are infinitely long, intersect.
|
||||
const p = this.lli(
|
||||
p1.x, p1.y,
|
||||
p2.x, p2.y,
|
||||
@@ -23,6 +28,7 @@ draw() {
|
||||
p4.x, p4.y
|
||||
);
|
||||
|
||||
// if there is an intersection, is that point on both line *segments*?
|
||||
if (p) {
|
||||
if (this.onLine(p, p1, p2) && this.onLine(p, p3, p4)) {
|
||||
setColor(`lime`);
|
||||
@@ -44,6 +50,7 @@ drawLine(p1, p2) {
|
||||
circle(p2.x, p2.y, 2);
|
||||
}
|
||||
|
||||
// The line/line intersection code can be found all over the web.
|
||||
lli(x1, y1, x2, y2, x3, y3, x4, y4) {
|
||||
const nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4),
|
||||
ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4),
|
||||
@@ -52,6 +59,7 @@ lli(x1, y1, x2, y2, x3, y3, x4, y4) {
|
||||
return { x: nx / d, y: ny / d };
|
||||
}
|
||||
|
||||
// is point p on the line p1--p2?
|
||||
onLine(p, p1, p2) {
|
||||
const mx = min(p1.x, p2.x),
|
||||
my = min(p1.y, p2.y),
|
||||
|
||||
@@ -17,16 +17,19 @@ draw() {
|
||||
|
||||
curve.drawSkeleton();
|
||||
|
||||
// First, reduce our curves into a set of simple sections
|
||||
var reduced = this.reduce(curve);
|
||||
reduced.forEach(c => {
|
||||
setStroke(randomColor() );
|
||||
this.drawCurve(c);
|
||||
circle(c.points[0].x, c.points[0].y, 2);
|
||||
});
|
||||
|
||||
var last = reduced.slice(-1)[0];
|
||||
let p = last.points[3] ?? last.points[2];
|
||||
circle(p.x, p.y, 3);
|
||||
|
||||
// then, we can offset each simple curve by projective scaling
|
||||
setStroke(`#FF000050`);
|
||||
var offset = curve.offset(this.distance);
|
||||
offset.forEach(c => {
|
||||
@@ -38,6 +41,7 @@ draw() {
|
||||
p = last.points[3] ?? last.points[2];
|
||||
circle(p.x, p.y, 3);
|
||||
|
||||
// on both sides, so we need to offset by -distance, too.
|
||||
setStroke(`#0000FF50`);
|
||||
var offset = curve.offset(-this.distance);
|
||||
offset.forEach(c => {
|
||||
@@ -116,3 +120,5 @@ reduce(curve) {
|
||||
|
||||
return pass2;
|
||||
}
|
||||
|
||||
// TODO: duplicate the offset code from utils.js? It's *a lot* of code, though...
|
||||
|
||||
@@ -71,6 +71,9 @@ draw() {
|
||||
|
||||
movePointsQuadratic(i, link) {
|
||||
const l = points.length;
|
||||
|
||||
// Logic for "conventional" moving of an on-curve point,
|
||||
// moving its associated control points, too.
|
||||
if (link === `conventional` && i%2 === 0) {
|
||||
let ppl = points[(l+i-3)%l];
|
||||
let pl = points[(l+i-1)%l];
|
||||
@@ -91,6 +94,8 @@ movePointsQuadratic(i, link) {
|
||||
}
|
||||
}
|
||||
|
||||
// Moving a control points moves literally every
|
||||
// other control points, too.
|
||||
if (i%2 === 1) {
|
||||
let c1 = points[(l+i-2)%l];
|
||||
let p1 = points[(l+i-1)%l];
|
||||
@@ -127,6 +132,9 @@ movePointsQuadratic(i, link) {
|
||||
|
||||
movePointsCubic(i, link) {
|
||||
const l = points.length;
|
||||
|
||||
// Logic for "conventional" moving of an on-curve point,
|
||||
// moving its associated control points, too.
|
||||
if (link === `conventional` && i%3 === 0) {
|
||||
let left = points[(l+i-1)%l];
|
||||
left.x += this.cursor.diff.x;
|
||||
@@ -137,6 +145,7 @@ movePointsCubic(i, link) {
|
||||
right.y += this.cursor.diff.y;
|
||||
}
|
||||
|
||||
// Moving a control points moves the control "across its on-curve point".
|
||||
if (i%3 > 0) {
|
||||
let c, p;
|
||||
if (i%3 === 1) {
|
||||
|
||||
@@ -28,11 +28,15 @@ draw() {
|
||||
|
||||
plotDistanceFunction(w, h, len) {
|
||||
noFill();
|
||||
|
||||
// There is no way we're capturing the distance function as a nice
|
||||
// easy function, so instead we're going to do the next best thing:
|
||||
// sample the curve at a number of points, and then construct the
|
||||
// function plot as we walk from one sample to the next.
|
||||
let LUT = curve.getLUT(this.steps * 10);
|
||||
let d = 0;
|
||||
start();
|
||||
vertex(0,0);
|
||||
for(let i=1, e=LUT.length, p1, p2; i<e; i++) {
|
||||
for(let i=1, e=LUT.length, p1, p2, d=0; i<e; i++) {
|
||||
p1 = LUT[i-1];
|
||||
p2 = LUT[i];
|
||||
d += dist(p1.x, p1.y, p2.x, p2.y);
|
||||
|
||||
@@ -23,9 +23,12 @@ draw() {
|
||||
scale(0.85);
|
||||
translate(30,30);
|
||||
|
||||
// This first part is the same as the previous graphic
|
||||
setFill(`black`);
|
||||
drawAxes("t", 0, 1, "d", 0, len|0, w, h);
|
||||
let LUT = this.plotDistanceFunction(w, h, len);
|
||||
|
||||
// but this part is new.
|
||||
this.drawPlotIntervals(w, h, LUT);
|
||||
|
||||
resetTransform();
|
||||
|
||||
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
@@ -31,7 +31,7 @@
|
||||
<meta property="og:locale" content="en-GB" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
@@ -3439,7 +3439,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\tracing\52f815cefe99dabc47ca83d0b97b61fc.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3458,7 +3458,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
|
||||
@@ -3508,7 +3508,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
|
||||
<label>Line/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3557,7 +3557,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
|
||||
<label>Quadratic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3570,7 +3570,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
|
||||
<label>Cubic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3638,7 +3638,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<button class="next">Advance one step</button>
|
||||
@@ -4796,7 +4796,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\044f65dd588b0210499add16ea50a23d.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
|
||||
<label>Unlinked quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4810,7 +4810,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\babb27083b805c7c77bb93cfecbefb2b.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
|
||||
<label>Unlinked cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4842,7 +4842,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b492c486c25f17a95c690e235b8ad483.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
|
||||
<label>Connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4856,7 +4856,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\adc3b55c9956849ec86ecffcd8864d8a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
|
||||
<label>Connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4885,7 +4885,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\17a6ffbfffaa9046ad165ca880d9030d.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
|
||||
<label>Angularly connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4899,7 +4899,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b7dfe772ac90d762f48772b691a9070f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
|
||||
<label>Angularly connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4923,7 +4923,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\a1a3aabd22c0221beb38403a4532ea86.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
|
||||
<label>Standard connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4937,7 +4937,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b810f02639a79cf7f8ae416d7185614d.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
|
||||
<label>Standard connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -5095,7 +5095,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
|
||||
<label>Offsetting a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -5110,7 +5110,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
|
||||
<label>Offsetting a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<meta property="og:locale" content="ja-JP" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
@@ -3275,7 +3275,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\tracing\52f815cefe99dabc47ca83d0b97b61fc.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3294,7 +3294,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
|
||||
@@ -3344,7 +3344,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
|
||||
<label>Line/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3393,7 +3393,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
|
||||
<label>Quadratic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3406,7 +3406,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
|
||||
<label>Cubic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3474,7 +3474,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<button class="next">Advance one step</button>
|
||||
@@ -4632,7 +4632,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\044f65dd588b0210499add16ea50a23d.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
|
||||
<label>Unlinked quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4646,7 +4646,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\babb27083b805c7c77bb93cfecbefb2b.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
|
||||
<label>Unlinked cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4678,7 +4678,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b492c486c25f17a95c690e235b8ad483.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
|
||||
<label>Connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4692,7 +4692,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\adc3b55c9956849ec86ecffcd8864d8a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
|
||||
<label>Connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4721,7 +4721,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\17a6ffbfffaa9046ad165ca880d9030d.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
|
||||
<label>Angularly connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4735,7 +4735,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b7dfe772ac90d762f48772b691a9070f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
|
||||
<label>Angularly connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4759,7 +4759,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\a1a3aabd22c0221beb38403a4532ea86.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
|
||||
<label>Standard connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4773,7 +4773,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b810f02639a79cf7f8ae416d7185614d.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
|
||||
<label>Standard connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4931,7 +4931,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
|
||||
<label>Offsetting a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -4946,7 +4946,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
|
||||
<label>Offsetting a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<meta property="og:locale" content="en-GB" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2020-09-18T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<meta property="og:locale" content="zh-CN" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
@@ -3247,7 +3247,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\tracing\52f815cefe99dabc47ca83d0b97b61fc.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3266,7 +3266,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
|
||||
@@ -3316,7 +3316,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
|
||||
<label>Line/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3365,7 +3365,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
|
||||
<label>Quadratic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3378,7 +3378,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
|
||||
<label>Cubic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3446,7 +3446,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<button class="next">Advance one step</button>
|
||||
@@ -4604,7 +4604,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\044f65dd588b0210499add16ea50a23d.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
|
||||
<label>Unlinked quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4618,7 +4618,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\babb27083b805c7c77bb93cfecbefb2b.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
|
||||
<label>Unlinked cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4650,7 +4650,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b492c486c25f17a95c690e235b8ad483.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
|
||||
<label>Connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4664,7 +4664,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\adc3b55c9956849ec86ecffcd8864d8a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
|
||||
<label>Connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4693,7 +4693,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\17a6ffbfffaa9046ad165ca880d9030d.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
|
||||
<label>Angularly connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4707,7 +4707,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b7dfe772ac90d762f48772b691a9070f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
|
||||
<label>Angularly connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4731,7 +4731,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\a1a3aabd22c0221beb38403a4532ea86.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
|
||||
<label>Standard connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4745,7 +4745,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b810f02639a79cf7f8ae416d7185614d.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
|
||||
<label>Standard connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4903,7 +4903,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
|
||||
<label>Offsetting a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -4918,7 +4918,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
|
||||
<label>Offsetting a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
|
||||
Reference in New Issue
Block a user