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

full circle chapters rewrite

Browse Source
This commit is contained in:
Pomax
2021-04-19 11:31:23 -07:00
parent bb1bf14e75
commit c990a4f48d
3 changed files with 392 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,10 @@
let guess, w, h, pad = 75, r;
let curve, w, h, pad = 75, r;
setup() {
w = this.width;
h = this.height;
r = w/2 - pad;
guess = new Bezier(this,
{ x: w - pad, y: h/2},
{ x: w - pad, y: h/2},
{ x: w - pad, y: h/2},
{ x: w - pad, y: h/2}
);
setSlider(`.slide-control`, `angle`, -PI/4, v => this.updateCurve(v));
w = this.width;
h = this.height;
r = w/2 - pad;
setSlider(`.slide-control`, `angle`, 1.4);
}
draw() {
@@ -28,58 +22,24 @@ draw() {
let a = this.angle;
wedge(w/2, h/2, r, a < 0 ? a : 0, a < 0 ? 0 : a);
guess.drawSkeleton(`lightblue`);
guess.drawCurve(`lightblue`);
let real = this.getRealCurve(guess.points[0], guess.points[3], this.angle);
real.drawSkeleton();
real.drawCurve();
setColor(`black`);
real.points.forEach(p => {
this.updateCurve(this.angle);
curve.drawSkeleton();
curve.drawCurve();
curve.points.forEach(p => {
circle(p.x, p.y, 2);
text(`(${p.x|0},${p.y|0})`, p.x+5, p.y);
});
}
updateCurve(a) {
let angle = -a;
const S = guess.points[0],
B = {
x: w/2 + r * cos(angle/2),
y: h/2 + r * sin(angle/2)
},
E = guess.points[3] = {
x: w/2 + r * cos(angle),
y: h/2 + r * sin(angle)
};
guess = this.guessCurve(S,B,E);
return angle;
}
guessCurve(S, B, E) {
const C = { x: (S.x + E.x)/2, y: (S.y + E.y)/2 }, // we know we're working with t=0.5
A = { x: B.x + (B.x-C.x)/3, y: B.y + (B.y-C.y)/3 }, // cubic ratio at t=0.5 is 1/3
bx = (E.x-S.x)/4,
by = (E.y-S.y)/4,
e1 = { x: B.x - bx, y: B.y - by },
e2 = { x: B.x + bx, y: B.y + by },
v1 = { x: A.x + (e1.x-A.x)*2, y: A.y + (e1.y-A.y)*2 },
v2 = { x: A.x + (e2.x-A.x)*2, y: A.y + (e2.y-A.y)*2 },
C1 = { x: S.x + (v1.x-S.x)*2, y: S.y + (v1.y-S.y)*2 },
C2 = { x: E.x + (v2.x-E.x)*2, y: E.y + (v2.y-E.y)*2 };
return new Bezier(this, [S, C1, C2, E]);
}
getRealCurve(S, E, angle) {
updateCurve(angle) {
const f = 4/3 * tan(angle/4);
const S = { x: w/2 + r, y: h/2 };
const C1 = { x: w/2 + r, y: h/2 + r * f };
const C2 = {
x: w/2 + r * (cos(angle) + f * sin(angle)),
y: h/2 + r * (sin(angle) - f * cos(angle))
};
return new Bezier(this, [S, C1, C2, E]);
const E = { x: w/2 + r * cos(angle), y: h/2 + r * sin(angle) };
curve = new Bezier(this, [S, C1, C2, E]);
}