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

full regeneration

Browse Source
This commit is contained in:
Pomax
2020-09-19 18:34:03 -07:00
parent ad872f83c5
commit 4c0e71cd4a
234 changed files with 1468 additions and 1376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/chapters/aligning/aligning.js
View File

@@ -15,6 +15,7 @@ draw() {
translate(this.width/2, 0);
line(0,0,0,this.height);
// draw the realigned curve:
this.drawRTCurve(
this.rotatePoints(
this.translatePoints(
@@ -25,7 +26,7 @@ draw() {
}
translatePoints(points) {
// translate to (0,0)
// translate so that the curve starts at (0,0)
let m = points[0];
return points.map(v => {
return {
@@ -36,7 +37,7 @@ translatePoints(points) {
}
rotatePoints(points) {
// rotate so that last point is (...,0)
// rotate the curve so that the point is (...,0)
let degree = curve.points.length - 1;
let dx = points[degree].x;
let dy = points[degree].y;
@@ -50,13 +51,18 @@ rotatePoints(points) {
}
drawRTCurve(points) {
let degree = curve.points.length - 1;
let ncurve = new Bezier(this, points);
// draw axes
translate(60, this.height/2);
setStroke(`grey`);
line(0,-this.height,0,this.height);
line(-60,0,this.width,0);
line(0, -this.height, 0, this.height);
line(-60, 0, this.width, 0);
// draw transformed curve
let degree = curve.points.length - 1;
let ncurve = new Bezier(this, points);
ncurve.drawCurve();
// and label the last point in the transformed curve
setFill(`black`);
text(`(0,0)`, 5,15);
text(`(${points[degree].x|0},0)`, points[degree].x, -5, CENTER);

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

@@ -40,7 +40,8 @@ If we drop all the zero-terms, this gives us:
We can see that our original curve definition has been simplified considerably. The following graphics illustrate the result of aligning our example curves to the x-axis, with the cubic case using the coordinates that were just used in the example formulae:
<div class="figure">
<graphics-element title="Aligning a quadratic curve" width="550" src="./aligning.js" data-type="quadratic"></graphics-element>
&nbsp;
<graphics-element title="Aligning a cubic curve" width="550" src="./aligning.js" data-type="cubic"></graphics-element>
</div>