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:
@@ -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);
|
||||
});
|
||||
}
|
@@ -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 = {
|
||||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
@@ -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" />
|
||||
|
@@ -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" />
|
||||
|
@@ -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" />
|
||||
|
@@ -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" />
|
||||
|
@@ -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>
|
||||
|
@@ -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" />
|
||||
|
Reference in New Issue
Block a user