info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-03 05:12:43 +02:00
Code Issues Releases Wiki Activity

added sliders to sketches that should have one, improved lazy loading

Browse Source
This commit is contained in:
Pomax
2020-08-21 23:39:36 -07:00
parent 65173c10a2
commit ad5da1f088
67 changed files with 833 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/chapters/pointvectors3d/content.en-GB.md
View File

@@ -24,7 +24,9 @@ Let's unpack that a little:
And then we're done, we found "the" normal vector for a 3D curve. Let's see what that looks like for a sample curve, shall we? You can move your cursor across the graphic from left to right, to show the normal at a point with a t value that is based on your cursor position: all the way on the left is 0, all the way on the right = 1, midway is t=0.5, etc:
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./frenet.js"></graphics-element>
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./frenet.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
However, if you've played with that graphic a bit, you might have noticed something odd. The normal seems to "suddenly twist around" around between t=0.5 and t=0.9... Why is doing that?
@@ -109,8 +111,10 @@ Ignoring comments, this is certainly more code than when we were just computing
Speaking of better looking, what does this actually look like? Let's revisit that earlier curve, but this time use rotation minimising frames rather than Frenet frames:
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./rotation-minimizing.js"></graphics-element>
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./rotation-minimizing.js">
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
</graphics-element>
That looks much better!
That looks so much better!
For those reading along with the code: we don't even strictly speaking need a Frenet frame to start with: we could, for instance, treat the z-axis as our initial axis of rotation, so that our initial normal is **(0,0,1) × tangent**, and then take things from there, but having that initial "mathematically correct" frame so that the initial normal seems to line up based on the curve's orientation in 3D space is just nice.

26
docs/chapters/pointvectors3d/frenet.js
View File

@@ -26,6 +26,11 @@ setup() {
this.cxz = new Bezier(this, points.map(p => projectXZ(p)));
this.cyz = new Bezier(this, points.map(p => projectYZ(p)));
this.t = 0;
setSlider(`.slide-control`, v => this.setPosition(v));
}
setPosition(v) {
this.t = v;
}
draw() {
@@ -134,24 +139,3 @@ drawVector(from, vec, length, color, label) {
});
text(label, from.x + txt.x, from.y + txt.y);
}
onMouseMove() {
this.t = constrain(
map(this.cursor.x,0,this.width,-0.1, 1.1)
,0,1
);
redraw();
}
onKeyDown() {
let key = this.keyboard.currentKey;
if (key === `ArrowUp`) {
this.t += 0.01;
if (this.t > 1) this.t = 1;
}
if (key === `ArrowDown`) {
this.t -= 0.01;
if (this.t < 0) this.t = 0;
}
redraw();
}

26
docs/chapters/pointvectors3d/rotation-minimizing.js
View File

@@ -26,6 +26,11 @@ setup() {
this.cxz = new Bezier(this, points.map(p => projectXZ(p)));
this.cyz = new Bezier(this, points.map(p => projectYZ(p)));
this.t = 0;
setSlider(`.slide-control`, v => this.setPosition(v));
}
setPosition(v) {
this.t = v;
}
draw() {
@@ -190,24 +195,3 @@ drawVector(from, vec, length, color, label) {
});
text(label, from.x + txt.x, from.y + txt.y);
}
onMouseMove() {
this.t = constrain(
map(this.cursor.x,0,this.width,-0.1, 1.1)
,0,1
);
redraw();
}
onKeyDown() {
let key = this.keyboard.currentKey;
if (key === `ArrowUp`) {
this.t += 0.01;
if (this.t > 1) this.t = 1;
}
if (key === `ArrowDown`) {
this.t -= 0.01;
if (this.t < 0) this.t = 0;
}
redraw();
}