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

regenerated all images

Browse Source
This commit is contained in:
Pomax
2020-09-06 17:23:52 -07:00
parent 17c50a403b
commit 42b9818441
66 changed files with 407 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/chapters/pointvectors/content.en-GB.md
View File

@@ -73,6 +73,6 @@ treated as a sequence of three (elementary) shear operations. When we combine th
The following two graphics show the tangent and normal along a quadratic and cubic curve, with the direction vector coloured blue, and the normal vector coloured red (the markers are spaced out evenly as *t*-intervals, not spaced equidistant).
<div class="figure">
<graphics-element title="Quadratic Bézier tangents and normals" src="./quadratic.js"></graphics-element>
<graphics-element title="Cubic Bézier tangents and normals" src="./cubic.js"></graphics-element>
<graphics-element title="Quadratic Bézier tangents and normals" src="./pointvectors.js" data-type="quadratic"></graphics-element>
<graphics-element title="Cubic Bézier tangents and normals" src="./pointvectors.js" data-type="cubic"></graphics-element>
</div>

36
docs/chapters/pointvectors/cubic.js → docs/chapters/pointvectors/pointvectors.js
View File

@@ -1,7 +1,16 @@
let curve;
setup() {
curve = Bezier.defaultCubic(this);
const type = this.type = this.parameters.type ?? `quadratic`;
if (type === `quadratic`) {
curve = Bezier.defaultQuadratic(this);
} else {
curve = Bezier.defaultCubic(this);
curve.points[0].x = 30;
curve.points[0].y = 230;
curve.points[1].x = 75;
curve.points[1].y = 50;
}
setMovable(curve.points);
}
@@ -15,7 +24,7 @@ draw() {
for(let i=0; i<=10; i++) {
let t = i/10.0;
let p = curve.get(t);
let d = this.getDerivative(t, pts);
let d = this.type === `quadratic` ? this.getQuadraticDerivative(t, pts) : this.getCubicDerivative(t, pts);
let m = sqrt(d.x*d.x + d.y*d.y);
d = { x: d.x/m, y: d.y/m };
@@ -27,9 +36,6 @@ draw() {
setStroke(`red`);
line(p.x, p.y, p.x + n.x*f, p.y + n.y*f);
setStroke(`purple`);
line(p.x, p.y, p.x - n.x*f, p.y - n.y*f);
setStroke(`black`);
circle(p.x, p.y, 3);
}
@@ -37,7 +43,25 @@ draw() {
curve.drawPoints();
}
getDerivative(t, points) {
getQuadraticDerivative(t, points) {
let mt = (1 - t), d = [
{
x: 2 * (points[1].x - points[0].x),
y: 2 * (points[1].y - points[0].y)
},
{
x: 2 * (points[2].x - points[1].x),
y: 2 * (points[2].y - points[1].y)
}
];
return {
x: mt * d[0].x + t * d[1].x,
y: mt * d[0].y + t * d[1].y
};
}
getCubicDerivative(t, points) {
let mt = (1 - t), a = mt*mt, b = mt*t, c = t*t, d = [
{
x: 3 * (points[1].x - points[0].x),

61
docs/chapters/pointvectors/quadratic.js
View File

@@ -1,61 +0,0 @@
let curve;
setup() {
curve = Bezier.defaultQuadratic(this);
setMovable(curve.points);
}
draw() {
clear();
curve.drawSkeleton();
const pts = curve.points;
const f = 15;
for(let i=0; i<=10; i++) {
let t = i/10.0;
let p = curve.get(t);
let d = this.getDerivative(t, pts);
let m = sqrt(d.x*d.x + d.y*d.y);
d = { x: d.x/m, y: d.y/m };
let n = this.getNormal(t, d);
setStroke(`blue`);
line(p.x, p.y, p.x + d.x*f, p.y + d.y*f);
setStroke(`red`);
line(p.x, p.y, p.x + n.x*f, p.y + n.y*f);
setStroke(`purple`);
line(p.x, p.y, p.x - n.x*f, p.y - n.y*f);
setStroke(`black`);
circle(p.x, p.y, 3);
}
curve.drawPoints();
}
getDerivative(t, points) {
let mt = (1 - t), d = [
{
x: 2 * (points[1].x - points[0].x),
y: 2 * (points[1].y - points[0].y)
},
{
x: 2 * (points[2].x - points[1].x),
y: 2 * (points[2].y - points[1].y)
}
];
return {
x: mt * d[0].x + t * d[1].x,
y: mt * d[0].y + t * d[1].y
};
}
getNormal(t, d) {
const q = sqrt(d.x * d.x + d.y * d.y);
return { x: -d.y / q, y: d.x / q };
}