info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-30 03:30:34 +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

5
docs/chapters/reordering/content.en-GB.md
View File

@@ -134,4 +134,7 @@ The steps taken here are:
And we're done: we now have an expression that lets us approximate an `n+1`<sup>th</sup> order curve with a lower `n`<sup>th</sup> order curve. It won't be an exact fit, but it's definitely a best approximation. So, let's implement these rules for raising and lowering curve order to a (semi) random curve, using the following graphic. Select the sketch, which has movable control points, and press your up and down arrow keys to raise or lower the curve order.
<graphics-element title="A variable-order Bézier curve" src="./reorder.js"></graphics-element>
<graphics-element title="A variable-order Bézier curve" src="./reorder.js">
<button class="raise">raise</button>
<button class="lower">lower</button>
</graphics-element>

46
docs/chapters/reordering/reorder.js
View File

@@ -9,6 +9,15 @@ setup() {
});
}
setMovable(points);
this.bindButtons();
}
bindButtons() {
let rbutton = find(`.raise`);
if (rbutton) rbutton.listen(`click`, v => this.raise());
let lbutton = find(`.lower`);
if (lbutton) lbutton.listen(`click`, v => this.lower());
}
draw() {
@@ -63,6 +72,7 @@ raise() {
this.points = np;
resetMovable(this.points);
redraw();
}
lower() {
@@ -116,43 +126,9 @@ lower() {
}));
resetMovable(this.points);
}
onKeyDown() {
const key = this.keyboard.currentKey;
if (key === `ArrowUp`) {
this.raise();
}
if (key === `ArrowDown`) {
this.lower();
}
redraw();
}
onMouseMove() {
if (this.cursor.down && !this.currentPoint) {
if (this.cursor.y < this.height/2) {
this.lowerTimer = clearInterval(this.lowerTimer);
if (!this.raiseTimer) {
this.raiseTimer = setInterval(() => {
this.raise();
redraw();
}, 1000);
}
}
if (this.cursor.y > this.height/2) {
this.raiseTimer = clearInterval(this.raiseTimer);
if (!this.lowerTimer) {
this.lowerTimer = setInterval(() => {
this.lower();
redraw();
}, 1000);
}
}
} else { redraw(); }
}
onMouseUp() {
this.raiseTimer = clearInterval(this.raiseTimer);
this.lowerTimer = clearInterval(this.lowerTimer);
redraw();
}