info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-19 06:52:02 +02:00
Code Issues Releases Wiki Activity

image regeneration

Browse Source
This commit is contained in:
Pomax
2020-09-06 09:18:11 -07:00
parent 1de1fc9ce3
commit 17c50a403b
48 changed files with 97 additions and 15074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/chapters/arcapproximation/arcs.js
View File

@@ -17,7 +17,7 @@ draw() {
// See "arc.js" for the code required to find arcs on the curve. // See "arc.js" for the code required to find arcs on the curve.
let arcs = curve.arcs(this.error); let arcs = curve.arcs(this.error);
arcs.forEach(a => { arcs.forEach(a => {
setColor( randomColor(0.3) ); setColor(randomColor(0.3));
arc( arc(
a.x, a.y, a.r, a.s, a.e, a.x, a.y, a.r, a.s, a.e,
a.x, a.y a.x, a.y

2
docs/chapters/canonical/canonical.js
View File

@@ -83,7 +83,7 @@ loopFunction0(x) {
} }
loopFunction1(x) { loopFunction1(x) {
return { x, y: ( sqrt(3) * sqrt(4*x - x*x) - x) / 2 }; return { x, y: (sqrt(3) * sqrt(4*x - x*x) - x) / 2 };
} }

2
docs/chapters/canonical/interactive.js
View File

@@ -150,7 +150,7 @@ loopFunction0(x) {
} }
loopFunction1(x) { loopFunction1(x) {
return { x, y: ( sqrt(3) * sqrt(4*x - x*x) - x) / 2 }; return { x, y: (sqrt(3) * sqrt(4*x - x*x) - x) / 2 };
} }

4
docs/chapters/catmullconv/catmull-rom.js
View File

@@ -39,7 +39,7 @@ draw() {
noLineDash(); noLineDash();
points.forEach(p => { points.forEach(p => {
setColor( randomColor() ); setColor(randomColor());
circle(p.x, p.y, 3); circle(p.x, p.y, 3);
}); });
} }
@@ -56,7 +56,7 @@ dragSegment(p0, p1, p2, p3) {
}; };
noFill(); noFill();
setStroke( randomColor() ); setStroke(randomColor() );
start(); start();
this.addCoordinate(0, p1, p2, m1, m2); this.addCoordinate(0, p1, p2, m1, m2);

2
docs/chapters/catmullconv/notes.txt
View File

@@ -97,7 +97,7 @@ dragSegment(p0, p1, p2, p3) {
}; };
noFill(); noFill();
setStroke( randomColor() ); setStroke(randomColor() );
start(); start();
this.markCoordinate(0, p1,p2,tangent1,tangent2); this.markCoordinate(0, p1,p2,tangent1,tangent2);

6
docs/chapters/circles/arc-approximation.js
View File

@@ -39,12 +39,12 @@ draw() {
updateCurve(a) { updateCurve(a) {
let angle = -a; let angle = -a;
let b = ( cos(angle) - 1 ) / sin(angle); let b = (cos(angle) - 1 ) / sin(angle);
// new control point // new control point
curve.points[1] = { curve.points[1] = {
x: w/2 + r * ( cos(angle) - b * sin(angle) ), x: w/2 + r * (cos(angle) - b * sin(angle) ),
y: w/2 + r * ( sin(angle) + b * cos(angle) ) y: w/2 + r * (sin(angle) + b * cos(angle) )
}; };
// new endpoint // new endpoint

4
docs/chapters/circles_cubic/arc-approximation.js
View File

@@ -78,8 +78,8 @@ getRealCurve(S, E, angle) {
const f = 4/3 * tan(angle/4); const f = 4/3 * tan(angle/4);
const C1 = { x: w/2 + r, y: h/2 + r * f }; const C1 = { x: w/2 + r, y: h/2 + r * f };
const C2 = { const C2 = {
x: w/2 + r * ( cos(angle) + f * sin(angle) ), x: w/2 + r * (cos(angle) + f * sin(angle)),
y: h/2 + r * ( sin(angle) - f * cos(angle) ) y: h/2 + r * (sin(angle) - f * cos(angle))
}; };
return new Bezier(this, [S, C1, C2, E]); return new Bezier(this, [S, C1, C2, E]);
} }

4
docs/chapters/control/lerp.js
View File

@@ -43,12 +43,12 @@ draw() {
noFill(); noFill();
this.s.forEach((s,i) => { this.s.forEach((s,i) => {
setStroke( randomColor(0.2)); setStroke(randomColor(0.2));
line( line(
i/(this.s.length-1) * this.width, 0, i/(this.s.length-1) * this.width, 0,
i/(this.s.length-1) * this.width, this.height i/(this.s.length-1) * this.width, this.height
) )
setStroke( randomColor(1.0, false )); setStroke(randomColor(1.0, false ));
drawShape(s); drawShape(s);
}) })

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

@@ -95,7 +95,7 @@ drawIteration() {
pair.forEach(b => { pair.forEach(b => {
let curve = new Bezier(this, b.points); let curve = new Bezier(this, b.points);
curve.drawCurve(); curve.drawCurve();
curve.drawBoundingBox( randomColor() ); curve.drawBoundingBox(randomColor());
}) })
}); });

2
docs/chapters/graduatedoffset/offsetting.js
View File

@@ -21,7 +21,7 @@ draw() {
}; };
drawCurve(c) { drawCurve(c) {
setStroke( randomColor() ); setStroke(randomColor() );
start() start()
c.getLUT(16).forEach(p => vertex(p.x, p.y)); c.getLUT(16).forEach(p => vertex(p.x, p.y));
end(); end();

2
docs/chapters/intersections/curve-line.js
View File

@@ -47,7 +47,7 @@ draw() {
drawLine(p1, p2) { drawLine(p1, p2) {
setStroke(`black`); setStroke(`black`);
line(p1.x, p1.y, p2.x, p2.y); line(p1.x, p1.y, p2.x, p2.y);
setStroke( randomColor() ); setStroke(randomColor() );
circle(p1.x, p1.y, 3); circle(p1.x, p1.y, 3);
circle(p2.x, p2.y, 3); circle(p2.x, p2.y, 3);
} }

2
docs/chapters/intersections/line-line.js
View File

@@ -39,7 +39,7 @@ draw() {
drawLine(p1, p2) { drawLine(p1, p2) {
setColor(`black`); setColor(`black`);
line(p1.x, p1.y, p2.x, p2.y); line(p1.x, p1.y, p2.x, p2.y);
setStroke( randomColor() ); setStroke(randomColor() );
circle(p1.x, p1.y, 2); circle(p1.x, p1.y, 2);
circle(p2.x, p2.y, 2); circle(p2.x, p2.y, 2);
} }

2
docs/chapters/molding/molding.js
View File

@@ -168,7 +168,7 @@ getIdealisedCurve(p1, p2, p3) {
d2 = dist(p3.x, p3.y, p2.x, p2.y), d2 = dist(p3.x, p3.y, p2.x, p2.y),
t = d1 / (d1 + d2), t = d1 / (d1 + d2),
{ A, B, C, S, E } = Bezier.getABC(3, p1, p2, p3, t), { A, B, C, S, E } = Bezier.getABC(3, p1, p2, p3, t),
angle = ( atan2(E.y-S.y, E.x-S.x) - atan2(B.y-S.y, B.x-S.x) + TAU ) % TAU, angle = (atan2(E.y-S.y, E.x-S.x) - atan2(B.y-S.y, B.x-S.x) + TAU) % TAU,
bc = (angle < 0 || angle > PI ? -1 : 1) * dist(S.x, S.y, E.x, E.y)/3, bc = (angle < 0 || angle > PI ? -1 : 1) * dist(S.x, S.y, E.x, E.y)/3,
de1 = t * bc, de1 = t * bc,
de2 = (1-t) * bc, de2 = (1-t) * bc,

4
docs/chapters/offsetting/offsetting.js
View File

@@ -19,7 +19,7 @@ draw() {
var reduced = this.reduce(curve); var reduced = this.reduce(curve);
reduced.forEach(c => { reduced.forEach(c => {
setStroke( randomColor() ); setStroke(randomColor() );
this.drawCurve(c); this.drawCurve(c);
circle(c.points[0].x, c.points[0].y, 2); circle(c.points[0].x, c.points[0].y, 2);
}); });
@@ -93,7 +93,7 @@ reduce(curve) {
segment = p1.split(t1, t2); segment = p1.split(t1, t2);
if (!segment.simple()) { if (!segment.simple()) {
t2 -= step; t2 -= step;
if ( abs(t1 - t2) < step) { if (abs(t1 - t2) < step) {
// we can never form a reduction // we can never form a reduction
return []; return [];
} }

8
docs/chapters/pointcurves/circle.js
View File

@@ -102,17 +102,17 @@ caclulateCenter(p1, p2, p3) {
} }
showChords(p1, p2, p3, c) { showChords(p1, p2, p3, c) {
setStroke( randomColor() ); setStroke(randomColor() );
line(p1.x, p1.y, p2.x, p2.y); line(p1.x, p1.y, p2.x, p2.y);
let m1 = { x: (p1.x+p2.x)/2, y: (p1.y+p2.y)/2 }; let m1 = { x: (p1.x+p2.x)/2, y: (p1.y+p2.y)/2 };
line(m1.x, m1.y, c.x + (c.x-m1.x)/2, c.y + (c.y-m1.y)/2); line(m1.x, m1.y, c.x + (c.x-m1.x)/2, c.y + (c.y-m1.y)/2);
setStroke( randomColor() ); setStroke(randomColor() );
line(p3.x, p3.y, p2.x, p2.y); line(p3.x, p3.y, p2.x, p2.y);
let m2 = { x: (p3.x+p2.x)/2, y: (p3.y+p2.y)/2 }; let m2 = { x: (p3.x+p2.x)/2, y: (p3.y+p2.y)/2 };
line(m2.x, m2.y, c.x + (c.x-m2.x)/2, c.y + (c.y-m2.y)/2); line(m2.x, m2.y, c.x + (c.x-m2.x)/2, c.y + (c.y-m2.y)/2);
setStroke( randomColor() ); setStroke(randomColor() );
line(p3.x, p3.y, p1.x, p1.y); line(p3.x, p3.y, p1.x, p1.y);
let m3 = { x: (p3.x+p1.x)/2, y: (p3.y+p1.y)/2 }; let m3 = { x: (p3.x+p1.x)/2, y: (p3.y+p1.y)/2 };
line(m3.x, m3.y, c.x + (c.x-m3.x)/2, c.y + (c.y-m3.y)/2); line(m3.x, m3.y, c.x + (c.x-m3.x)/2, c.y + (c.y-m3.y)/2);
@@ -131,7 +131,7 @@ showCurve(p1, p2, p3, c) {
// Check which length we need to use for our e1-e2 segment, // Check which length we need to use for our e1-e2 segment,
// corrected for whether B is "above" or "below" the baseline: // corrected for whether B is "above" or "below" the baseline:
const angle = ( atan2(E.y-S.y, E.x-S.x) - atan2(B.y-S.y, B.x-S.x) + TAU ) % TAU, const angle = (atan2(E.y-S.y, E.x-S.x) - atan2(B.y-S.y, B.x-S.x) + TAU) % TAU,
bc = (angle < 0 || angle > PI ? -1 : 1) * dist(S.x, S.y, E.x, E.y)/3, bc = (angle < 0 || angle > PI ? -1 : 1) * dist(S.x, S.y, E.x, E.y)/3,
de1 = t * bc, de1 = t * bc,
de2 = (1-t) * bc; de2 = (1-t) * bc;

4
docs/chapters/shapes/boolean.js
View File

@@ -58,7 +58,7 @@ draw() {
drawSegment(segment) { drawSegment(segment) {
setStroke( randomColor(0.2) ); setStroke(randomColor(0.2) );
start() start()
segment.getLUT(16).forEach(p => vertex(p.x, p.y)) segment.getLUT(16).forEach(p => vertex(p.x, p.y))
end(); end();
@@ -78,7 +78,7 @@ drawBoolean(s1, s2) {
ti = ti.map(s => s.split(`/`).map(parseFloat)); ti = ti.map(s => s.split(`/`).map(parseFloat));
// remove "near enough to be considered duplicate" t pairs // remove "near enough to be considered duplicate" t pairs
for(let i=ti.length-1; i>0; i--) { for(let i=ti.length-1; i>0; i--) {
if ( abs(ti[i][0] - ti[i-1][0]) < 0.01 && abs(ti[i][1] - ti[i-1][1]) < 0.01) { if (abs(ti[i][0] - ti[i-1][0]) < 0.01 && abs(ti[i][1] - ti[i-1][1]) < 0.01) {
ti.splice(i,1); ti.splice(i,1);
} }
} }

14977
docs/chapters/shapes/paper-core.js
View File

File diff suppressed because it is too large Load Diff

2
docs/chapters/tracing/tracing.js
View File

@@ -89,7 +89,7 @@ drawCurveIntervals(LUT) {
let targetDistance = i/e * dlen; let targetDistance = i/e * dlen;
while(LUT[pos].d < targetDistance) pos++; while(LUT[pos].d < targetDistance) pos++;
setStroke( randomColor() ); setStroke(randomColor() );
start(); start();
for(let j=lastpos; j<=pos; j++) vertex(LUT[j].x, LUT[j].y); for(let j=lastpos; j<=pos; j++) vertex(LUT[j].x, LUT[j].y);
lastpos = pos; lastpos = pos;

0
docs/images/chapters/arcapproximation/6f30b487d0cb60a4caeed4a199c48253.png → docs/images/chapters/arcapproximation/da76341b841df1af8a39f797e85dfe3c.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/images/chapters/canonical/344346f09b6d5d7e3ddf91084ad50d46.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/images/chapters/canonical/675217e6df3d75c86503dc2af623e14e.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
docs/images/chapters/canonical/83fe2473e20ea68b768765129ee44ae4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
docs/images/chapters/canonical/c086e72bd8aaeab37436515ab251b2df.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

0
docs/images/chapters/catmullconv/a6289e403f079730b7546ab94176d42f.png → docs/images/chapters/catmullconv/aa46749b9469341d9249ca452390d875.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

0
docs/images/chapters/circles/6b6d06464219b8b0a046cfd99fe571d1.png → docs/images/chapters/circles/5801de8227960faa9bcbae578f78c2a3.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
docs/images/chapters/circles_cubic/9c6b58f84913ca69f930a19ade6baf53.png → docs/images/chapters/circles_cubic/da768b84c91262bab8ab36f895e8569b.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
docs/images/chapters/control/882ae425daeb3f449e5a4d649b8425e7.png → docs/images/chapters/control/2cc2f0127510f2700656c2f894b36674.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

0
docs/images/chapters/control/2c5b710606f31ed8830397ad2a77d16e.png → docs/images/chapters/control/3b627846198c0cb3c542fe13cb923029.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

0
docs/images/chapters/control/c7cebd1c54c120c3a9513062e562f3a6.png → docs/images/chapters/control/71d891b569460c79765670d3f49d2da9.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
docs/images/chapters/curveintersection/914e097fe4341697e05b6fd328cc4c91.png → docs/images/chapters/curveintersection/9540ecc84c3fc63a07f5372ab031c99e.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

0
docs/images/chapters/graduatedoffset/99ff5ed1aec246be4490cc617c629138.png → docs/images/chapters/graduatedoffset/17bf62e05a1fc3387b0c210f2decff45.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
docs/images/chapters/graduatedoffset/204745d093e479adaf1fc6fbba0d9d41.png → docs/images/chapters/graduatedoffset/8cc724d5343c65685d88c92b2d069a2a.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
docs/images/chapters/intersections/dc26a6063dadc31d242f1c1c8f38bb5e.png → docs/images/chapters/intersections/4a762fb56468c342c72756a76d134f05.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
docs/images/chapters/intersections/594c2df534a1736c03cd3a96ff4a9913.png → docs/images/chapters/intersections/7003a384ec371217af2b225ae65872e7.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
docs/images/chapters/intersections/61876a2bd727df377619c5ad34ce86be.png → docs/images/chapters/intersections/cab1799841eedd1dcd1cd81b6045f40f.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

0
docs/images/chapters/molding/502de5e21415ee75ab5d2cffbc921a77.png → docs/images/chapters/molding/834af194de17a5eb2c1920773ab904e3.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

0
docs/images/chapters/molding/9a214cd85a1f0857b1b57db5e9c37b9c.png → docs/images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

0
docs/images/chapters/molding/610251fd14e24cd1378590de87ce2a74.png → docs/images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

0
docs/images/chapters/offsetting/953485135c6d856ae1327fd47e55c920.png → docs/images/chapters/offsetting/1ad78f9f9d001278c491b0f2be5cc8ea.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
docs/images/chapters/offsetting/91cd824148a388762d27e40fabb34e0d.png → docs/images/chapters/offsetting/768094c3c47d3888cf81e7a1d20d2eab.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
docs/images/chapters/pointcurves/173ea31517a72a927d561f121f0677db.png → docs/images/chapters/pointcurves/43875f6ad588bfd04cdb65b591a62052.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

0
docs/images/chapters/pointcurves/8d045d352f5017b65e60620b92d7ae29.png → docs/images/chapters/pointcurves/75f7b5b31e98444e13f17e5c3e5b7322.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
docs/images/chapters/shapes/46b3f87fa3aa9b54b688fbdfbe9ffb5e.png → docs/images/chapters/shapes/81b5d76a31fec09719eb7b00c2c82200.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 967 B

After

Width:  |  Height:  |  Size: 967 B

0
docs/images/chapters/tracing/133bf9d02801a3149c9ddb8b313e6797.png → docs/images/chapters/tracing/09cfa54ec3709d54efdce78832e42367.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

46
docs/index.html
View File

@@ -332,7 +332,7 @@ function Bezier(3,t):
<graphics-element title="Quadratic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3"> <graphics-element title="Quadratic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\control\c7cebd1c54c120c3a9513062e562f3a6.png"> <img width="275px" height="275px" src="images\chapters\control\71d891b569460c79765670d3f49d2da9.png">
<label>Quadratic interpolations</label> <label>Quadratic interpolations</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control"> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -341,7 +341,7 @@ function Bezier(3,t):
<graphics-element title="Cubic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4"> <graphics-element title="Cubic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\control\2c5b710606f31ed8830397ad2a77d16e.png"> <img width="275px" height="275px" src="images\chapters\control\3b627846198c0cb3c542fe13cb923029.png">
<label>Cubic interpolations</label> <label>Cubic interpolations</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control"> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -350,7 +350,7 @@ function Bezier(3,t):
<graphics-element title="15th degree interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15"> <graphics-element title="15th degree interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\control\882ae425daeb3f449e5a4d649b8425e7.png"> <img width="275px" height="275px" src="images\chapters\control\2cc2f0127510f2700656c2f894b36674.png">
<label>15th degree interpolations</label> <label>15th degree interpolations</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control"> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -1229,7 +1229,7 @@ function getCubicRoots(pa, pb, pc, pd) {
<graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js" > <graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="400px" height="400px" src="images\chapters\canonical\675217e6df3d75c86503dc2af623e14e.png"> <img width="400px" height="400px" src="images\chapters\canonical\c086e72bd8aaeab37436515ab251b2df.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1296,7 +1296,7 @@ function getCubicRoots(pa, pb, pc, pd) {
<graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js" > <graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="800px" height="400px" src="images\chapters\canonical\344346f09b6d5d7e3ddf91084ad50d46.png"> <img width="800px" height="400px" src="images\chapters\canonical\83fe2473e20ea68b768765129ee44ae4.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1501,7 +1501,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" > <graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\tracing\133bf9d02801a3149c9ddb8b313e6797.png"> <img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="2" max="24" step="1" value="8" class="slide-control"> <input type="range" min="2" max="24" step="1" value="8" class="slide-control">
@@ -1521,7 +1521,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js" > <graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\61876a2bd727df377619c5ad34ce86be.png"> <img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png">
<label>Line/line intersections</label> <label>Line/line intersections</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1554,13 +1554,13 @@ lli = function(line1, line2):
<graphics-element title="Quadratic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="quadratic"> <graphics-element title="Quadratic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\594c2df534a1736c03cd3a96ff4a9913.png"> <img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png">
<label>Quadratic curve/line intersections</label> <label>Quadratic curve/line intersections</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
<graphics-element title="Cubic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="cubic"> <graphics-element title="Cubic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\dc26a6063dadc31d242f1c1c8f38bb5e.png"> <img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png">
<label>Cubic curve/line intersections</label> <label>Cubic curve/line intersections</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
</div> </div>
@@ -1588,7 +1588,7 @@ lli = function(line1, line2):
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js" > <graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\curveintersection\914e097fe4341697e05b6fd328cc4c91.png"> <img width="825px" height="275px" src="images\chapters\curveintersection\9540ecc84c3fc63a07f5372ab031c99e.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control"> <input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control">
@@ -1675,7 +1675,7 @@ lli = function(line1, line2):
<graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js" > <graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\pointcurves\173ea31517a72a927d561f121f0677db.png"> <img width="275px" height="275px" src="images\chapters\pointcurves\43875f6ad588bfd04cdb65b591a62052.png">
<label>Finding a circle through three points</label> <label>Finding a circle through three points</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1689,7 +1689,7 @@ lli = function(line1, line2):
<graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true"> <graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\pointcurves\8d045d352f5017b65e60620b92d7ae29.png"> <img width="275px" height="275px" src="images\chapters\pointcurves\75f7b5b31e98444e13f17e5c3e5b7322.png">
<label>Finding the cubic e₁ and e₂ given three points </label> <label>Finding the cubic e₁ and e₂ given three points </label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1743,7 +1743,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic"> <graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\molding\9a214cd85a1f0857b1b57db5e9c37b9c.png"> <img width="825px" height="275px" src="images\chapters\molding\aefb177e5532a9f995b9d88e85582c68.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1752,7 +1752,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic"> <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\molding\502de5e21415ee75ab5d2cffbc921a77.png"> <img width="825px" height="275px" src="images\chapters\molding\834af194de17a5eb2c1920773ab904e3.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1761,7 +1761,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic" data-interpolated="true"> <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic" data-interpolated="true">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\molding\610251fd14e24cd1378590de87ce2a74.png"> <img width="825px" height="275px" src="images\chapters\molding\cdf7515d133cbf41ffbaea8c488e0924.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="10" max="200" step="1" value="100" class="slide-control"> <input type="range" min="10" max="200" step="1" value="100" class="slide-control">
@@ -1864,7 +1864,7 @@ for (coordinate, index) in LUT:
<graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js" > <graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\catmullconv\a6289e403f079730b7546ab94176d42f.png"> <img width="275px" height="275px" src="images\chapters\catmullconv\aa46749b9469341d9249ca452390d875.png">
<label>A Catmull-Rom curve</label> <label>A Catmull-Rom curve</label>
</fallback-image> </fallback-image>
<input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension"> <input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension">
@@ -2087,7 +2087,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="quadratic"> <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\91cd824148a388762d27e40fabb34e0d.png"> <img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png">
<label>Offsetting a quadratic Bézier curve</label> <label>Offsetting a quadratic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2096,7 +2096,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="cubic"> <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\953485135c6d856ae1327fd47e55c920.png"> <img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png">
<label>Offsetting a cubic Bézier curve</label> <label>Offsetting a cubic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2120,7 +2120,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="quadratic"> <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\graduatedoffset\204745d093e479adaf1fc6fbba0d9d41.png"> <img width="275px" height="275px" src="images\chapters\graduatedoffset\8cc724d5343c65685d88c92b2d069a2a.png">
<label>Offsetting a quadratic Bézier curve</label> <label>Offsetting a quadratic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2129,7 +2129,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="cubic"> <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\graduatedoffset\99ff5ed1aec246be4490cc617c629138.png"> <img width="275px" height="275px" src="images\chapters\graduatedoffset\17bf62e05a1fc3387b0c210f2decff45.png">
<label>Offsetting a cubic Bézier curve</label> <label>Offsetting a cubic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2146,7 +2146,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js" > <graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="400px" height="400px" src="images\chapters\circles\6b6d06464219b8b0a046cfd99fe571d1.png"> <img width="400px" height="400px" src="images\chapters\circles\5801de8227960faa9bcbae578f78c2a3.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control"> <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2203,7 +2203,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js" > <graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="400px" height="400px" src="images\chapters\circles_cubic\9c6b58f84913ca69f930a19ade6baf53.png"> <img width="400px" height="400px" src="images\chapters\circles_cubic\da768b84c91262bab8ab36f895e8569b.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control"> <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2319,7 +2319,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js" > <graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\arcapproximation\6f30b487d0cb60a4caeed4a199c48253.png"> <img width="275px" height="275px" src="images\chapters\arcapproximation\da76341b841df1af8a39f797e85dfe3c.png">
<label>Arc approximation of a Bézier curve</label> <label>Arc approximation of a Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control"> <input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control">

46
docs/ja-JP/index.html
View File

@@ -334,7 +334,7 @@ function Bezier(3,t):
<graphics-element title="2次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3"> <graphics-element title="2次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\control\c7cebd1c54c120c3a9513062e562f3a6.png"> <img width="275px" height="275px" src="images\chapters\control\71d891b569460c79765670d3f49d2da9.png">
<label>2次の補間</label> <label>2次の補間</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control"> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -343,7 +343,7 @@ function Bezier(3,t):
<graphics-element title="3次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4"> <graphics-element title="3次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\control\2c5b710606f31ed8830397ad2a77d16e.png"> <img width="275px" height="275px" src="images\chapters\control\3b627846198c0cb3c542fe13cb923029.png">
<label>3次の補間</label> <label>3次の補間</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control"> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -352,7 +352,7 @@ function Bezier(3,t):
<graphics-element title="15次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15"> <graphics-element title="15次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\control\882ae425daeb3f449e5a4d649b8425e7.png"> <img width="275px" height="275px" src="images\chapters\control\2cc2f0127510f2700656c2f894b36674.png">
<label>15次の補間</label> <label>15次の補間</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control"> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -1225,7 +1225,7 @@ function getCubicRoots(pa, pb, pc, pd) {
<graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js" > <graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="400px" height="400px" src="images\chapters\canonical\675217e6df3d75c86503dc2af623e14e.png"> <img width="400px" height="400px" src="images\chapters\canonical\c086e72bd8aaeab37436515ab251b2df.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1292,7 +1292,7 @@ function getCubicRoots(pa, pb, pc, pd) {
<graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js" > <graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="800px" height="400px" src="images\chapters\canonical\344346f09b6d5d7e3ddf91084ad50d46.png"> <img width="800px" height="400px" src="images\chapters\canonical\83fe2473e20ea68b768765129ee44ae4.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1497,7 +1497,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" > <graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\tracing\133bf9d02801a3149c9ddb8b313e6797.png"> <img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="2" max="24" step="1" value="8" class="slide-control"> <input type="range" min="2" max="24" step="1" value="8" class="slide-control">
@@ -1517,7 +1517,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js" > <graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\61876a2bd727df377619c5ad34ce86be.png"> <img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png">
<label>Line/line intersections</label> <label>Line/line intersections</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1550,13 +1550,13 @@ lli = function(line1, line2):
<graphics-element title="Quadratic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="quadratic"> <graphics-element title="Quadratic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\594c2df534a1736c03cd3a96ff4a9913.png"> <img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png">
<label>Quadratic curve/line intersections</label> <label>Quadratic curve/line intersections</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
<graphics-element title="Cubic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="cubic"> <graphics-element title="Cubic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\dc26a6063dadc31d242f1c1c8f38bb5e.png"> <img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png">
<label>Cubic curve/line intersections</label> <label>Cubic curve/line intersections</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
</div> </div>
@@ -1584,7 +1584,7 @@ lli = function(line1, line2):
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js" > <graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\curveintersection\914e097fe4341697e05b6fd328cc4c91.png"> <img width="825px" height="275px" src="images\chapters\curveintersection\9540ecc84c3fc63a07f5372ab031c99e.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control"> <input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control">
@@ -1671,7 +1671,7 @@ lli = function(line1, line2):
<graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js" > <graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\pointcurves\173ea31517a72a927d561f121f0677db.png"> <img width="275px" height="275px" src="images\chapters\pointcurves\43875f6ad588bfd04cdb65b591a62052.png">
<label>Finding a circle through three points</label> <label>Finding a circle through three points</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1685,7 +1685,7 @@ lli = function(line1, line2):
<graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true"> <graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\pointcurves\8d045d352f5017b65e60620b92d7ae29.png"> <img width="275px" height="275px" src="images\chapters\pointcurves\75f7b5b31e98444e13f17e5c3e5b7322.png">
<label>Finding the cubic e₁ and e₂ given three points </label> <label>Finding the cubic e₁ and e₂ given three points </label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1739,7 +1739,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic"> <graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\molding\9a214cd85a1f0857b1b57db5e9c37b9c.png"> <img width="825px" height="275px" src="images\chapters\molding\aefb177e5532a9f995b9d88e85582c68.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1748,7 +1748,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic"> <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\molding\502de5e21415ee75ab5d2cffbc921a77.png"> <img width="825px" height="275px" src="images\chapters\molding\834af194de17a5eb2c1920773ab904e3.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1757,7 +1757,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic" data-interpolated="true"> <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic" data-interpolated="true">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\molding\610251fd14e24cd1378590de87ce2a74.png"> <img width="825px" height="275px" src="images\chapters\molding\cdf7515d133cbf41ffbaea8c488e0924.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="10" max="200" step="1" value="100" class="slide-control"> <input type="range" min="10" max="200" step="1" value="100" class="slide-control">
@@ -1860,7 +1860,7 @@ for (coordinate, index) in LUT:
<graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js" > <graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\catmullconv\a6289e403f079730b7546ab94176d42f.png"> <img width="275px" height="275px" src="images\chapters\catmullconv\aa46749b9469341d9249ca452390d875.png">
<label>A Catmull-Rom curve</label> <label>A Catmull-Rom curve</label>
</fallback-image> </fallback-image>
<input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension"> <input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension">
@@ -2083,7 +2083,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="quadratic"> <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\91cd824148a388762d27e40fabb34e0d.png"> <img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png">
<label>Offsetting a quadratic Bézier curve</label> <label>Offsetting a quadratic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2092,7 +2092,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="cubic"> <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\953485135c6d856ae1327fd47e55c920.png"> <img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png">
<label>Offsetting a cubic Bézier curve</label> <label>Offsetting a cubic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2116,7 +2116,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="quadratic"> <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\graduatedoffset\204745d093e479adaf1fc6fbba0d9d41.png"> <img width="275px" height="275px" src="images\chapters\graduatedoffset\8cc724d5343c65685d88c92b2d069a2a.png">
<label>Offsetting a quadratic Bézier curve</label> <label>Offsetting a quadratic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2125,7 +2125,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="cubic"> <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\graduatedoffset\99ff5ed1aec246be4490cc617c629138.png"> <img width="275px" height="275px" src="images\chapters\graduatedoffset\17bf62e05a1fc3387b0c210f2decff45.png">
<label>Offsetting a cubic Bézier curve</label> <label>Offsetting a cubic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2142,7 +2142,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js" > <graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="400px" height="400px" src="images\chapters\circles\6b6d06464219b8b0a046cfd99fe571d1.png"> <img width="400px" height="400px" src="images\chapters\circles\5801de8227960faa9bcbae578f78c2a3.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control"> <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2199,7 +2199,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js" > <graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="400px" height="400px" src="images\chapters\circles_cubic\9c6b58f84913ca69f930a19ade6baf53.png"> <img width="400px" height="400px" src="images\chapters\circles_cubic\da768b84c91262bab8ab36f895e8569b.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control"> <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2315,7 +2315,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js" > <graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\arcapproximation\6f30b487d0cb60a4caeed4a199c48253.png"> <img width="275px" height="275px" src="images\chapters\arcapproximation\da76341b841df1af8a39f797e85dfe3c.png">
<label>Arc approximation of a Bézier curve</label> <label>Arc approximation of a Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control"> <input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control">

2
docs/js/custom-element/lib/perform-code-surgery.js
View File

@@ -22,7 +22,7 @@ export default function performCodeSurgery(code) {
// 3. rewrite all public GraphicsAPI functions to have the required `this.` prefix // 3. rewrite all public GraphicsAPI functions to have the required `this.` prefix
GraphicsAPI.methods.forEach((fn) => { GraphicsAPI.methods.forEach((fn) => {
const re = new RegExp(`([\\s\\r\\n])${fn}\\(`, `g`); const re = new RegExp(`([({\\s\\r\\n])${fn}\\(`, `g`);
code = code.replace(re, `$1this.${fn}(`); code = code.replace(re, `$1this.${fn}(`);
}); });

46
docs/zh-CN/index.html
View File

@@ -328,7 +328,7 @@ function Bezier(3,t):
<graphics-element title="二次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3"> <graphics-element title="二次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\control\c7cebd1c54c120c3a9513062e562f3a6.png"> <img width="275px" height="275px" src="images\chapters\control\71d891b569460c79765670d3f49d2da9.png">
<label>二次插值</label> <label>二次插值</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control"> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -337,7 +337,7 @@ function Bezier(3,t):
<graphics-element title="三次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4"> <graphics-element title="三次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\control\2c5b710606f31ed8830397ad2a77d16e.png"> <img width="275px" height="275px" src="images\chapters\control\3b627846198c0cb3c542fe13cb923029.png">
<label>三次插值</label> <label>三次插值</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control"> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -346,7 +346,7 @@ function Bezier(3,t):
<graphics-element title="15次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15"> <graphics-element title="15次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\control\882ae425daeb3f449e5a4d649b8425e7.png"> <img width="275px" height="275px" src="images\chapters\control\2cc2f0127510f2700656c2f894b36674.png">
<label>15次插值</label> <label>15次插值</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control"> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -1219,7 +1219,7 @@ function getCubicRoots(pa, pb, pc, pd) {
<graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js" > <graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="400px" height="400px" src="images\chapters\canonical\675217e6df3d75c86503dc2af623e14e.png"> <img width="400px" height="400px" src="images\chapters\canonical\c086e72bd8aaeab37436515ab251b2df.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1286,7 +1286,7 @@ function getCubicRoots(pa, pb, pc, pd) {
<graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js" > <graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="800px" height="400px" src="images\chapters\canonical\344346f09b6d5d7e3ddf91084ad50d46.png"> <img width="800px" height="400px" src="images\chapters\canonical\83fe2473e20ea68b768765129ee44ae4.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1491,7 +1491,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" > <graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\tracing\133bf9d02801a3149c9ddb8b313e6797.png"> <img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="2" max="24" step="1" value="8" class="slide-control"> <input type="range" min="2" max="24" step="1" value="8" class="slide-control">
@@ -1511,7 +1511,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js" > <graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\61876a2bd727df377619c5ad34ce86be.png"> <img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png">
<label>Line/line intersections</label> <label>Line/line intersections</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1544,13 +1544,13 @@ lli = function(line1, line2):
<graphics-element title="Quadratic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="quadratic"> <graphics-element title="Quadratic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\594c2df534a1736c03cd3a96ff4a9913.png"> <img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png">
<label>Quadratic curve/line intersections</label> <label>Quadratic curve/line intersections</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
<graphics-element title="Cubic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="cubic"> <graphics-element title="Cubic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\dc26a6063dadc31d242f1c1c8f38bb5e.png"> <img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png">
<label>Cubic curve/line intersections</label> <label>Cubic curve/line intersections</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
</div> </div>
@@ -1578,7 +1578,7 @@ lli = function(line1, line2):
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js" > <graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\curveintersection\914e097fe4341697e05b6fd328cc4c91.png"> <img width="825px" height="275px" src="images\chapters\curveintersection\9540ecc84c3fc63a07f5372ab031c99e.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control"> <input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control">
@@ -1665,7 +1665,7 @@ lli = function(line1, line2):
<graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js" > <graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\pointcurves\173ea31517a72a927d561f121f0677db.png"> <img width="275px" height="275px" src="images\chapters\pointcurves\43875f6ad588bfd04cdb65b591a62052.png">
<label>Finding a circle through three points</label> <label>Finding a circle through three points</label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1679,7 +1679,7 @@ lli = function(line1, line2):
<graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true"> <graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\pointcurves\8d045d352f5017b65e60620b92d7ae29.png"> <img width="275px" height="275px" src="images\chapters\pointcurves\75f7b5b31e98444e13f17e5c3e5b7322.png">
<label>Finding the cubic e₁ and e₂ given three points </label> <label>Finding the cubic e₁ and e₂ given three points </label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1733,7 +1733,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic"> <graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\molding\9a214cd85a1f0857b1b57db5e9c37b9c.png"> <img width="825px" height="275px" src="images\chapters\molding\aefb177e5532a9f995b9d88e85582c68.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1742,7 +1742,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic"> <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\molding\502de5e21415ee75ab5d2cffbc921a77.png"> <img width="825px" height="275px" src="images\chapters\molding\834af194de17a5eb2c1920773ab904e3.png">
<label></label> <label></label>
</fallback-image></graphics-element> </fallback-image></graphics-element>
@@ -1751,7 +1751,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic" data-interpolated="true"> <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic" data-interpolated="true">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\molding\610251fd14e24cd1378590de87ce2a74.png"> <img width="825px" height="275px" src="images\chapters\molding\cdf7515d133cbf41ffbaea8c488e0924.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="10" max="200" step="1" value="100" class="slide-control"> <input type="range" min="10" max="200" step="1" value="100" class="slide-control">
@@ -1854,7 +1854,7 @@ for (coordinate, index) in LUT:
<graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js" > <graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\catmullconv\a6289e403f079730b7546ab94176d42f.png"> <img width="275px" height="275px" src="images\chapters\catmullconv\aa46749b9469341d9249ca452390d875.png">
<label>A Catmull-Rom curve</label> <label>A Catmull-Rom curve</label>
</fallback-image> </fallback-image>
<input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension"> <input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension">
@@ -2077,7 +2077,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="quadratic"> <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\91cd824148a388762d27e40fabb34e0d.png"> <img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png">
<label>Offsetting a quadratic Bézier curve</label> <label>Offsetting a quadratic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2086,7 +2086,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="cubic"> <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\953485135c6d856ae1327fd47e55c920.png"> <img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png">
<label>Offsetting a cubic Bézier curve</label> <label>Offsetting a cubic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2110,7 +2110,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="quadratic"> <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="quadratic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\graduatedoffset\204745d093e479adaf1fc6fbba0d9d41.png"> <img width="275px" height="275px" src="images\chapters\graduatedoffset\8cc724d5343c65685d88c92b2d069a2a.png">
<label>Offsetting a quadratic Bézier curve</label> <label>Offsetting a quadratic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2119,7 +2119,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="cubic"> <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="cubic">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\graduatedoffset\99ff5ed1aec246be4490cc617c629138.png"> <img width="275px" height="275px" src="images\chapters\graduatedoffset\17bf62e05a1fc3387b0c210f2decff45.png">
<label>Offsetting a cubic Bézier curve</label> <label>Offsetting a cubic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control"> <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2136,7 +2136,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js" > <graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="400px" height="400px" src="images\chapters\circles\6b6d06464219b8b0a046cfd99fe571d1.png"> <img width="400px" height="400px" src="images\chapters\circles\5801de8227960faa9bcbae578f78c2a3.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control"> <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2193,7 +2193,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js" > <graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="400px" height="400px" src="images\chapters\circles_cubic\9c6b58f84913ca69f930a19ade6baf53.png"> <img width="400px" height="400px" src="images\chapters\circles_cubic\da768b84c91262bab8ab36f895e8569b.png">
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control"> <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2309,7 +2309,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js" > <graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js" >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\arcapproximation\6f30b487d0cb60a4caeed4a199c48253.png"> <img width="275px" height="275px" src="images\chapters\arcapproximation\da76341b841df1af8a39f797e85dfe3c.png">
<label>Arc approximation of a Bézier curve</label> <label>Arc approximation of a Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control"> <input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control">