1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-19 06:52:02 +02:00

wrapping up molding

This commit is contained in:
Pomax
2020-09-26 11:51:00 -07:00
parent 6860a62ba5
commit 328b95e663
11 changed files with 44 additions and 51 deletions

View File

@@ -1,34 +0,0 @@
let curve;
setup() {
curve = Bezier.defaultCubic(this);
setMovable(curve.points);
setSlider(`.slide-control`, `position`, 0.5);
}
draw() {
clear();
const blue = `lightblue`;
const t = this.position;
const {A,B,C,S,E} = curve.getABC(t);
const struts = curve.drawStruts(t, blue, false);
curve.drawSkeleton(blue);
curve.drawCurve(`black`);
setStroke(blue);
line(S.x, S.y, E.x, E.y);
line(A.x, A.y, C.x, C.y);
curve.drawPoints();
[A,B,C].forEach(p => circle(p.x, p.y, 3));
setFill(`black`);
text(`A`, A.x+10, A.y);
text(`B`, B.x+10, B.y);
text(`C`, C.x+10, C.y);
setStroke(`purple`);
const lbl = [`v1`, `v2`, `e1`, `e2`];
[struts[4], struts[6], struts[7], struts[8]].forEach((p,i) => {
circle(p.x, p.y, 2);
text(lbl[i], p.x+10, p.y);
});
}

View File

@@ -14,6 +14,7 @@ setup() {
draw() {
clear();
// First and foremost, the curve itself
curve.drawSkeleton();
curve.drawCurve();
curve.drawPoints();
@@ -21,6 +22,7 @@ draw() {
nextPanel();
// then the "as you're moving a point" curve:
curve.drawSkeleton(`lightblue`);
curve.drawCurve(`lightblue`);
curve.points.forEach(p => circle(p.x, p.y, 2));
@@ -28,6 +30,7 @@ draw() {
nextPanel();
// And finally, only the result
this.drawResult();
}
@@ -57,6 +60,10 @@ drawMark() {
}
drawQuadraticMark() {
// This is the function that composes a new quadratic curve
// based on the established start and end points, as well as
// the information it knows about point B that you started
// when when you clicked/tapped the graphic.
let {B, t} = this.mark;
setFill(`black`);
text(`t: ${t.toFixed(5)}`, this.panelWidth/2, 15, CENTER);
@@ -72,7 +79,6 @@ drawQuadraticMark() {
text(lbl[i], p.x + 10, p.y);
});
if (this.currentPoint) {
let {A,B,C,S,E} = curve.getABC(t, this.position);
setColor(`purple`);
@@ -88,6 +94,10 @@ drawQuadraticMark() {
}
drawCubicMark() {
// This is the function that composes a new cubic curve based
// on the established start and end points, as well as the
// information it knows about point B that you started when
// when you clicked/tapped the graphic.
const S = curve.points[0],
E = curve.points[curve.order],
{B, t, e1, e2} = this.mark,
@@ -98,9 +108,16 @@ drawCubicMark() {
ne1 = { x: nB.x + d1.x, y: nB.y + d1.y },
ne2 = { x: nB.x + d2.x, y: nB.y + d2.y },
{A, C} = curve.getABC(t, nB),
// The cubic case requires us to derive two control points,
// which we'll do in a separate function to keep the code
// at least somewhat manageable.
{v1, v2, C1, C2} = this.deriveControlPoints(S, A, E, ne1, ne2, t);
if (this.parameters.interpolated) {
// For the last example, we need to show what the "ideal" curve
// looks like, in addition to the one we actually get when we
// rely on the B we picked with the `t` value and e1/e2 points
// that point B had...
const ideal = this.getIdealisedCurve(S, nB, E);
this.ideal = new Bezier(this, [ideal.S, ideal.C1, ideal.C2, ideal.E]);
}
@@ -140,7 +157,9 @@ drawCubicMark() {
}
deriveControlPoints(S, A, E, e1, e2, t) {
// And then use those to derive the correct v1/v2/C1/C2 coordinates
// Deriving the control points is effectively "doing what
// we talk about in the section", in code:
const v1 = {
x: A.x - (A.x - e1.x)/(1-t),
y: A.y - (A.y - e1.y)/(1-t)
@@ -163,6 +182,10 @@ deriveControlPoints(S, A, E, e1, e2, t) {
}
getIdealisedCurve(p1, p2, p3) {
// This "reruns" the curve composition, but with a `t` value
// that is unrelated to the actual point B we picked, instead
// using whatever the appropriate `t` value would be if we were
// trying to fit a circular arc, as per earlier in the section.
const c = utils.getccenter(p1, p2, p3),
d1 = dist(p1.x, p1.y, p2.x, p2.y),
d2 = dist(p3.x, p3.y, p2.x, p2.y),
@@ -195,11 +218,13 @@ drawResult() {
last.points.forEach(p => circle(p.x, p.y, 2));
if (this.mark) {
// Did you click/touch somewhere on the curve?
let t = this.mark.t;
let B = last.get(t);
circle(B.x, B.y, 3);
if (this.ideal) {
// Do we want to show the "interpolated" composition?
let d = dist(this.mark.B.x, this.mark.B.y, this.position.x, this.position.y);
let t = min(this.falloff, d) / this.falloff;
this.ideal.drawCurve(`lightblue`);
@@ -219,10 +244,12 @@ drawResult() {
onMouseDown() {
if (this.currentPoint !== this.position) {
// "moving one of the curve's construction points"
this.mark = false;
this.position.projection = false;
}
else if (this.position.projection) {
// "moving an on-curve point"
let t = this.position.projection.t;
if (this.type === `quadratic`) {
this.mark = {

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@@ -31,7 +31,7 @@
<meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-26T16:36:40+00:00" />
<meta property="og:updated_time" content="2020-09-26T18:25:04+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" />
@@ -5023,7 +5023,7 @@ for (coordinate, index) in LUT:
>
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="./images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
<img width="825px" height="275px" src="./images/chapters/molding/2bd215d1db191b52a89a94727b6aa5ce.png" loading="lazy" />
<label></label> </fallback-image
></graphics-element>
<p>
@@ -5041,7 +5041,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="./images/chapters/molding/834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
<img width="825px" height="275px" src="./images/chapters/molding/a54f990aa49fb9ea8200b59259f955f3.png" loading="lazy" />
<label></label> </fallback-image
></graphics-element>
<p>
@@ -5064,7 +5064,7 @@ for (coordinate, index) in LUT:
>
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="./images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
<img width="825px" height="275px" src="./images/chapters/molding/1039d0bb0e49cfb472c2fa37f9010190.png" loading="lazy" />
<label></label>
</fallback-image>
<input type="range" min="10" max="200" step="1" value="100" class="slide-control" />

View File

@@ -33,7 +33,7 @@
<meta property="og:locale" content="ja-JP" />
<meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-26T16:36:40+00:00" />
<meta property="og:updated_time" content="2020-09-26T18:25:04+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" />
@@ -4860,7 +4860,7 @@ for (coordinate, index) in LUT:
>
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="./images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
<img width="825px" height="275px" src="./images/chapters/molding/2bd215d1db191b52a89a94727b6aa5ce.png" loading="lazy" />
<label></label> </fallback-image
></graphics-element>
<p>
@@ -4878,7 +4878,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="./images/chapters/molding/834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
<img width="825px" height="275px" src="./images/chapters/molding/a54f990aa49fb9ea8200b59259f955f3.png" loading="lazy" />
<label></label> </fallback-image
></graphics-element>
<p>
@@ -4901,7 +4901,7 @@ for (coordinate, index) in LUT:
>
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="./images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
<img width="825px" height="275px" src="./images/chapters/molding/1039d0bb0e49cfb472c2fa37f9010190.png" loading="lazy" />
<label></label>
</fallback-image>
<input type="range" min="10" max="200" step="1" value="100" class="slide-control" />

View File

@@ -27,7 +27,7 @@
<meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" />
<meta property="og:published_time" content="Thu Sep 17 2020 17:00:00 +00:00" />
<meta property="og:updated_time" content="Sat Sep 26 2020 09:36:40 +00:00" />
<meta property="og:updated_time" content="Sat Sep 26 2020 11:25:04 +00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" />

View File

@@ -26,7 +26,7 @@
<meta property="og:description" content="" />
<meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" />
<meta property="og:published_time" content="Sat Sep 26 2020 09:36:40 GMT-0700 (Pacific Daylight Time)" />
<meta property="og:published_time" content="Sat Sep 26 2020 11:25:04 GMT-0700 (Pacific Daylight Time)" />
<meta property="og:updated_time" content="" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" />

View File

@@ -6,7 +6,7 @@
<atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link>
<description>News updates for the <a href="https://pomax.github.io/bezierinfo">primer on Bézier Curves</a> by Pomax</description>
<language>en-GB</language>
<lastBuildDate>Sat Sep 26 2020 09:36:40 +00:00</lastBuildDate>
<lastBuildDate>Sat Sep 26 2020 11:25:04 +00:00</lastBuildDate>
<image>
<url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
<title>A Primer on Bézier Curves</title>

View File

@@ -33,7 +33,7 @@
<meta property="og:locale" content="zh-CN" />
<meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-26T16:36:40+00:00" />
<meta property="og:updated_time" content="2020-09-26T18:25:04+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" />
@@ -4834,7 +4834,7 @@ for (coordinate, index) in LUT:
>
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="./images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
<img width="825px" height="275px" src="./images/chapters/molding/2bd215d1db191b52a89a94727b6aa5ce.png" loading="lazy" />
<label></label> </fallback-image
></graphics-element>
<p>
@@ -4852,7 +4852,7 @@ for (coordinate, index) in LUT:
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="./images/chapters/molding/834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
<img width="825px" height="275px" src="./images/chapters/molding/a54f990aa49fb9ea8200b59259f955f3.png" loading="lazy" />
<label></label> </fallback-image
></graphics-element>
<p>
@@ -4875,7 +4875,7 @@ for (coordinate, index) in LUT:
>
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="./images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
<img width="825px" height="275px" src="./images/chapters/molding/1039d0bb0e49cfb472c2fa37f9010190.png" loading="lazy" />
<label></label>
</fallback-image>
<input type="range" min="10" max="200" step="1" value="100" class="slide-control" />