diff --git a/sites/dev/docs/tutorials/pattern-design/part2/avoiding-overlap/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part2/avoiding-overlap/readme.mdx index baf2192eeb9..d9879cfec29 100644 --- a/sites/dev/docs/tutorials/pattern-design/part2/avoiding-overlap/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part2/avoiding-overlap/readme.mdx @@ -11,10 +11,9 @@ Specifically, we're going to rotate our strap out of the way until it no longer The rest of our bib should stay as it is, so let's start by making a list of points we need to rotate. -However, there is a catch. +However, there is a catch. ## Macros and auto-generated IDs - We have used the `round` macro to help us round the corners of our strap, and it added a bunch of auto-generated points to our pattern. We need to rotate these points too, but what are their names? @@ -50,7 +49,7 @@ that return value, but if we did, it would look like this: ``` Those names aren't very handy to remember. So I will rewrite this code a bit to -we'll capture these return values from the `round` macros and create +we'll capture these return values from the `round` macros and create easy-to-remember points from them: @@ -69,38 +68,36 @@ function draftBib({ part, }) { -/\* - -- Construct the quarter neck opening - _/ + /* + * Construct the quarter neck opening + */ let tweak = 1 - let target = (measurements.head _ options.neckRatio) /4 + let target = (measurements.head * options.neckRatio) /4 let delta do { - points.right = new Point( - tweak _ measurements.head / 10, - 0 - ) - points.bottom = new Point( - 0, - tweak _ measurements.head / 12 - ) - - + points.right = new Point( + tweak * measurements.head / 10, + 0 + ) + points.bottom = new Point( + 0, + tweak * measurements.head / 12 + ) + points.rightCp1 = points.right.shift( - 90, + 90, points.bottom.dy(points.right) / 2 ) points.bottomCp2 = points.bottom.shift( - 0, + 0, points.bottom.dx(points.right) / 2 ) - + paths.quarterNeck = new Path() .move(points.right) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .hide() @@ -108,13 +105,11 @@ function draftBib({ delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -} while (Math.abs(delta) > 1) - -/\* - -- Construct the complete neck opening - \*/ + /* + * Construct the complete neck opening + */ points.rightCp2 = points.rightCp1.flipY() points.bottomCp1 = points.bottomCp2.flipX() points.left = points.right.flipX() @@ -124,103 +119,97 @@ function draftBib({ points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() -paths.neck = new Path() -.move(points.top) -.curve(points.topCp2, points.leftCp1, points.left) -.curve(points.leftCp2, points.bottomCp1, points.bottom) -.curve(points.bottomCp2, points.rightCp1, points.right) -.curve(points.rightCp2, points.topCp1, points.top) -.close() -.addClass('fabric') + paths.neck = new Path() + .move(points.top) + .curve(points.topCp2, points.leftCp1, points.left) + .curve(points.leftCp2, points.bottomCp1, points.bottom) + .curve(points.bottomCp2, points.rightCp1, points.right) + .curve(points.rightCp2, points.topCp1, points.top) + .close() + .addClass('fabric') -/\* + /* + * Drawing the bib outline + */ + const width = measurements.head * options.widthRatio + const length = measurements.head * options.lengthRatio -- Drawing the bib outline - _/ - const width = measurements.head _ options.widthRatio - const length = measurements.head \* options.lengthRatio + points.topLeft = new Point( + width / -2, + points.top.y - (width / 2 - points.right.x) + ) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) -points.topLeft = new Point( -width / -2, -points.top.y - (width / 2 - points.right.x) -) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) - -/\* - -- Shape the straps - \*/ + /* + * Shape the straps + */ points.edgeLeft = new Point(points.topLeft.x, points.left.y) points.edgeRight = new Point(points.topRight.x, points.right.y) points.edgeTop = new Point(0, points.topLeft.y) -points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) -points.edgeRightCp = points.edgeLeftCp.flipX() -points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( -points.topLeft, -0.5 -) -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) + points.edgeRightCp = points.edgeLeftCp.flipX() + points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( + points.topLeft, + 0.5 + ) + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -// Round the straps -const strap = points.edgeTop.dy(points.top) + // Round the straps + const strap = points.edgeTop.dy(points.top) -points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) -points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) -points.tipRightBottom = new Point(points.tipRight.x, points.top.y) + points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) + points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) + points.tipRightBottom = new Point(points.tipRight.x, points.top.y) -// highlight-start -/\* - -- Macros will return the auto-generated IDs - \*/ + // highlight-start + /* + * Macros will return the auto-generated IDs + */ const ids1 = { - tipRightTop: macro("round", { - id: "tipRightTop", - from: points.edgeTop, - to: points.tipRight, - via: points.tipRightTop, - hide: false - }), - tipRightBottom: macro("round", { - id: "tipRightBottom", - from: points.tipRight, - to: points.top, - via: points.tipRightBottom, - hide: false - }) + tipRightTop: macro("round", { + id: "tipRightTop", + from: points.edgeTop, + to: points.tipRight, + via: points.tipRightTop, + hide: false + }), + tipRightBottom: macro("round", { + id: "tipRightBottom", + from: points.tipRight, + to: points.top, + via: points.tipRightBottom, + hide: false + }) } -/\* - -- Create points from them with easy names - \*/ + /* + * Create points from them with easy names + */ for (const side in ids1) { - for (const id of ['start', 'cp1', 'cp2', 'end']) { - points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() - } + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() + } } // highlight-end - -/\* - -- Now, adapt our `rect` path so it's no longer a rectangle: - \*/ + + /* + * Now, adapt our `rect` path so it's no longer a rectangle: + */ paths.rect = new Path() - .move(points.edgeTop) - .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) - .line(points.bottomLeft) - .line(points.bottomRight) - .line(points.edgeRight) - .curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop) - .close() + .move(points.edgeTop) + .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) + .line(points.bottomLeft) + .line(points.bottomRight) + .line(points.edgeRight) + .curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop) + .close() -return part + return part } - -```` +``` Once we have our list of points to rotate, we can rotate them. How far? Until the strap no longer overlaps. @@ -247,28 +236,28 @@ function draftBib({ let delta do { points.right = new Point( - tweak * measurements.head / 10, + tweak * measurements.head / 10, 0 ) points.bottom = new Point( - 0, + 0, tweak * measurements.head / 12 ) - + points.rightCp1 = points.right.shift( - 90, + 90, points.bottom.dy(points.right) / 2 ) points.bottomCp2 = points.bottom.shift( - 0, + 0, points.bottom.dx(points.right) / 2 ) - + paths.quarterNeck = new Path() .move(points.right) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .hide() @@ -277,7 +266,7 @@ function draftBib({ if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 } while (Math.abs(delta) > 1) - + /* * Construct the complete neck opening */ @@ -433,6 +422,5 @@ function draftBib({ return part } -```` - +``` diff --git a/sites/dev/docs/tutorials/pattern-design/part2/completing-the-neck-opening/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part2/completing-the-neck-opening/readme.mdx index 49606b57b51..def9e32cb98 100644 --- a/sites/dev/docs/tutorials/pattern-design/part2/completing-the-neck-opening/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part2/completing-the-neck-opening/readme.mdx @@ -25,38 +25,36 @@ function draftBib({ part, }) { -/\* - -- Construct the quarter neck opening - _/ + /* + * Construct the quarter neck opening + */ let tweak = 1 - let target = (measurements.head _ options.neckRatio) /4 + let target = (measurements.head * options.neckRatio) /4 let delta do { - points.right = new Point( - tweak _ measurements.head / 10, - 0 - ) - points.bottom = new Point( - 0, - tweak _ measurements.head / 12 - ) - + points.right = new Point( + tweak * measurements.head / 10, + 0 + ) + points.bottom = new Point( + 0, + tweak * measurements.head / 12 + ) points.rightCp1 = points.right.shift( - 90, + 90, points.bottom.dy(points.right) / 2 ) points.bottomCp2 = points.bottom.shift( - 0, + 0, points.bottom.dx(points.right) / 2 ) paths.quarterNeck = new Path() .move(points.right) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) // highlight-start @@ -66,13 +64,11 @@ function draftBib({ delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -} while (Math.abs(delta) > 1) - -return part + return part } - -```` +``` We're saying: _hide this path_. In other words, don't show it. @@ -109,28 +105,28 @@ function draftBib({ let delta do { points.right = new Point( - tweak * measurements.head / 10, + tweak * measurements.head / 10, 0 ) points.bottom = new Point( - 0, + 0, tweak * measurements.head / 12 ) points.rightCp1 = points.right.shift( - 90, + 90, points.bottom.dy(points.right) / 2 ) points.bottomCp2 = points.bottom.shift( - 0, + 0, points.bottom.dx(points.right) / 2 ) - + paths.quarterNeck = new Path() .move(points.right) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .hide() @@ -164,12 +160,11 @@ function draftBib({ // highlight-end return part } -```` - +``` To add the points, we're using the `Point.flipX()` and `Point.flipY()` methods -here. There's a few new Path methods too, like `close()` and `addClass()`. +here. There's a few new Path methods too, like `close()` and `addClass()`. Perhaps you can figure out what they do? If not, both [the Point documentation](/reference/api/point/) and [the Path diff --git a/sites/dev/docs/tutorials/pattern-design/part2/constructing-the-neck-opening/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part2/constructing-the-neck-opening/readme.mdx index 96f4fd93f51..9b3e3e8f831 100644 --- a/sites/dev/docs/tutorials/pattern-design/part2/constructing-the-neck-opening/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part2/constructing-the-neck-opening/readme.mdx @@ -51,41 +51,39 @@ function draftBib({ }) { // highlight-start -/\* - -- Construct the quarter neck opening - \*/ + /* + * Construct the quarter neck opening + */ points.right = new Point( - measurements.head / 10, - 0 + measurements.head / 10, + 0 ) points.bottom = new Point( - 0, - measurements.head / 12 + 0, + measurements.head / 12 ) -points.rightCp1 = points.right.shift( -90, -points.bottom.dy(points.right) / 2 -) -points.bottomCp2 = points.bottom.shift( -0, -points.bottom.dx(points.right) / 2 -) + points.rightCp1 = points.right.shift( + 90, + points.bottom.dy(points.right) / 2 + ) + points.bottomCp2 = points.bottom.shift( + 0, + points.bottom.dx(points.right) / 2 + ) -paths.quarterNeck = new Path() -.move(points.right) -.curve( -points.rightCp1, -points.bottomCp2, -points.bottom -) + paths.quarterNeck = new Path() + .move(points.right) + .curve( + points.rightCp1, + points.bottomCp2, + points.bottom + ) // highlight-end -return part + return part } - -```` +``` We've added some points to our part, and drawn our first path. @@ -95,10 +93,10 @@ Let's look at each line in detail. ```js points.right = new Point( - measurements.head / 10, + measurements.head / 10, 0 ) -```` +``` - We're adding a point named `right` to the `points` object which holds our part's points @@ -110,7 +108,10 @@ points.right = new Point( The creation of `points.bottom` is very similar, so let's skip to the next line: ```js -points.rightCp1 = points.right.shift(90, points.bottom.dy(points.right) / 2) +points.rightCp1 = points.right.shift( + 90, + points.bottom.dy(points.right) / 2 +) ``` - We're adding a point named `rightCp1`, which will become the _control point_ @@ -129,9 +130,7 @@ the right (0 degrees) for half of the X-delta between points `bottom` and `right`. :::tip - ##### Further reading - The `Point.shift()` and `Point.dy()` are just the tip of the iceberg. Points come with a bunch of these methods. You can find them all in [the Point API docs](/reference/api/point/). @@ -145,7 +144,11 @@ introduced on the next line: Paths. ```js paths.quarterNeck = new Path() .move(points.right) - .curve(points.rightCp1, points.bottomCp2, points.bottom) + .curve( + points.rightCp1, + points.bottomCp2, + points.bottom + ) ``` - We're adding a path named `quarterNeck` to the `paths` object which holds our @@ -163,7 +166,7 @@ From there, we drew a cubic Bézier curve to our `bottom` point by using :::tip -Many of the methods in the FreeSewing API are _chainable_ allowing you +Many of the methods in the FreeSewing API are *chainable* allowing you to string them together like in this example. ::: diff --git a/sites/dev/docs/tutorials/pattern-design/part2/creating-the-closure/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part2/creating-the-closure/readme.mdx index 5548e1302ea..25219458725 100644 --- a/sites/dev/docs/tutorials/pattern-design/part2/creating-the-closure/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part2/creating-the-closure/readme.mdx @@ -17,12 +17,10 @@ tedious. There are macros to add titles to our pattern, or grainline indicators, a scalebox, and there's a macro to round corners. The `round` macro. -:::note -You can find more information on the `round` macro in [the macros docs](/reference/macros/round/). -::: +:::note You can find more information on the `round` macro in [the macros docs](/reference/macros/round/).::: We need a half circle here, but the `round` macro works on 90° angles, so -we'll use it twice. As such, we'll add some points to guide the macro, and +we'll use it twice. As such, we'll add some points to guide the macro, and then put it to work. Like our neck opening, we've only drawn half since we can simply copy the @@ -43,51 +41,48 @@ function draftBib({ part, }) { -/\* - -- Construct the quarter neck opening - _/ + /* + * Construct the quarter neck opening + */ let tweak = 1 - let target = (measurements.head _ options.neckRatio) /4 + let target = (measurements.head * options.neckRatio) /4 let delta do { - points.right = new Point( - tweak _ measurements.head / 10, - 0 - ) - points.bottom = new Point( - 0, - tweak _ measurements.head / 12 - ) + points.right = new Point( + tweak * measurements.head / 10, + 0 + ) + points.bottom = new Point( + 0, + tweak * measurements.head / 12 + ) + + points.rightCp1 = points.right.shift( + 90, + points.bottom.dy(points.right) / 2 + ) + points.bottomCp2 = points.bottom.shift( + 0, + points.bottom.dx(points.right) / 2 + ) + + paths.quarterNeck = new Path() + .move(points.right) + .curve( + points.rightCp1, + points.bottomCp2, + points.bottom + ) + .hide() - points.rightCp1 = points.right.shift( - 90, - points.bottom.dy(points.right) / 2 - ) - points.bottomCp2 = points.bottom.shift( - 0, - points.bottom.dx(points.right) / 2 - ) + delta = paths.quarterNeck.length() - target + if (delta > 0) tweak = tweak * 0.99 + else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) - paths.quarterNeck = new Path() - .move(points.right) - .curve( - points.rightCp1, - points.bottomCp2, - points.bottom - ) - .hide() - - delta = paths.quarterNeck.length() - target - if (delta > 0) tweak = tweak _ 0.99 - else tweak = tweak _ 1.02 - -} while (Math.abs(delta) > 1) - -/\* - -- Construct the complete neck opening - \*/ + /* + * Construct the complete neck opening + */ points.rightCp2 = points.rightCp1.flipY() points.bottomCp1 = points.bottomCp2.flipX() points.left = points.right.flipX() @@ -97,88 +92,83 @@ function draftBib({ points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() -paths.neck = new Path() -.move(points.top) -.curve(points.topCp2, points.leftCp1, points.left) -.curve(points.leftCp2, points.bottomCp1, points.bottom) -.curve(points.bottomCp2, points.rightCp1, points.right) -.curve(points.rightCp2, points.topCp1, points.top) -.close() -.addClass('fabric') + paths.neck = new Path() + .move(points.top) + .curve(points.topCp2, points.leftCp1, points.left) + .curve(points.leftCp2, points.bottomCp1, points.bottom) + .curve(points.bottomCp2, points.rightCp1, points.right) + .curve(points.rightCp2, points.topCp1, points.top) + .close() + .addClass('fabric') -/\* + /* + * Drawing the bib outline + */ + const width = measurements.head * options.widthRatio + const length = measurements.head * options.lengthRatio -- Drawing the bib outline - _/ - const width = measurements.head _ options.widthRatio - const length = measurements.head \* options.lengthRatio + points.topLeft = new Point( + width / -2, + points.top.y - (width / 2 - points.right.x) + ) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) -points.topLeft = new Point( -width / -2, -points.top.y - (width / 2 - points.right.x) -) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) - -/\* - -- Shape the straps - \*/ + /* + * Shape the straps + */ points.edgeLeft = new Point(points.topLeft.x, points.left.y) points.edgeRight = new Point(points.topRight.x, points.right.y) points.edgeTop = new Point(0, points.topLeft.y) -points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) -points.edgeRightCp = points.edgeLeftCp.flipX() -points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( -points.topLeft, -0.5 -) -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) + points.edgeRightCp = points.edgeLeftCp.flipX() + points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( + points.topLeft, + 0.5 + ) + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -// highlight-start -// Round the straps -const strap = points.edgeTop.dy(points.top) + // highlight-start + // Round the straps + const strap = points.edgeTop.dy(points.top) -points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) -points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) -points.tipRightBottom = new Point(points.tipRight.x, points.top.y) + points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) + points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) + points.tipRightBottom = new Point(points.tipRight.x, points.top.y) -macro("round", { -id: "tipRightTop", -from: points.edgeTop, -to: points.tipRight, -via: points.tipRightTop, -hide: false -}) -macro("round", { -id: "tipRightBottom", -from: points.tipRight, -to: points.top, -via: points.tipRightBottom, -hide: false -}) -// highlight-end + macro("round", { + id: "tipRightTop", + from: points.edgeTop, + to: points.tipRight, + via: points.tipRightTop, + hide: false + }) + macro("round", { + id: "tipRightBottom", + from: points.tipRight, + to: points.top, + via: points.tipRightBottom, + hide: false + }) + // highlight-end /* - -- Now, adapt our `rect` path so it's no longer a rectangle: - \*/ + * Now, adapt our `rect` path so it's no longer a rectangle: + */ paths.rect = new Path() - .move(points.edgeTop) - .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) - .line(points.bottomLeft) - .line(points.bottomRight) - .line(points.edgeRight) - .curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop) - .close() + .move(points.edgeTop) + .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) + .line(points.bottomLeft) + .line(points.bottomRight) + .line(points.edgeRight) + .curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop) + .close() -return part + return part } - ``` Notice that we always draw our path at the end after we've manipulated our points. -``` diff --git a/sites/dev/docs/tutorials/pattern-design/part2/drawing-the-bib-outline/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part2/drawing-the-bib-outline/readme.mdx index 2065cc6c9c8..107c09a3f6d 100644 --- a/sites/dev/docs/tutorials/pattern-design/part2/drawing-the-bib-outline/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part2/drawing-the-bib-outline/readme.mdx @@ -17,47 +17,46 @@ function draftBib({ part, }) { -// Construct the quarter neck opening -let tweak = 1 -let target = (measurements.head _ options.neckRatio) /4 -let delta -do { -points.right = new Point( -tweak _ measurements.head / 10, -0 -) -points.bottom = new Point( -0, -tweak \* measurements.head / 12 -) - + // Construct the quarter neck opening + let tweak = 1 + let target = (measurements.head * options.neckRatio) /4 + let delta + do { + points.right = new Point( + tweak * measurements.head / 10, + 0 + ) + points.bottom = new Point( + 0, + tweak * measurements.head / 12 + ) + points.rightCp1 = points.right.shift( - 90, + 90, points.bottom.dy(points.right) / 2 ) points.bottomCp2 = points.bottom.shift( - 0, + 0, points.bottom.dx(points.right) / 2 ) -paths.quarterNeck = new Path() -.move(points.right) -.curve( -points.rightCp1, -points.bottomCp2, -points.bottom -) -.hide() + paths.quarterNeck = new Path() + .move(points.right) + .curve( + points.rightCp1, + points.bottomCp2, + points.bottom + ) + .hide() -delta = paths.quarterNeck.length() - target -if (delta > 0) tweak = tweak _ 0.99 -else tweak = tweak _ 1.02 -} while (Math.abs(delta) > 1) + delta = paths.quarterNeck.length() - target + if (delta > 0) tweak = tweak * 0.99 + else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -/\* - -- Construct the complete neck opening - \*/ + /* + * Construct the complete neck opening + */ points.rightCp2 = points.rightCp1.flipY() points.bottomCp1 = points.bottomCp2.flipX() points.left = points.right.flipX() @@ -67,45 +66,43 @@ else tweak = tweak _ 1.02 points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() -paths.neck = new Path() -.move(points.top) -.curve(points.topCp2, points.leftCp1, points.left) -.curve(points.leftCp2, points.bottomCp1, points.bottom) -.curve(points.bottomCp2, points.rightCp1, points.right) -.curve(points.rightCp2, points.topCp1, points.top) -.close() -.addClass('fabric') + paths.neck = new Path() + .move(points.top) + .curve(points.topCp2, points.leftCp1, points.left) + .curve(points.leftCp2, points.bottomCp1, points.bottom) + .curve(points.bottomCp2, points.rightCp1, points.right) + .curve(points.rightCp2, points.topCp1, points.top) + .close() + .addClass('fabric') // highlight-start -/\* + /* + * Drawing the bib outline + */ + const width = measurements.head * options.widthRatio + const length = measurements.head * options.lengthRatio -- Drawing the bib outline - _/ - const width = measurements.head _ options.widthRatio - const length = measurements.head \* options.lengthRatio + points.topLeft = new Point( + width / -2, + points.top.y - (width / 2 - points.right.x) + ) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) -points.topLeft = new Point( -width / -2, -points.top.y - (width / 2 - points.right.x) -) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) - -paths.rect = new Path() -.move(points.topLeft) -.line(points.bottomLeft) -.line(points.bottomRight) -.line(points.topRight) -.line(points.topLeft) -.close() -.addClass('fabric') + paths.rect = new Path() + .move(points.topLeft) + .line(points.bottomLeft) + .line(points.bottomRight) + .line(points.topRight) + .line(points.topLeft) + .close() + .addClass('fabric') // highlight-end -return part + return part } - -```` +``` First thing we did was create the `width` and `length` variables to @@ -114,7 +111,7 @@ save ourselves some typing: ```js const width = measurements.head * options.widthRatio const length = measurements.head * options.lengthRatio -```` +``` Both the length and width of our bib are a factor of the head circumference. This way, our bib size will adapt to the size of the baby, and the user can tweak @@ -123,7 +120,10 @@ the length and width by playing with the options we added to the pattern. Once we have our variables, we're adding some new points, and a second path called `rect`. ```js -points.topLeft = new Point(width / -2, points.top.y - (width / 2 - points.right.x)) +points.topLeft = new Point( + width / -2, + points.top.y - (width / 2 - points.right.x) +) points.topRight = points.topLeft.shift(0, width) points.bottomLeft = points.topLeft.shift(-90, length) points.bottomRight = points.topRight.shift(-90, length) @@ -142,3 +142,4 @@ We're calculating the `topLeft` point so that the top edge of our bib and the sides are equidistant from the neck opening. We didn't have to do that. But it looks nicely balanced this way. + diff --git a/sites/dev/docs/tutorials/pattern-design/part2/drawing-the-straps/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part2/drawing-the-straps/readme.mdx index a16a8917690..410a1b80100 100644 --- a/sites/dev/docs/tutorials/pattern-design/part2/drawing-the-straps/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part2/drawing-the-straps/readme.mdx @@ -28,38 +28,36 @@ function draftBib({ part, }) { -/\* - -- Construct the neck opening - _/ + /* + * Construct the neck opening + */ let tweak = 1 - let target = (measurements.head _ options.neckRatio) /4 + let target = (measurements.head * options.neckRatio) /4 let delta do { - points.right = new Point( - tweak _ measurements.head / 10, - 0 - ) - points.bottom = new Point( - 0, - tweak _ measurements.head / 12 - ) - - + points.right = new Point( + tweak * measurements.head / 10, + 0 + ) + points.bottom = new Point( + 0, + tweak * measurements.head / 12 + ) + points.rightCp1 = points.right.shift( - 90, + 90, points.bottom.dy(points.right) / 2 ) points.bottomCp2 = points.bottom.shift( - 0, + 0, points.bottom.dx(points.right) / 2 ) - + paths.quarterNeck = new Path() .move(points.right) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .hide() @@ -67,13 +65,11 @@ function draftBib({ delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -} while (Math.abs(delta) > 1) - -/\* - -- Construct the complete neck opening - \*/ + /* + * Construct the complete neck opening + */ points.rightCp2 = points.rightCp1.flipY() points.bottomCp1 = points.bottomCp2.flipX() points.left = points.right.flipX() @@ -83,239 +79,233 @@ function draftBib({ points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() -// strikeout-start -/_ Remove this path -paths.neck = new Path() -.move(points.top) -.curve(points.topCp2, points.leftCp1, points.left) -.curve(points.leftCp2, points.bottomCp1, points.bottom) -.curve(points.bottomCp2, points.rightCp1, points.right) -.curve(points.rightCp2, points.topCp1, points.top) -.close() -.addClass('fabric') -_/ -// strikeout-end + // strikeout-start + /* Remove this path + paths.neck = new Path() + .move(points.top) + .curve(points.topCp2, points.leftCp1, points.left) + .curve(points.leftCp2, points.bottomCp1, points.bottom) + .curve(points.bottomCp2, points.rightCp1, points.right) + .curve(points.rightCp2, points.topCp1, points.top) + .close() + .addClass('fabric') + */ + // strikeout-end -// Drawing the bib outline -const width = measurements.head _ options.widthRatio -const length = measurements.head _ options.lengthRatio + // Drawing the bib outline + const width = measurements.head * options.widthRatio + const length = measurements.head * options.lengthRatio -points.topLeft = new Point( -width / -2, -points.top.y - (width / 2 - points.right.x) -) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) + points.topLeft = new Point( + width / -2, + points.top.y - (width / 2 - points.right.x) + ) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) -/\* - -- Shape the straps - \*/ + /* + * Shape the straps + */ points.edgeLeft = new Point(points.topLeft.x, points.left.y) points.edgeRight = new Point(points.topRight.x, points.right.y) points.edgeTop = new Point(0, points.topLeft.y) -points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) -points.edgeRightCp = points.edgeLeftCp.flipX() -points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( -points.topLeft, -0.5 -) -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) + points.edgeRightCp = points.edgeLeftCp.flipX() + points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( + points.topLeft, + 0.5 + ) + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -// Round the straps -const strap = points.edgeTop.dy(points.top) + // Round the straps + const strap = points.edgeTop.dy(points.top) -points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) -points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) -points.tipRightBottom = new Point(points.tipRight.x, points.top.y) + points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) + points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) + points.tipRightBottom = new Point(points.tipRight.x, points.top.y) -/\* - -- Macros will return the auto-generated IDs - _/ + /* + * Macros will return the auto-generated IDs + */ const ids1 = { - tipRightTop: macro("round", { - id: "tipRightTop", - from: points.edgeTop, - to: points.tipRight, - via: points.tipRightTop, - // strikeout-start - /_ Remove this to have the macro - _ only create the points we need - _ and not draw a path - hide: false - _/ - // strikeout-end - }), - tipRightBottom: macro("round", { - id: "tipRightBottom", - from: points.tipRight, - to: points.top, - via: points.tipRightBottom, - // strikeout-start - /_ Remove this to have the macro - _ only create the points we need - _ and not draw a path - hide: false - \*/ - // strikeout-end - }) + tipRightTop: macro("round", { + id: "tipRightTop", + from: points.edgeTop, + to: points.tipRight, + via: points.tipRightTop, + // strikeout-start + /* Remove this to have the macro + * only create the points we need + * and not draw a path + hide: false + */ + // strikeout-end + }), + tipRightBottom: macro("round", { + id: "tipRightBottom", + from: points.tipRight, + to: points.top, + via: points.tipRightBottom, + // strikeout-start + /* Remove this to have the macro + * only create the points we need + * and not draw a path + hide: false + */ + // strikeout-end + }) } -/\* - -- Create points from them with easy names - \*/ + /* + * Create points from them with easy names + */ for (const side in ids1) { - for (const id of ['start', 'cp1', 'cp2', 'end']) { - points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() - } + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() + } } -/\* + /* + * This is the list of points we need to rotate + * to move our strap out of the way + */ -- This is the list of points we need to rotate -- to move our strap out of the way - \*/ + const rotateThese = [ + "edgeTopLeftCp", + "edgeTop", + "tipRight", + "tipRightTop", + "tipRightTopStart", + "tipRightTopCp1", + "tipRightTopCp2", + "tipRightTopEnd", + "tipRightBottomStart", + "tipRightBottomCp1", + "tipRightBottomCp2", + "tipRightBottomEnd", + "tipRightBottom", + "top", + "topCp2" + ] + /* + * We're rotating all the points in + * the `rotateThese` array around + * the `edgeLeft` point. + * + * We're using increments of 1 degree + * until the `tipRightBottomStart` point + * is 1 mm beyond the center of our bib. + */ + while (points.tipRightBottomStart.x > -1) { + for (const p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) + } -const rotateThese = [ -"edgeTopLeftCp", -"edgeTop", -"tipRight", -"tipRightTop", -"tipRightTopStart", -"tipRightTopCp1", -"tipRightTopCp2", -"tipRightTopEnd", -"tipRightBottomStart", -"tipRightBottomCp1", -"tipRightBottomCp2", -"tipRightBottomEnd", -"tipRightBottom", -"top", -"topCp2" -] -/\* -_ We're rotating all the points in -_ the `rotateThese` array around -_ the `edgeLeft` point. -_ -_ We're using increments of 1 degree -_ until the `tipRightBottomStart` point -_ is 1 mm beyond the center of our bib. -_/ -while (points.tipRightBottomStart.x > -1) { -for (const p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) + // strikeout-start + /* Remove this repetition + macro("round", { + from: points.edgeTop, + to: points.tipRight, + via: points.tipRightTop, + prefix: "tipRightTop", + hide: false, + class: 'contrast dotted', + }) + macro("round", { + from: points.tipRight, + to: points.top, + via: points.tipRightBottom, + prefix: "tipRightBottom", + hide: false, + class: 'contrast dotted', + }) + + paths.rect = new Path() + .move(points.edgeTop) + .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) + .line(points.bottomLeft) + .line(points.bottomRight) + .line(points.edgeRight) + .curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop) + .close() + */ + // strikeout-end + + // highlight-start + // Add points for second strap + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.topCp1 = points.topCp2.flipX() + points.tipLeftTopStart = points.tipRightTopStart.flipX() + points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() + points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() + points.tipLeftTopEnd = points.tipRightTopEnd.flipX() + points.tipLeftBottomStart = points.tipRightBottomStart.flipX() + points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() + points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() + points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() + + // Create one path for the bib outline + paths.seam = new Path() + .move(points.edgeLeft) + .line(points.bottomLeft) + .line(points.bottomRight) + .line(points.edgeRight) + .curve( + points.edgeRightCp, + points.edgeTopRightCp, + points.tipLeftTopStart + ) + .curve( + points.tipLeftTopCp1, + points.tipLeftTopCp2, + points.tipLeftTopEnd + ) + .curve( + points.tipLeftBottomCp1, + points.tipLeftBottomCp2, + points.tipLeftBottomEnd + ) + .curve( + points.topCp1, + points.rightCp2, + points.right + ) + .curve( + points.rightCp1, + points.bottomCp2, + points.bottom + ) + .curve( + points.bottomCp1, + points.leftCp2, + points.left + ) + .curve( + points.leftCp1, + points.topCp2, + points.tipRightBottomEnd + ) + .curve( + points.tipRightBottomCp2, + points.tipRightBottomCp1, + points.tipRightBottomStart + ) + .curve( + points.tipRightTopCp2, + points.tipRightTopCp1, + points.tipRightTopStart + ) + .curve( + points.edgeTopLeftCp, + points.edgeLeftCp, + points.edgeLeft + ) + .close() + .addClass("fabric") + // highlight-end + + return part } - -// strikeout-start -/\* Remove this repetition -macro("round", { -from: points.edgeTop, -to: points.tipRight, -via: points.tipRightTop, -prefix: "tipRightTop", -hide: false, -class: 'contrast dotted', -}) -macro("round", { -from: points.tipRight, -to: points.top, -via: points.tipRightBottom, -prefix: "tipRightBottom", -hide: false, -class: 'contrast dotted', -}) - -paths.rect = new Path() -.move(points.edgeTop) -.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) -.line(points.bottomLeft) -.line(points.bottomRight) -.line(points.edgeRight) -.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop) -.close() -\*/ -// strikeout-end - -// highlight-start -// Add points for second strap -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -points.topCp1 = points.topCp2.flipX() -points.tipLeftTopStart = points.tipRightTopStart.flipX() -points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() -points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() -points.tipLeftTopEnd = points.tipRightTopEnd.flipX() -points.tipLeftBottomStart = points.tipRightBottomStart.flipX() -points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() -points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() -points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() - -// Create one path for the bib outline -paths.seam = new Path() -.move(points.edgeLeft) -.line(points.bottomLeft) -.line(points.bottomRight) -.line(points.edgeRight) -.curve( -points.edgeRightCp, -points.edgeTopRightCp, -points.tipLeftTopStart -) -.curve( -points.tipLeftTopCp1, -points.tipLeftTopCp2, -points.tipLeftTopEnd -) -.curve( -points.tipLeftBottomCp1, -points.tipLeftBottomCp2, -points.tipLeftBottomEnd -) -.curve( -points.topCp1, -points.rightCp2, -points.right -) -.curve( -points.rightCp1, -points.bottomCp2, -points.bottom -) -.curve( -points.bottomCp1, -points.leftCp2, -points.left -) -.curve( -points.leftCp1, -points.topCp2, -points.tipRightBottomEnd -) -.curve( -points.tipRightBottomCp2, -points.tipRightBottomCp1, -points.tipRightBottomStart -) -.curve( -points.tipRightTopCp2, -points.tipRightTopCp1, -points.tipRightTopStart -) -.curve( -points.edgeTopLeftCp, -points.edgeLeftCp, -points.edgeLeft -) -.close() -.addClass("fabric") -// highlight-end - -return part -} - ``` -``` diff --git a/sites/dev/docs/tutorials/pattern-design/part2/fitting-the-neck-opening/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part2/fitting-the-neck-opening/readme.mdx index d2d935f9962..8771c5711da 100644 --- a/sites/dev/docs/tutorials/pattern-design/part2/fitting-the-neck-opening/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part2/fitting-the-neck-opening/readme.mdx @@ -4,7 +4,7 @@ sidebar_position: 70 --- We are not going to create some opening that we _hope_ is the right size, we're -going to make sure it is. Here's how we'll make sure the neck opening is _just +going to make sure it is. Here's how we'll make sure the neck opening is _just right_: @@ -19,56 +19,54 @@ function draftBib({ part, }) { -/\* - -- Construct the quarter neck opening - _/ - // highlight-start + /* + * Construct the quarter neck opening + */ +// highlight-start let tweak = 1 - let target = (measurements.head _ options.neckRatio) /4 + let target = (measurements.head * options.neckRatio) /4 let delta do { - // highlight-end - points.right = new Point( - // highlight-start - tweak _ measurements.head / 10, - // highlight-end - 0 - ) - points.bottom = new Point( - 0, - // highlight-start - tweak _ measurements.head / 12 - // highlight-end - ) - +// highlight-end + points.right = new Point( +// highlight-start + tweak * measurements.head / 10, +// highlight-end + 0 + ) + points.bottom = new Point( + 0, +// highlight-start + tweak * measurements.head / 12 +// highlight-end + ) points.rightCp1 = points.right.shift( - 90, + 90, points.bottom.dy(points.right) / 2 ) points.bottomCp2 = points.bottom.shift( - 0, + 0, points.bottom.dx(points.right) / 2 ) paths.quarterNeck = new Path() .move(points.right) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) -// highlight-start -delta = paths.quarterNeck.length() - target -if (delta > 0) tweak = tweak _ 0.99 -else tweak = tweak _ 1.02 -} while (Math.abs(delta) > 1) -// highlight-end -return part -} +// highlight-start + delta = paths.quarterNeck.length() - target + if (delta > 0) tweak = tweak * 0.99 + else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) +// highlight-end + return part +} ``` @@ -96,4 +94,3 @@ are within 1 mm of our target value. Now that we're happy with the length of our quarter neck opening, let's complete the entire neck opening. -``` diff --git a/sites/dev/docs/tutorials/pattern-design/part2/rounding-the-corners/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part2/rounding-the-corners/readme.mdx index 7cd0b4925cb..2cafb2fe324 100644 --- a/sites/dev/docs/tutorials/pattern-design/part2/rounding-the-corners/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part2/rounding-the-corners/readme.mdx @@ -22,38 +22,36 @@ function draftBib({ part, }) { -/\* - -- Construct the quarter neck opening - _/ + /* + * Construct the quarter neck opening + */ let tweak = 1 - let target = (measurements.head _ options.neckRatio) /4 + let target = (measurements.head * options.neckRatio) /4 let delta do { - points.right = new Point( - tweak _ measurements.head / 10, - 0 - ) - points.bottom = new Point( - 0, - tweak _ measurements.head / 12 - ) - - + points.right = new Point( + tweak * measurements.head / 10, + 0 + ) + points.bottom = new Point( + 0, + tweak * measurements.head / 12 + ) + points.rightCp1 = points.right.shift( - 90, + 90, points.bottom.dy(points.right) / 2 ) points.bottomCp2 = points.bottom.shift( - 0, + 0, points.bottom.dx(points.right) / 2 ) - + paths.quarterNeck = new Path() .move(points.right) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .hide() @@ -61,13 +59,11 @@ function draftBib({ delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -} while (Math.abs(delta) > 1) - -/\* - -- Construct the complete neck opening - \*/ + /* + * Construct the complete neck opening + */ points.rightCp2 = points.rightCp1.flipY() points.bottomCp1 = points.bottomCp2.flipX() points.left = points.right.flipX() @@ -77,225 +73,216 @@ function draftBib({ points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() -// Drawing the bib outline -const width = measurements.head _ options.widthRatio -const length = measurements.head _ options.lengthRatio + // Drawing the bib outline + const width = measurements.head * options.widthRatio + const length = measurements.head * options.lengthRatio -points.topLeft = new Point( -width / -2, -points.top.y - (width / 2 - points.right.x) -) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) + points.topLeft = new Point( + width / -2, + points.top.y - (width / 2 - points.right.x) + ) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) -/\* - -- Shape the straps - \*/ + /* + * Shape the straps + */ points.edgeLeft = new Point(points.topLeft.x, points.left.y) points.edgeRight = new Point(points.topRight.x, points.right.y) points.edgeTop = new Point(0, points.topLeft.y) -points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) -points.edgeRightCp = points.edgeLeftCp.flipX() -points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( -points.topLeft, -0.5 -) -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) + points.edgeRightCp = points.edgeLeftCp.flipX() + points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( + points.topLeft, + 0.5 + ) + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -// Round the straps -const strap = points.edgeTop.dy(points.top) + // Round the straps + const strap = points.edgeTop.dy(points.top) -points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) -points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) -points.tipRightBottom = new Point(points.tipRight.x, points.top.y) + points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) + points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) + points.tipRightBottom = new Point(points.tipRight.x, points.top.y) -/\* - -- Macros will return the auto-generated IDs - \*/ + /* + * Macros will return the auto-generated IDs + */ const ids1 = { - tipRightTop: macro("round", { - id: "tipRightTop", - from: points.edgeTop, - to: points.tipRight, - via: points.tipRightTop, - }), - tipRightBottom: macro("round", { - id: "tipRightBottom", - from: points.tipRight, - to: points.top, - via: points.tipRightBottom, - }) + tipRightTop: macro("round", { + id: "tipRightTop", + from: points.edgeTop, + to: points.tipRight, + via: points.tipRightTop, + }), + tipRightBottom: macro("round", { + id: "tipRightBottom", + from: points.tipRight, + to: points.top, + via: points.tipRightBottom, + }) } -/\* - -- Create points from them with easy names - \*/ + /* + * Create points from them with easy names + */ for (const side in ids1) { - for (const id of ['start', 'cp1', 'cp2', 'end']) { - points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() + } } - } - /* - -- This is the list of points we need to rotate -- to move our strap out of the way - _/ + * This is the list of points we need to rotate + * to move our strap out of the way + */ const rotateThese = [ - "edgeTopLeftCp", - "edgeTop", - "tipRight", - "tipRightTop", - "tipRightTopStart", - "tipRightTopCp1", - "tipRightTopCp2", - "tipRightTopEnd", - "tipRightBottomStart", - "tipRightBottomCp1", - "tipRightBottomCp2", - "tipRightBottomEnd", - "tipRightBottom", - "top", - "topCp2" + "edgeTopLeftCp", + "edgeTop", + "tipRight", + "tipRightTop", + "tipRightTopStart", + "tipRightTopCp1", + "tipRightTopCp2", + "tipRightTopEnd", + "tipRightBottomStart", + "tipRightBottomCp1", + "tipRightBottomCp2", + "tipRightBottomEnd", + "tipRightBottom", + "top", + "topCp2" ] - /_ - - We're rotating all the points in - - the `rotateThese` array around - - the `edgeLeft` point. - - - - We're using increments of 1 degree - - until the `tipRightBottomStart` point - - is 1 mm beyond the center of our bib. - \*/ - while (points.tipRightBottomStart.x > -1) { + /* + * We're rotating all the points in + * the `rotateThese` array around + * the `edgeLeft` point. + * + * We're using increments of 1 degree + * until the `tipRightBottomStart` point + * is 1 mm beyond the center of our bib. + */ + while (points.tipRightBottomStart.x > -1) { for (const p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) - } + } -// Add points for second strap -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -points.topCp1 = points.topCp2.flipX() -points.tipLeftTopStart = points.tipRightTopStart.flipX() -points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() -points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() -points.tipLeftTopEnd = points.tipRightTopEnd.flipX() -points.tipLeftBottomStart = points.tipRightBottomStart.flipX() -points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() -points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() -points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() + // Add points for second strap + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.topCp1 = points.topCp2.flipX() + points.tipLeftTopStart = points.tipRightTopStart.flipX() + points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() + points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() + points.tipLeftTopEnd = points.tipRightTopEnd.flipX() + points.tipLeftBottomStart = points.tipRightBottomStart.flipX() + points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() + points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() + points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() -// highlight-start -/\* - -- Round the bottom corners -- Macros will return the auto-generated IDs - \*/ + // highlight-start + /* + * Round the bottom corners + * Macros will return the auto-generated IDs + */ const ids2 = { - bottomLeft: macro("round", { - id: "bottomLeft", - from: points.topLeft, - to: points.bottomRight, - via: points.bottomLeft, - radius: points.bottomRight.x / 4, - }), - bottomRight: macro("round", { - id: "bottomRight", - from: points.bottomLeft, - to: points.topRight, - via: points.bottomRight, - radius: points.bottomRight.x / 4, - }) + bottomLeft: macro("round", { + id: "bottomLeft", + from: points.topLeft, + to: points.bottomRight, + via: points.bottomLeft, + radius: points.bottomRight.x / 4, + }), + bottomRight: macro("round", { + id: "bottomRight", + from: points.bottomLeft, + to: points.topRight, + via: points.bottomRight, + radius: points.bottomRight.x / 4, + }) } -/\* - -- Create points from them with easy names - \*/ + /* + * Create points from them with easy names + */ for (const side in ids2) { - for (const id of ['start', 'cp1', 'cp2', 'end']) { - points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() - } + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() + } } // highlight-end -// Create one path for the bib outline -paths.seam = new Path() -.move(points.edgeLeft) -// strikeout-start -/_ We only need to replace the start -_ with the new lines below -.line(points.bottomLeft) -.line(points.bottomRight) -\*/ -// strikeout-end -// highlight-start -.line(points.bottomLeftStart) -.curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) -.line(points.bottomRightStart) -.curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) -// highlight-end -.line(points.edgeRight) -.curve( -points.edgeRightCp, -points.edgeTopRightCp, -points.tipLeftTopStart -) -.curve( -points.tipLeftTopCp1, -points.tipLeftTopCp2, -points.tipLeftTopEnd -) -.curve( -points.tipLeftBottomCp1, -points.tipLeftBottomCp2, -points.tipLeftBottomEnd -) -.curve( -points.topCp1, -points.rightCp2, -points.right -) -.curve( -points.rightCp1, -points.bottomCp2, -points.bottom -) -.curve( -points.bottomCp1, -points.leftCp2, -points.left -) -.curve( -points.leftCp1, -points.topCp2, -points.tipRightBottomEnd -) -.curve( -points.tipRightBottomCp2, -points.tipRightBottomCp1, -points.tipRightBottomStart -) -.curve( -points.tipRightTopCp2, -points.tipRightTopCp1, -points.tipRightTopStart -) -.curve( -points.edgeTopLeftCp, -points.edgeLeftCp, -points.edgeLeft -) -.close() -.addClass("fabric") + // Create one path for the bib outline + paths.seam = new Path() + .move(points.edgeLeft) + // strikeout-start + /* We only need to replace the start + * with the new lines below + .line(points.bottomLeft) + .line(points.bottomRight) + */ + // strikeout-end + // highlight-start + .line(points.bottomLeftStart) + .curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) + .line(points.bottomRightStart) + .curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) + // highlight-end + .line(points.edgeRight) + .curve( + points.edgeRightCp, + points.edgeTopRightCp, + points.tipLeftTopStart + ) + .curve( + points.tipLeftTopCp1, + points.tipLeftTopCp2, + points.tipLeftTopEnd + ) + .curve( + points.tipLeftBottomCp1, + points.tipLeftBottomCp2, + points.tipLeftBottomEnd + ) + .curve( + points.topCp1, + points.rightCp2, + points.right + ) + .curve( + points.rightCp1, + points.bottomCp2, + points.bottom + ) + .curve( + points.bottomCp1, + points.leftCp2, + points.left + ) + .curve( + points.leftCp1, + points.topCp2, + points.tipRightBottomEnd + ) + .curve( + points.tipRightBottomCp2, + points.tipRightBottomCp1, + points.tipRightBottomStart + ) + .curve( + points.tipRightTopCp2, + points.tipRightTopCp1, + points.tipRightTopStart + ) + .curve( + points.edgeTopLeftCp, + points.edgeLeftCp, + points.edgeLeft + ) + .close() + .addClass("fabric") -return part + return part } - ``` -``` diff --git a/sites/dev/docs/tutorials/pattern-design/part2/shaping-the-straps/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part2/shaping-the-straps/readme.mdx index 25739c8d295..b6990397044 100644 --- a/sites/dev/docs/tutorials/pattern-design/part2/shaping-the-straps/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part2/shaping-the-straps/readme.mdx @@ -15,6 +15,7 @@ As always, [the API docs](/reference/api/point/) have all the details. ::: + ```design/src/bib.mjs function draftBib({ @@ -27,38 +28,36 @@ function draftBib({ part, }) { -/\* - -- Construct the quarter neck opening - _/ + /* + * Construct the quarter neck opening + */ let tweak = 1 - let target = (measurements.head _ options.neckRatio) /4 + let target = (measurements.head * options.neckRatio) /4 let delta do { - points.right = new Point( - tweak _ measurements.head / 10, - 0 - ) - points.bottom = new Point( - 0, - tweak _ measurements.head / 12 - ) - - + points.right = new Point( + tweak * measurements.head / 10, + 0 + ) + points.bottom = new Point( + 0, + tweak * measurements.head / 12 + ) + points.rightCp1 = points.right.shift( - 90, + 90, points.bottom.dy(points.right) / 2 ) points.bottomCp2 = points.bottom.shift( - 0, + 0, points.bottom.dx(points.right) / 2 ) paths.quarterNeck = new Path() .move(points.right) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .hide() @@ -66,13 +65,11 @@ function draftBib({ delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -} while (Math.abs(delta) > 1) - -/\* - -- Construct the complete neck opening - \*/ + /* + * Construct the complete neck opening + */ points.rightCp2 = points.rightCp1.flipY() points.bottomCp1 = points.bottomCp2.flipX() points.left = points.right.flipX() @@ -82,81 +79,75 @@ function draftBib({ points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() -paths.neck = new Path() -.move(points.top) -.curve(points.topCp2, points.leftCp1, points.left) -.curve(points.leftCp2, points.bottomCp1, points.bottom) -.curve(points.bottomCp2, points.rightCp1, points.right) -.curve(points.rightCp2, points.topCp1, points.top) -.close() -.addClass('fabric') + paths.neck = new Path() + .move(points.top) + .curve(points.topCp2, points.leftCp1, points.left) + .curve(points.leftCp2, points.bottomCp1, points.bottom) + .curve(points.bottomCp2, points.rightCp1, points.right) + .curve(points.rightCp2, points.topCp1, points.top) + .close() + .addClass('fabric') -/\* + /* + * Drawing the bib outline + */ + const width = measurements.head * options.widthRatio + const length = measurements.head * options.lengthRatio -- Drawing the bib outline - _/ - const width = measurements.head _ options.widthRatio - const length = measurements.head \* options.lengthRatio - -points.topLeft = new Point( -width / -2, -points.top.y - (width / 2 - points.right.x) -) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) + points.topLeft = new Point( + width / -2, + points.top.y - (width / 2 - points.right.x) + ) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) // strikeout-start -/\* - -- Remove this path +/* +* Remove this path paths.rect = new Path() - .move(points.topLeft) - .line(points.bottomLeft) - .line(points.bottomRight) - .line(points.topRight) - .line(points.topLeft) - .close() - .addClass('fabric') - \*/ - // strikeout-end + .move(points.topLeft) + .line(points.bottomLeft) + .line(points.bottomRight) + .line(points.topRight) + .line(points.topLeft) + .close() + .addClass('fabric') +*/ +// strikeout-end // highlight-start -/\* - -- Shape the straps - \*/ + /* + * Shape the straps + */ points.edgeLeft = new Point(points.topLeft.x, points.left.y) points.edgeRight = new Point(points.topRight.x, points.right.y) points.edgeTop = new Point(0, points.topLeft.y) -points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) -points.edgeRightCp = points.edgeLeftCp.flipX() -points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( -points.topLeft, -0.5 -) -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) + points.edgeRightCp = points.edgeLeftCp.flipX() + points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards( + points.topLeft, + 0.5 + ) + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -/\* - -- Now, adapt our `rect` path so it's no longer a rectangle: - \*/ + /* + * Now, adapt our `rect` path so it's no longer a rectangle: + */ paths.rect = new Path() - .move(points.edgeTop) - .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) - .line(points.bottomLeft) - .line(points.bottomRight) - .line(points.edgeRight) - .curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop) - .close() + .move(points.edgeTop) + .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) + .line(points.bottomLeft) + .line(points.bottomRight) + .line(points.edgeRight) + .curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop) + .close() // highlight-end -return part + return part } - ``` -``` diff --git a/sites/dev/docs/tutorials/pattern-design/part3/annotations/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part3/annotations/readme.mdx index d8020b7f8be..e955e02970b 100644 --- a/sites/dev/docs/tutorials/pattern-design/part3/annotations/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part3/annotations/readme.mdx @@ -3,9 +3,9 @@ title: Adding annotations sidebar_position: 20 --- -Our pattern is still a little bit _bare_. It would be nice to add some _annotations_ to it. +Our pattern is still a little bit *bare*. It would be nice to add some *annotations* to it. -When I say _annotations_ it's an umbrella term for things like text or other +When I say *annotations* it's an umbrella term for things like text or other bits of information that help the user understand the pattern. ## Adding snippets @@ -42,17 +42,15 @@ function draftBib({ part, }) { -/\* - -- Construct the neck opening - _/ - const target = (measurements.head _ options.neckRatio) / 4 + /* + * Construct the neck opening + */ + const target = (measurements.head * options.neckRatio) / 4 let tweak = 1 let delta do { - points.right = new Point((tweak _ measurements.head) / 10, 0) - points.bottom = new Point(0, (tweak _ measurements.head) / 12) - + points.right = new Point((tweak * measurements.head) / 10, 0) + points.bottom = new Point(0, (tweak * measurements.head) / 12) points.rightCp1 = points.right.shift(90, points.bottom.dy(points.right) / 2) points.bottomCp2 = points.bottom.shift(0, points.bottom.dx(points.right) / 2) @@ -64,116 +62,108 @@ function draftBib({ delta = paths.neck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -} while (Math.abs(delta) > 1) + points.rightCp2 = points.rightCp1.flipY() + points.bottomCp1 = points.bottomCp2.flipX() -points.rightCp2 = points.rightCp1.flipY() -points.bottomCp1 = points.bottomCp2.flipX() + points.left = points.right.flipX() + points.leftCp1 = points.rightCp2.flipX() + points.leftCp2 = points.rightCp1.flipX() -points.left = points.right.flipX() -points.leftCp1 = points.rightCp2.flipX() -points.leftCp2 = points.rightCp1.flipX() + points.top = points.bottom.flipY() + points.topCp1 = points.bottomCp2.flipY() + points.topCp2 = points.bottomCp1.flipY() -points.top = points.bottom.flipY() -points.topCp1 = points.bottomCp2.flipY() -points.topCp2 = points.bottomCp1.flipY() + /* + * Construct the outline + */ + let width = measurements.head * options.widthRatio + let length = measurements.head * options.lengthRatio -/\* + points.topLeft = new Point(width / -2, points.top.y - (width / 2 - points.right.x)) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) -- Construct the outline - _/ - let width = measurements.head _ options.widthRatio - let length = measurements.head \* options.lengthRatio + points.edgeLeft = new Point(points.topLeft.x, points.left.y) + points.edgeRight = new Point(points.topRight.x, points.right.y) + points.edgeTop = new Point(0, points.topLeft.y) -points.topLeft = new Point(width / -2, points.top.y - (width / 2 - points.right.x)) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) + points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) + points.edgeRightCp = points.edgeLeftCp.flipX() + points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(points.topLeft, 0.5) + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -points.edgeLeft = new Point(points.topLeft.x, points.left.y) -points.edgeRight = new Point(points.topRight.x, points.right.y) -points.edgeTop = new Point(0, points.topLeft.y) - -points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) -points.edgeRightCp = points.edgeLeftCp.flipX() -points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(points.topLeft, 0.5) -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() - -/\* - -- Round the end of the straps - \*/ + /* + * Round the end of the straps + */ let strap = points.edgeTop.dy(points.top) -points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) -points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) -points.tipRightBottom = new Point(points.tipRight.x, points.top.y) + points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) + points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) + points.tipRightBottom = new Point(points.tipRight.x, points.top.y) -/\* - -- Macros will return the auto-generated IDs - \*/ + /* + * Macros will return the auto-generated IDs + */ const ids1 = { - tipRightTop: macro('round', { - id: 'tipRightTop', - from: points.edgeTop, - to: points.tipRight, - via: points.tipRightTop, - }), - tipRightBottom: macro('round', { - id: 'tipRightBottom', - from: points.tipRight, - to: points.top, - via: points.tipRightBottom, - }), + tipRightTop: macro('round', { + id: 'tipRightTop', + from: points.edgeTop, + to: points.tipRight, + via: points.tipRightTop, + }), + tipRightBottom: macro('round', { + id: 'tipRightBottom', + from: points.tipRight, + to: points.top, + via: points.tipRightBottom, + }), } -/\* - -- Create points from them with easy names - \*/ + /* + * Create points from them with easy names + */ for (const side in ids1) { - for (const id of ['start', 'cp1', 'cp2', 'end']) { - points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() - } + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() + } } -/\* - -- Rotate straps so they don't overlap - \*/ + /* + * Rotate straps so they don't overlap + */ let rotateThese = [ - 'edgeTopLeftCp', - 'edgeTop', - 'tipRight', - 'tipRightTop', - 'tipRightTopStart', - 'tipRightTopCp1', - 'tipRightTopCp2', - 'tipRightTopEnd', - 'tipRightBottomStart', - 'tipRightBottomCp1', - 'tipRightBottomCp2', - 'tipRightBottomEnd', - 'tipRightBottom', - 'top', - 'topCp2', + 'edgeTopLeftCp', + 'edgeTop', + 'tipRight', + 'tipRightTop', + 'tipRightTopStart', + 'tipRightTopCp1', + 'tipRightTopCp2', + 'tipRightTopEnd', + 'tipRightBottomStart', + 'tipRightBottomCp1', + 'tipRightBottomCp2', + 'tipRightBottomEnd', + 'tipRightBottom', + 'top', + 'topCp2', ] -while (points.tipRightBottomStart.x > -1) { -for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) -} + while (points.tipRightBottomStart.x > -1) { + for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) + } -/\* - -- Add points to anchor snaps on - \*/ + /* + * Add points to anchor snaps on + */ points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) -/\* - -- Mirror points to the other side - \*/ + /* + * Mirror points to the other side + */ points.edgeTopRightCp = points.edgeTopLeftCp.flipX() points.topCp1 = points.topCp2.flipX() points.tipLeftTopStart = points.tipRightTopStart.flipX() @@ -186,88 +176,83 @@ for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() points.snapRight = points.snapLeft.flipX() -/\* - -- Round the bottom of the bib -- Radius is fixed, but you could use an option for it) -- -- Macros will return the auto-generated IDs - _/ + /* + * Round the bottom of the bib + * Radius is fixed, but you could use an option for it) + * + * Macros will return the auto-generated IDs + */ const ids2 = { - bottomLeft: macro('round', { - id: 'bottomLeft', - from: points.topLeft, - to: points.bottomRight, - via: points.bottomLeft, - radius: points.bottomRight.x / 4, - }), - bottomRight: macro('round', { - id: 'bottomRight', - from: points.bottomLeft, - to: points.topRight, - via: points.bottomRight, - radius: points.bottomRight.x / 4, - }), + bottomLeft: macro('round', { + id: 'bottomLeft', + from: points.topLeft, + to: points.bottomRight, + via: points.bottomLeft, + radius: points.bottomRight.x / 4, + }), + bottomRight: macro('round', { + id: 'bottomRight', + from: points.bottomLeft, + to: points.topRight, + via: points.bottomRight, + radius: points.bottomRight.x / 4, + }), } - /_ -- Create points from them with easy names - \*/ + /* + * Create points from them with easy names + */ for (const side in ids2) { - for (const id of ['start', 'cp1', 'cp2', 'end']) { - points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() - } + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() + } } -/\* - -- Construct the path - \*/ + /* + * Construct the path + */ paths.seam = new Path() - .move(points.edgeLeft) - .line(points.bottomLeftStart) - .curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) - .line(points.bottomRightStart) - .curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) - .line(points.edgeRight) - .curve(points.edgeRightCp, points.edgeTopRightCp, points.tipLeftTopStart) - .curve(points.tipLeftTopCp1, points.tipLeftTopCp2, points.tipLeftTopEnd) - .curve(points.tipLeftBottomCp1, points.tipLeftBottomCp2, points.tipLeftBottomEnd) - .curve(points.topCp1, points.rightCp2, points.right) - .curve(points.rightCp1, points.bottomCp2, points.bottom) - .curve(points.bottomCp1, points.leftCp2, points.left) - .curve(points.leftCp1, points.topCp2, points.tipRightBottomEnd) - .curve(points.tipRightBottomCp2, points.tipRightBottomCp1, points.tipRightBottomStart) - .curve(points.tipRightTopCp2, points.tipRightTopCp1, points.tipRightTopStart) - .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) - .close() - .attr('class', 'fabric') + .move(points.edgeLeft) + .line(points.bottomLeftStart) + .curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) + .line(points.bottomRightStart) + .curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) + .line(points.edgeRight) + .curve(points.edgeRightCp, points.edgeTopRightCp, points.tipLeftTopStart) + .curve(points.tipLeftTopCp1, points.tipLeftTopCp2, points.tipLeftTopEnd) + .curve(points.tipLeftBottomCp1, points.tipLeftBottomCp2, points.tipLeftBottomEnd) + .curve(points.topCp1, points.rightCp2, points.right) + .curve(points.rightCp1, points.bottomCp2, points.bottom) + .curve(points.bottomCp1, points.leftCp2, points.left) + .curve(points.leftCp1, points.topCp2, points.tipRightBottomEnd) + .curve(points.tipRightBottomCp2, points.tipRightBottomCp1, points.tipRightBottomStart) + .curve(points.tipRightTopCp2, points.tipRightTopCp1, points.tipRightTopStart) + .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) + .close() + .attr('class', 'fabric') -// highlight-start -/\* + // highlight-start + /* + * + * Annotations + * + */ -- -- Annotations -- \*/ - -/\* - -- Add the snaps - \*/ + /* + * Add the snaps + */ snippets.snapStud = new Snippet('snap-stud', points.snapLeft) snippets.snapSocket = new Snippet('snap-socket', points.snapRight).attr('opacity', 0.5) -/\* - -- Add the logo - \*/ + /* + * Add the logo + */ points.logo = new Point(0, 0) snippets.logo = new Snippet('logo', points.logo) // highlight-end -return part + return part } - -```` +``` ## Setting the cutlist, adding a title and scalebox @@ -537,6 +522,6 @@ function draftBib({ return part } -```` - +``` + diff --git a/sites/dev/docs/tutorials/pattern-design/part3/complete/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part3/complete/readme.mdx index 958dc410454..2da692d1e84 100644 --- a/sites/dev/docs/tutorials/pattern-design/part3/complete/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part3/complete/readme.mdx @@ -7,18 +7,18 @@ Laser cutters is merely an example of a situation where your user wants not the complete detailed pattern with all annotations, but just the outlines. Essentially what we had at the end of part 2 of this tutorial. -Since then, we've added a bunch of embellishments, and perhaps the user does +Since then, we've added a bunch of embellishments, and perhaps the user does not want those. -Well, good news: there is a setting for that too. That setting is `complete`, +Well, good news: there is a setting for that too. That setting is `complete`, and more annotations will automatically take it into account. -For example, if you put a logo or title on the pattern, it will check the +For example, if you put a logo or title on the pattern, it will check the `complete` setting and if it is `false` it will do nothing. -When we say we're going to _complete_ our pattern, we mean we're going to add +When we say we're going to *complete* our pattern, we mean we're going to add things like a title and a scalebox and so on. -So while in most scenarios you don't have to worry about `complete`, you +So while in most scenarios you don't have to worry about `complete`, you should keep it in mind when you are adding text or paths to the design that should not be shown on a non-complete pattern. @@ -46,15 +46,15 @@ function draftBib({ part, }) { -/\* -_ Construct the neck opening -_/ -const target = (measurements.head _ options.neckRatio) / 4 -let tweak = 1 -let delta -do { -points.right = new Point((tweak _ measurements.head) / 10, 0) -points.bottom = new Point(0, (tweak \* measurements.head) / 12) + /* + * Construct the neck opening + */ + const target = (measurements.head * options.neckRatio) / 4 + let tweak = 1 + let delta + do { + points.right = new Point((tweak * measurements.head) / 10, 0) + points.bottom = new Point(0, (tweak * measurements.head) / 12) points.rightCp1 = points.right.shift(90, points.bottom.dy(points.right) / 2) points.bottomCp2 = points.bottom.shift(0, points.bottom.dx(points.right) / 2) @@ -66,229 +66,229 @@ points.bottom = new Point(0, (tweak \* measurements.head) / 12) delta = paths.neck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -} while (Math.abs(delta) > 1) + points.rightCp2 = points.rightCp1.flipY() + points.bottomCp1 = points.bottomCp2.flipX() -points.rightCp2 = points.rightCp1.flipY() -points.bottomCp1 = points.bottomCp2.flipX() + points.left = points.right.flipX() + points.leftCp1 = points.rightCp2.flipX() + points.leftCp2 = points.rightCp1.flipX() -points.left = points.right.flipX() -points.leftCp1 = points.rightCp2.flipX() -points.leftCp2 = points.rightCp1.flipX() + points.top = points.bottom.flipY() + points.topCp1 = points.bottomCp2.flipY() + points.topCp2 = points.bottomCp1.flipY() -points.top = points.bottom.flipY() -points.topCp1 = points.bottomCp2.flipY() -points.topCp2 = points.bottomCp1.flipY() + /* + * Construct the outline + */ + let width = measurements.head * options.widthRatio + let length = measurements.head * options.lengthRatio -/\* -_ Construct the outline -_/ -let width = measurements.head _ options.widthRatio -let length = measurements.head _ options.lengthRatio + points.topLeft = new Point(width / -2, points.top.y - (width / 2 - points.right.x)) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) -points.topLeft = new Point(width / -2, points.top.y - (width / 2 - points.right.x)) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) + points.edgeLeft = new Point(points.topLeft.x, points.left.y) + points.edgeRight = new Point(points.topRight.x, points.right.y) + points.edgeTop = new Point(0, points.topLeft.y) -points.edgeLeft = new Point(points.topLeft.x, points.left.y) -points.edgeRight = new Point(points.topRight.x, points.right.y) -points.edgeTop = new Point(0, points.topLeft.y) + points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) + points.edgeRightCp = points.edgeLeftCp.flipX() + points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(points.topLeft, 0.5) + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) -points.edgeRightCp = points.edgeLeftCp.flipX() -points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(points.topLeft, 0.5) -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + /* + * Round the end of the straps + */ + let strap = points.edgeTop.dy(points.top) -/\* -_ Round the end of the straps -_/ -let strap = points.edgeTop.dy(points.top) + points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) + points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) + points.tipRightBottom = new Point(points.tipRight.x, points.top.y) -points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) -points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) -points.tipRightBottom = new Point(points.tipRight.x, points.top.y) + /* + * Macros will return the auto-generated IDs + */ + const ids1 = { + tipRightTop: macro('round', { + id: 'tipRightTop', + from: points.edgeTop, + to: points.tipRight, + via: points.tipRightTop, + }), + tipRightBottom: macro('round', { + id: 'tipRightBottom', + from: points.tipRight, + to: points.top, + via: points.tipRightBottom, + }), + } -/\* -_ Macros will return the auto-generated IDs -_/ -const ids1 = { -tipRightTop: macro('round', { -id: 'tipRightTop', -from: points.edgeTop, -to: points.tipRight, -via: points.tipRightTop, -}), -tipRightBottom: macro('round', { -id: 'tipRightBottom', -from: points.tipRight, -to: points.top, -via: points.tipRightBottom, -}), + /* + * Create points from them with easy names + */ + for (const side in ids1) { + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() + } + } + + /* + * Rotate straps so they don't overlap + */ + let rotateThese = [ + 'edgeTopLeftCp', + 'edgeTop', + 'tipRight', + 'tipRightTop', + 'tipRightTopStart', + 'tipRightTopCp1', + 'tipRightTopCp2', + 'tipRightTopEnd', + 'tipRightBottomStart', + 'tipRightBottomCp1', + 'tipRightBottomCp2', + 'tipRightBottomEnd', + 'tipRightBottom', + 'top', + 'topCp2', + ] + + while (points.tipRightBottomStart.x > -1) { + for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) + } + + /* + * Add points to anchor snaps on + */ + points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) + + /* + * Mirror points to the other side + */ + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.topCp1 = points.topCp2.flipX() + points.tipLeftTopStart = points.tipRightTopStart.flipX() + points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() + points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() + points.tipLeftTopEnd = points.tipRightTopEnd.flipX() + points.tipLeftBottomStart = points.tipRightBottomStart.flipX() + points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() + points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() + points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() + points.snapRight = points.snapLeft.flipX() + + /* + * Round the bottom of the bib + * Radius is fixed, but you could use an option for it) + * + * Macros will return the auto-generated IDs + */ + const ids2 = { + bottomLeft: macro('round', { + id: 'bottomLeft', + from: points.topLeft, + to: points.bottomRight, + via: points.bottomLeft, + radius: points.bottomRight.x / 4, + }), + bottomRight: macro('round', { + id: 'bottomRight', + from: points.bottomLeft, + to: points.topRight, + via: points.bottomRight, + radius: points.bottomRight.x / 4, + }), + } + /* + * Create points from them with easy names + */ + for (const side in ids2) { + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() + } + } + + /* + * Construct the path + */ + paths.seam = new Path() + .move(points.edgeLeft) + .line(points.bottomLeftStart) + .curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) + .line(points.bottomRightStart) + .curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) + .line(points.edgeRight) + .curve(points.edgeRightCp, points.edgeTopRightCp, points.tipLeftTopStart) + .curve(points.tipLeftTopCp1, points.tipLeftTopCp2, points.tipLeftTopEnd) + .curve(points.tipLeftBottomCp1, points.tipLeftBottomCp2, points.tipLeftBottomEnd) + .curve(points.topCp1, points.rightCp2, points.right) + .curve(points.rightCp1, points.bottomCp2, points.bottom) + .curve(points.bottomCp1, points.leftCp2, points.left) + .curve(points.leftCp1, points.topCp2, points.tipRightBottomEnd) + .curve(points.tipRightBottomCp2, points.tipRightBottomCp1, points.tipRightBottomStart) + .curve(points.tipRightTopCp2, points.tipRightTopCp1, points.tipRightTopStart) + .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) + .close() + .attr('class', 'fabric') + + /* + * + * Annotations + * + */ + + /* + * Cut list + */ + store.cutlist.addCut({ cut: 1, from: 'fabric' }) + + /* + * Add the snaps + */ + snippets.snapStud = new Snippet('snap-stud', points.snapLeft) + snippets.snapSocket = new Snippet('snap-socket', points.snapRight).attr('opacity', 0.5) + + // highlight-start + /* + * Add the bias tape + */ + if (complete) + paths.bias = paths.seam + .offset(-5) + .addClass('note dashed') + .addText('tutorial:finishWithBiasTape', 'center fill-note') + // highlight-end + + /* + * Add the title + */ + points.title = points.bottom.shift(-90, 45) + macro('title', { + at: points.title, + nr: 1, + title: 'bib', + align: 'center', + scale: 0.8, + }) + + /* + * Add the scalebox + */ + points.scalebox = points.title.shift(-90, 65) + macro('scalebox', { at: points.scalebox }) + + /* + * Add the logo + */ + points.logo = new Point(0, 0) + snippets.logo = new Snippet('logo', points.logo) + + return part } - -/\* -_ Create points from them with easy names -_/ -for (const side in ids1) { -for (const id of ['start', 'cp1', 'cp2', 'end']) { -points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() -} -} - -/\* -_ Rotate straps so they don't overlap -_/ -let rotateThese = [ -'edgeTopLeftCp', -'edgeTop', -'tipRight', -'tipRightTop', -'tipRightTopStart', -'tipRightTopCp1', -'tipRightTopCp2', -'tipRightTopEnd', -'tipRightBottomStart', -'tipRightBottomCp1', -'tipRightBottomCp2', -'tipRightBottomEnd', -'tipRightBottom', -'top', -'topCp2', -] - -while (points.tipRightBottomStart.x > -1) { -for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) -} - -/\* -_ Add points to anchor snaps on -_/ -points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) - -/\* -_ Mirror points to the other side -_/ -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -points.topCp1 = points.topCp2.flipX() -points.tipLeftTopStart = points.tipRightTopStart.flipX() -points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() -points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() -points.tipLeftTopEnd = points.tipRightTopEnd.flipX() -points.tipLeftBottomStart = points.tipRightBottomStart.flipX() -points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() -points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() -points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() -points.snapRight = points.snapLeft.flipX() - -/\* -_ Round the bottom of the bib -_ Radius is fixed, but you could use an option for it) \* -_ Macros will return the auto-generated IDs -_/ -const ids2 = { -bottomLeft: macro('round', { -id: 'bottomLeft', -from: points.topLeft, -to: points.bottomRight, -via: points.bottomLeft, -radius: points.bottomRight.x / 4, -}), -bottomRight: macro('round', { -id: 'bottomRight', -from: points.bottomLeft, -to: points.topRight, -via: points.bottomRight, -radius: points.bottomRight.x / 4, -}), -} -/\* -_ Create points from them with easy names -_/ -for (const side in ids2) { -for (const id of ['start', 'cp1', 'cp2', 'end']) { -points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() -} -} - -/\* -_ Construct the path -_/ -paths.seam = new Path() -.move(points.edgeLeft) -.line(points.bottomLeftStart) -.curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) -.line(points.bottomRightStart) -.curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) -.line(points.edgeRight) -.curve(points.edgeRightCp, points.edgeTopRightCp, points.tipLeftTopStart) -.curve(points.tipLeftTopCp1, points.tipLeftTopCp2, points.tipLeftTopEnd) -.curve(points.tipLeftBottomCp1, points.tipLeftBottomCp2, points.tipLeftBottomEnd) -.curve(points.topCp1, points.rightCp2, points.right) -.curve(points.rightCp1, points.bottomCp2, points.bottom) -.curve(points.bottomCp1, points.leftCp2, points.left) -.curve(points.leftCp1, points.topCp2, points.tipRightBottomEnd) -.curve(points.tipRightBottomCp2, points.tipRightBottomCp1, points.tipRightBottomStart) -.curve(points.tipRightTopCp2, points.tipRightTopCp1, points.tipRightTopStart) -.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) -.close() -.attr('class', 'fabric') - -/\* \* -_ Annotations -_ -\*/ - -/\* -_ Cut list -_/ -store.cutlist.addCut({ cut: 1, from: 'fabric' }) - -/\* -_ Add the snaps -_/ -snippets.snapStud = new Snippet('snap-stud', points.snapLeft) -snippets.snapSocket = new Snippet('snap-socket', points.snapRight).attr('opacity', 0.5) - -// highlight-start -/\* -_ Add the bias tape -_/ -if (complete) -paths.bias = paths.seam -.offset(-5) -.addClass('note dashed') -.addText('tutorial:finishWithBiasTape', 'center fill-note') -// highlight-end - -/\* -_ Add the title -_/ -points.title = points.bottom.shift(-90, 45) -macro('title', { -at: points.title, -nr: 1, -title: 'bib', -align: 'center', -scale: 0.8, -}) - -/\* -_ Add the scalebox -_/ -points.scalebox = points.title.shift(-90, 65) -macro('scalebox', { at: points.scalebox }) - -/\* -_ Add the logo -_/ -points.logo = new Point(0, 0) -snippets.logo = new Snippet('logo', points.logo) - -return part -} - -```` +``` @@ -556,6 +556,6 @@ function draftBib({ return part } -```` - +``` + diff --git a/sites/dev/docs/tutorials/pattern-design/part3/flag/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part3/flag/readme.mdx index a550e10c252..e7265c2f32f 100644 --- a/sites/dev/docs/tutorials/pattern-design/part3/flag/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part3/flag/readme.mdx @@ -4,7 +4,7 @@ sidebar_position: 50 --- As a designer, there are times you want to bring something to the attention of -the user. I am not talking about generic information that can go in the +the user. I am not talking about generic information that can go in the documentation, but rather a message that is tailored specifically to this pattern, much like this pattern is specifically tailored to the user. @@ -47,15 +47,15 @@ function draftBib({ part, }) { -/\* -_ Construct the neck opening -_/ -const target = (measurements.head _ options.neckRatio) / 4 -let tweak = 1 -let delta -do { -points.right = new Point((tweak _ measurements.head) / 10, 0) -points.bottom = new Point(0, (tweak \* measurements.head) / 12) + /* + * Construct the neck opening + */ + const target = (measurements.head * options.neckRatio) / 4 + let tweak = 1 + let delta + do { + points.right = new Point((tweak * measurements.head) / 10, 0) + points.bottom = new Point(0, (tweak * measurements.head) / 12) points.rightCp1 = points.right.shift(90, points.bottom.dy(points.right) / 2) points.bottomCp2 = points.bottom.shift(0, points.bottom.dx(points.right) / 2) @@ -67,278 +67,277 @@ points.bottom = new Point(0, (tweak \* measurements.head) / 12) delta = paths.neck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -} while (Math.abs(delta) > 1) + points.rightCp2 = points.rightCp1.flipY() + points.bottomCp1 = points.bottomCp2.flipX() -points.rightCp2 = points.rightCp1.flipY() -points.bottomCp1 = points.bottomCp2.flipX() + points.left = points.right.flipX() + points.leftCp1 = points.rightCp2.flipX() + points.leftCp2 = points.rightCp1.flipX() -points.left = points.right.flipX() -points.leftCp1 = points.rightCp2.flipX() -points.leftCp2 = points.rightCp1.flipX() + points.top = points.bottom.flipY() + points.topCp1 = points.bottomCp2.flipY() + points.topCp2 = points.bottomCp1.flipY() -points.top = points.bottom.flipY() -points.topCp1 = points.bottomCp2.flipY() -points.topCp2 = points.bottomCp1.flipY() + /* + * Construct the outline + */ + let width = measurements.head * options.widthRatio + let length = measurements.head * options.lengthRatio -/\* -_ Construct the outline -_/ -let width = measurements.head _ options.widthRatio -let length = measurements.head _ options.lengthRatio + points.topLeft = new Point(width / -2, points.top.y - (width / 2 - points.right.x)) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) -points.topLeft = new Point(width / -2, points.top.y - (width / 2 - points.right.x)) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) + points.edgeLeft = new Point(points.topLeft.x, points.left.y) + points.edgeRight = new Point(points.topRight.x, points.right.y) + points.edgeTop = new Point(0, points.topLeft.y) -points.edgeLeft = new Point(points.topLeft.x, points.left.y) -points.edgeRight = new Point(points.topRight.x, points.right.y) -points.edgeTop = new Point(0, points.topLeft.y) + points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) + points.edgeRightCp = points.edgeLeftCp.flipX() + points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(points.topLeft, 0.5) + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) -points.edgeRightCp = points.edgeLeftCp.flipX() -points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(points.topLeft, 0.5) -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + /* + * Round the end of the straps + */ + let strap = points.edgeTop.dy(points.top) -/\* -_ Round the end of the straps -_/ -let strap = points.edgeTop.dy(points.top) + points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) + points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) + points.tipRightBottom = new Point(points.tipRight.x, points.top.y) -points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) -points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) -points.tipRightBottom = new Point(points.tipRight.x, points.top.y) + /* + * Macros will return the auto-generated IDs + */ + const ids1 = { + tipRightTop: macro('round', { + id: 'tipRightTop', + from: points.edgeTop, + to: points.tipRight, + via: points.tipRightTop, + }), + tipRightBottom: macro('round', { + id: 'tipRightBottom', + from: points.tipRight, + to: points.top, + via: points.tipRightBottom, + }), + } -/\* -_ Macros will return the auto-generated IDs -_/ -const ids1 = { -tipRightTop: macro('round', { -id: 'tipRightTop', -from: points.edgeTop, -to: points.tipRight, -via: points.tipRightTop, -}), -tipRightBottom: macro('round', { -id: 'tipRightBottom', -from: points.tipRight, -to: points.top, -via: points.tipRightBottom, -}), + /* + * Create points from them with easy names + */ + for (const side in ids1) { + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() + } + } + + /* + * Rotate straps so they don't overlap + */ + let rotateThese = [ + 'edgeTopLeftCp', + 'edgeTop', + 'tipRight', + 'tipRightTop', + 'tipRightTopStart', + 'tipRightTopCp1', + 'tipRightTopCp2', + 'tipRightTopEnd', + 'tipRightBottomStart', + 'tipRightBottomCp1', + 'tipRightBottomCp2', + 'tipRightBottomEnd', + 'tipRightBottom', + 'top', + 'topCp2', + ] + + while (points.tipRightBottomStart.x > -1) { + for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) + } + + /* + * Add points to anchor snaps on + */ + points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) + + /* + * Mirror points to the other side + */ + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.topCp1 = points.topCp2.flipX() + points.tipLeftTopStart = points.tipRightTopStart.flipX() + points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() + points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() + points.tipLeftTopEnd = points.tipRightTopEnd.flipX() + points.tipLeftBottomStart = points.tipRightBottomStart.flipX() + points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() + points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() + points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() + points.snapRight = points.snapLeft.flipX() + + /* + * Round the bottom of the bib + * Radius is fixed, but you could use an option for it) + * + * Macros will return the auto-generated IDs + */ + const ids2 = { + bottomLeft: macro('round', { + id: 'bottomLeft', + from: points.topLeft, + to: points.bottomRight, + via: points.bottomLeft, + radius: points.bottomRight.x / 4, + }), + bottomRight: macro('round', { + id: 'bottomRight', + from: points.bottomLeft, + to: points.topRight, + via: points.bottomRight, + radius: points.bottomRight.x / 4, + }), + } + /* + * Create points from them with easy names + */ + for (const side in ids2) { + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() + } + } + + /* + * Construct the path + */ + paths.seam = new Path() + .move(points.edgeLeft) + .line(points.bottomLeftStart) + .curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) + .line(points.bottomRightStart) + .curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) + .line(points.edgeRight) + .curve(points.edgeRightCp, points.edgeTopRightCp, points.tipLeftTopStart) + .curve(points.tipLeftTopCp1, points.tipLeftTopCp2, points.tipLeftTopEnd) + .curve(points.tipLeftBottomCp1, points.tipLeftBottomCp2, points.tipLeftBottomEnd) + .curve(points.topCp1, points.rightCp2, points.right) + .curve(points.rightCp1, points.bottomCp2, points.bottom) + .curve(points.bottomCp1, points.leftCp2, points.left) + .curve(points.leftCp1, points.topCp2, points.tipRightBottomEnd) + .curve(points.tipRightBottomCp2, points.tipRightBottomCp1, points.tipRightBottomStart) + .curve(points.tipRightTopCp2, points.tipRightTopCp1, points.tipRightTopStart) + .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) + .close() + .attr('class', 'fabric') + + /* + * + * Annotations + * + */ + + // highlight-start + /* + * Let the user know about the bias tape and fabric requirements + */ + store.flag.note({ + msg: 'tutorial:biasTapeLength', + replace: { + l: units(paths.seam.length()), + }, + }) + // highlight-end + + /* + * Cut list + */ + store.cutlist.addCut({ cut: 1, from: 'fabric' }) + + /* + * Add the snaps + */ + snippets.snapStud = new Snippet('snap-stud', points.snapLeft) + snippets.snapSocket = new Snippet('snap-socket', points.snapRight).attr('opacity', 0.5) + + /* + * Add the bias tape + */ + if (complete) + paths.bias = paths.seam + .offset(-5) + .addClass('note dashed') + .addText('finishWithBiasTape', 'center fill-note') + + /* + * Add the title + */ + points.title = points.bottom.shift(-90, 45) + macro('title', { + at: points.title, + nr: 1, + title: 'bib', + align: 'center', + scale: 0.8, + }) + + /* + * Add the scalebox + */ + points.scalebox = points.title.shift(-90, 65) + macro('scalebox', { at: points.scalebox }) + + /* + * Add the logo + */ + points.logo = new Point(0, 0) + snippets.logo = new Snippet('logo', points.logo) + + /* + * Add dimensions + */ + macro('hd', { + id: 'wFull', + from: points.bottomLeftStart, + to: points.bottomRightEnd, + y: points.bottomLeft.y + 15, + }) + macro('vd', { + id: 'hBottomToOpeningBottom', + from: points.bottomRightStart, + to: points.bottom, + x: points.bottomRight.x + 15, + }) + macro('vd', { + id: 'hBottomToOpeningCenter', + from: points.bottomRightStart, + to: points.right, + x: points.bottomRight.x + 30, + }) + macro('vd', { + id: 'hTotal', + from: points.bottomRightStart, + to: points.tipLeftTopStart, + x: points.bottomRight.x + 45, + }) + macro('hd', { + id: 'wOpening', + from: points.left, + to: points.right, + y: points.left.y + 25, + }) + macro('ld', { + id: 'wStrap', + from: points.tipLeftBottomEnd, + to: points.tipLeftTopStart, + d: -15, + }) + + return part } - -/\* -_ Create points from them with easy names -_/ -for (const side in ids1) { -for (const id of ['start', 'cp1', 'cp2', 'end']) { -points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() -} -} - -/\* -_ Rotate straps so they don't overlap -_/ -let rotateThese = [ -'edgeTopLeftCp', -'edgeTop', -'tipRight', -'tipRightTop', -'tipRightTopStart', -'tipRightTopCp1', -'tipRightTopCp2', -'tipRightTopEnd', -'tipRightBottomStart', -'tipRightBottomCp1', -'tipRightBottomCp2', -'tipRightBottomEnd', -'tipRightBottom', -'top', -'topCp2', -] - -while (points.tipRightBottomStart.x > -1) { -for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) -} - -/\* -_ Add points to anchor snaps on -_/ -points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) - -/\* -_ Mirror points to the other side -_/ -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -points.topCp1 = points.topCp2.flipX() -points.tipLeftTopStart = points.tipRightTopStart.flipX() -points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() -points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() -points.tipLeftTopEnd = points.tipRightTopEnd.flipX() -points.tipLeftBottomStart = points.tipRightBottomStart.flipX() -points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() -points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() -points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() -points.snapRight = points.snapLeft.flipX() - -/\* -_ Round the bottom of the bib -_ Radius is fixed, but you could use an option for it) \* -_ Macros will return the auto-generated IDs -_/ -const ids2 = { -bottomLeft: macro('round', { -id: 'bottomLeft', -from: points.topLeft, -to: points.bottomRight, -via: points.bottomLeft, -radius: points.bottomRight.x / 4, -}), -bottomRight: macro('round', { -id: 'bottomRight', -from: points.bottomLeft, -to: points.topRight, -via: points.bottomRight, -radius: points.bottomRight.x / 4, -}), -} -/\* -_ Create points from them with easy names -_/ -for (const side in ids2) { -for (const id of ['start', 'cp1', 'cp2', 'end']) { -points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() -} -} - -/\* -_ Construct the path -_/ -paths.seam = new Path() -.move(points.edgeLeft) -.line(points.bottomLeftStart) -.curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) -.line(points.bottomRightStart) -.curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) -.line(points.edgeRight) -.curve(points.edgeRightCp, points.edgeTopRightCp, points.tipLeftTopStart) -.curve(points.tipLeftTopCp1, points.tipLeftTopCp2, points.tipLeftTopEnd) -.curve(points.tipLeftBottomCp1, points.tipLeftBottomCp2, points.tipLeftBottomEnd) -.curve(points.topCp1, points.rightCp2, points.right) -.curve(points.rightCp1, points.bottomCp2, points.bottom) -.curve(points.bottomCp1, points.leftCp2, points.left) -.curve(points.leftCp1, points.topCp2, points.tipRightBottomEnd) -.curve(points.tipRightBottomCp2, points.tipRightBottomCp1, points.tipRightBottomStart) -.curve(points.tipRightTopCp2, points.tipRightTopCp1, points.tipRightTopStart) -.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) -.close() -.attr('class', 'fabric') - -/\* \* -_ Annotations -_ -\*/ - -// highlight-start -/\* -_ Let the user know about the bias tape and fabric requirements -_/ -store.flag.note({ -msg: 'tutorial:biasTapeLength', -replace: { -l: units(paths.seam.length()), -}, -}) -// highlight-end - -/\* -_ Cut list -_/ -store.cutlist.addCut({ cut: 1, from: 'fabric' }) - -/\* -_ Add the snaps -_/ -snippets.snapStud = new Snippet('snap-stud', points.snapLeft) -snippets.snapSocket = new Snippet('snap-socket', points.snapRight).attr('opacity', 0.5) - -/\* -_ Add the bias tape -_/ -if (complete) -paths.bias = paths.seam -.offset(-5) -.addClass('note dashed') -.addText('finishWithBiasTape', 'center fill-note') - -/\* -_ Add the title -_/ -points.title = points.bottom.shift(-90, 45) -macro('title', { -at: points.title, -nr: 1, -title: 'bib', -align: 'center', -scale: 0.8, -}) - -/\* -_ Add the scalebox -_/ -points.scalebox = points.title.shift(-90, 65) -macro('scalebox', { at: points.scalebox }) - -/\* -_ Add the logo -_/ -points.logo = new Point(0, 0) -snippets.logo = new Snippet('logo', points.logo) - -/\* -_ Add dimensions -_/ -macro('hd', { -id: 'wFull', -from: points.bottomLeftStart, -to: points.bottomRightEnd, -y: points.bottomLeft.y + 15, -}) -macro('vd', { -id: 'hBottomToOpeningBottom', -from: points.bottomRightStart, -to: points.bottom, -x: points.bottomRight.x + 15, -}) -macro('vd', { -id: 'hBottomToOpeningCenter', -from: points.bottomRightStart, -to: points.right, -x: points.bottomRight.x + 30, -}) -macro('vd', { -id: 'hTotal', -from: points.bottomRightStart, -to: points.tipLeftTopStart, -x: points.bottomRight.x + 45, -}) -macro('hd', { -id: 'wOpening', -from: points.left, -to: points.right, -y: points.left.y + 25, -}) -macro('ld', { -id: 'wStrap', -from: points.tipLeftBottomEnd, -to: points.tipLeftTopStart, -d: -15, -}) - -return part -} - ``` -``` diff --git a/sites/dev/docs/tutorials/pattern-design/part3/paperless/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part3/paperless/readme.mdx index 973cd68a797..2ebbda71b93 100644 --- a/sites/dev/docs/tutorials/pattern-design/part3/paperless/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part3/paperless/readme.mdx @@ -14,14 +14,14 @@ So let's make the extra effort to make our bib design support paperless. ## The paperless setting Users can request paperless patterns by setting [the `paperless` -setting](/reference/settings/paperless) to a _truthy_ value. +setting](/reference/settings/paperless) to a *truthy* value. With paperless enabled, FreeSewing will automatically render a grid for each pattern part with metric or imperial markings, depending on the units requested by the user. Such a grid is already a good starting point. In addition, we'll be using -different macros to add _dimensions_ to the pattern. +different macros to add *dimensions* to the pattern. While the grid gets added automatically, the dimensions we have to add ourselves. Thankfully, there's macros that can help us with that, specifically: @@ -58,15 +58,15 @@ function draftBib({ part, }) { -/\* -_ Construct the neck opening -_/ -const target = (measurements.head _ options.neckRatio) / 4 -let tweak = 1 -let delta -do { -points.right = new Point((tweak _ measurements.head) / 10, 0) -points.bottom = new Point(0, (tweak \* measurements.head) / 12) + /* + * Construct the neck opening + */ + const target = (measurements.head * options.neckRatio) / 4 + let tweak = 1 + let delta + do { + points.right = new Point((tweak * measurements.head) / 10, 0) + points.bottom = new Point(0, (tweak * measurements.head) / 12) points.rightCp1 = points.right.shift(90, points.bottom.dy(points.right) / 2) points.bottomCp2 = points.bottom.shift(0, points.bottom.dx(points.right) / 2) @@ -78,268 +78,267 @@ points.bottom = new Point(0, (tweak \* measurements.head) / 12) delta = paths.neck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 + } while (Math.abs(delta) > 1) -} while (Math.abs(delta) > 1) + points.rightCp2 = points.rightCp1.flipY() + points.bottomCp1 = points.bottomCp2.flipX() -points.rightCp2 = points.rightCp1.flipY() -points.bottomCp1 = points.bottomCp2.flipX() + points.left = points.right.flipX() + points.leftCp1 = points.rightCp2.flipX() + points.leftCp2 = points.rightCp1.flipX() -points.left = points.right.flipX() -points.leftCp1 = points.rightCp2.flipX() -points.leftCp2 = points.rightCp1.flipX() + points.top = points.bottom.flipY() + points.topCp1 = points.bottomCp2.flipY() + points.topCp2 = points.bottomCp1.flipY() -points.top = points.bottom.flipY() -points.topCp1 = points.bottomCp2.flipY() -points.topCp2 = points.bottomCp1.flipY() + /* + * Construct the outline + */ + let width = measurements.head * options.widthRatio + let length = measurements.head * options.lengthRatio -/\* -_ Construct the outline -_/ -let width = measurements.head _ options.widthRatio -let length = measurements.head _ options.lengthRatio + points.topLeft = new Point(width / -2, points.top.y - (width / 2 - points.right.x)) + points.topRight = points.topLeft.shift(0, width) + points.bottomLeft = points.topLeft.shift(-90, length) + points.bottomRight = points.topRight.shift(-90, length) -points.topLeft = new Point(width / -2, points.top.y - (width / 2 - points.right.x)) -points.topRight = points.topLeft.shift(0, width) -points.bottomLeft = points.topLeft.shift(-90, length) -points.bottomRight = points.topRight.shift(-90, length) + points.edgeLeft = new Point(points.topLeft.x, points.left.y) + points.edgeRight = new Point(points.topRight.x, points.right.y) + points.edgeTop = new Point(0, points.topLeft.y) -points.edgeLeft = new Point(points.topLeft.x, points.left.y) -points.edgeRight = new Point(points.topRight.x, points.right.y) -points.edgeTop = new Point(0, points.topLeft.y) + points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) + points.edgeRightCp = points.edgeLeftCp.flipX() + points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(points.topLeft, 0.5) + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5) -points.edgeRightCp = points.edgeLeftCp.flipX() -points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(points.topLeft, 0.5) -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + /* + * Round the end of the straps + */ + let strap = points.edgeTop.dy(points.top) -/\* -_ Round the end of the straps -_/ -let strap = points.edgeTop.dy(points.top) + points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) + points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) + points.tipRightBottom = new Point(points.tipRight.x, points.top.y) -points.tipRight = points.edgeTop.translate(strap / 2, strap / 2) -points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y) -points.tipRightBottom = new Point(points.tipRight.x, points.top.y) + /* + * Macros will return the auto-generated IDs + */ + const ids1 = { + tipRightTop: macro('round', { + id: 'tipRightTop', + from: points.edgeTop, + to: points.tipRight, + via: points.tipRightTop, + }), + tipRightBottom: macro('round', { + id: 'tipRightBottom', + from: points.tipRight, + to: points.top, + via: points.tipRightBottom, + }), + } -/\* -_ Macros will return the auto-generated IDs -_/ -const ids1 = { -tipRightTop: macro('round', { -id: 'tipRightTop', -from: points.edgeTop, -to: points.tipRight, -via: points.tipRightTop, -}), -tipRightBottom: macro('round', { -id: 'tipRightBottom', -from: points.tipRight, -to: points.top, -via: points.tipRightBottom, -}), + /* + * Create points from them with easy names + */ + for (const side in ids1) { + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() + } + } + + /* + * Rotate straps so they don't overlap + */ + let rotateThese = [ + 'edgeTopLeftCp', + 'edgeTop', + 'tipRight', + 'tipRightTop', + 'tipRightTopStart', + 'tipRightTopCp1', + 'tipRightTopCp2', + 'tipRightTopEnd', + 'tipRightBottomStart', + 'tipRightBottomCp1', + 'tipRightBottomCp2', + 'tipRightBottomEnd', + 'tipRightBottom', + 'top', + 'topCp2', + ] + + while (points.tipRightBottomStart.x > -1) { + for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) + } + + /* + * Add points to anchor snaps on + */ + points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) + + /* + * Mirror points to the other side + */ + points.edgeTopRightCp = points.edgeTopLeftCp.flipX() + points.topCp1 = points.topCp2.flipX() + points.tipLeftTopStart = points.tipRightTopStart.flipX() + points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() + points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() + points.tipLeftTopEnd = points.tipRightTopEnd.flipX() + points.tipLeftBottomStart = points.tipRightBottomStart.flipX() + points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() + points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() + points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() + points.snapRight = points.snapLeft.flipX() + + /* + * Round the bottom of the bib + * Radius is fixed, but you could use an option for it) + * + * Macros will return the auto-generated IDs + */ + const ids2 = { + bottomLeft: macro('round', { + id: 'bottomLeft', + from: points.topLeft, + to: points.bottomRight, + via: points.bottomLeft, + radius: points.bottomRight.x / 4, + }), + bottomRight: macro('round', { + id: 'bottomRight', + from: points.bottomLeft, + to: points.topRight, + via: points.bottomRight, + radius: points.bottomRight.x / 4, + }), + } + /* + * Create points from them with easy names + */ + for (const side in ids2) { + for (const id of ['start', 'cp1', 'cp2', 'end']) { + points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() + } + } + + /* + * Construct the path + */ + paths.seam = new Path() + .move(points.edgeLeft) + .line(points.bottomLeftStart) + .curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) + .line(points.bottomRightStart) + .curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) + .line(points.edgeRight) + .curve(points.edgeRightCp, points.edgeTopRightCp, points.tipLeftTopStart) + .curve(points.tipLeftTopCp1, points.tipLeftTopCp2, points.tipLeftTopEnd) + .curve(points.tipLeftBottomCp1, points.tipLeftBottomCp2, points.tipLeftBottomEnd) + .curve(points.topCp1, points.rightCp2, points.right) + .curve(points.rightCp1, points.bottomCp2, points.bottom) + .curve(points.bottomCp1, points.leftCp2, points.left) + .curve(points.leftCp1, points.topCp2, points.tipRightBottomEnd) + .curve(points.tipRightBottomCp2, points.tipRightBottomCp1, points.tipRightBottomStart) + .curve(points.tipRightTopCp2, points.tipRightTopCp1, points.tipRightTopStart) + .curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) + .close() + .attr('class', 'fabric') + + /* + * + * Annotations + * + */ + + /* + * Cut list + */ + store.cutlist.addCut({ cut: 1, from: 'fabric' }) + + /* + * Add the snaps + */ + snippets.snapStud = new Snippet('snap-stud', points.snapLeft) + snippets.snapSocket = new Snippet('snap-socket', points.snapRight).attr('opacity', 0.5) + + /* + * Add the bias tape + */ + if (complete) + paths.bias = paths.seam + .offset(-5) + .addClass('note dashed') + .addText('fronscratch:finishWithBiasTape', 'center fill-note') + + /* + * Add the title + */ + points.title = points.bottom.shift(-90, 45) + macro('title', { + at: points.title, + nr: 1, + title: 'bib', + align: 'center', + scale: 0.8, + }) + + /* + * Add the scalebox + */ + points.scalebox = points.title.shift(-90, 65) + macro('scalebox', { at: points.scalebox }) + + /* + * Add the logo + */ + points.logo = new Point(0, 0) + snippets.logo = new Snippet('logo', points.logo) + + // highlight-start + /* + * Add dimensions + */ + macro('hd', { + id: 'wFull', + from: points.bottomLeftStart, + to: points.bottomRightEnd, + y: points.bottomLeft.y + 15, + }) + macro('vd', { + id: 'hBottomToOpeningBottom', + from: points.bottomRightStart, + to: points.bottom, + x: points.bottomRight.x + 15, + }) + macro('vd', { + id: 'hBottomToOpeningCenter', + from: points.bottomRightStart, + to: points.right, + x: points.bottomRight.x + 30, + }) + macro('vd', { + id: 'hTotal', + from: points.bottomRightStart, + to: points.tipLeftTopStart, + x: points.bottomRight.x + 45, + }) + macro('hd', { + id: 'wOpening', + from: points.left, + to: points.right, + y: points.left.y + 25, + }) + macro('ld', { + id: 'wStrap', + from: points.tipLeftBottomEnd, + to: points.tipLeftTopStart, + d: -15, + }) + // highlight-end + + return part } - -/\* -_ Create points from them with easy names -_/ -for (const side in ids1) { -for (const id of ['start', 'cp1', 'cp2', 'end']) { -points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy() -} -} - -/\* -_ Rotate straps so they don't overlap -_/ -let rotateThese = [ -'edgeTopLeftCp', -'edgeTop', -'tipRight', -'tipRightTop', -'tipRightTopStart', -'tipRightTopCp1', -'tipRightTopCp2', -'tipRightTopEnd', -'tipRightBottomStart', -'tipRightBottomCp1', -'tipRightBottomCp2', -'tipRightBottomEnd', -'tipRightBottom', -'top', -'topCp2', -] - -while (points.tipRightBottomStart.x > -1) { -for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) -} - -/\* -_ Add points to anchor snaps on -_/ -points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) - -/\* -_ Mirror points to the other side -_/ -points.edgeTopRightCp = points.edgeTopLeftCp.flipX() -points.topCp1 = points.topCp2.flipX() -points.tipLeftTopStart = points.tipRightTopStart.flipX() -points.tipLeftTopCp1 = points.tipRightTopCp1.flipX() -points.tipLeftTopCp2 = points.tipRightTopCp2.flipX() -points.tipLeftTopEnd = points.tipRightTopEnd.flipX() -points.tipLeftBottomStart = points.tipRightBottomStart.flipX() -points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX() -points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX() -points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX() -points.snapRight = points.snapLeft.flipX() - -/\* -_ Round the bottom of the bib -_ Radius is fixed, but you could use an option for it) \* -_ Macros will return the auto-generated IDs -_/ -const ids2 = { -bottomLeft: macro('round', { -id: 'bottomLeft', -from: points.topLeft, -to: points.bottomRight, -via: points.bottomLeft, -radius: points.bottomRight.x / 4, -}), -bottomRight: macro('round', { -id: 'bottomRight', -from: points.bottomLeft, -to: points.topRight, -via: points.bottomRight, -radius: points.bottomRight.x / 4, -}), -} -/\* -_ Create points from them with easy names -_/ -for (const side in ids2) { -for (const id of ['start', 'cp1', 'cp2', 'end']) { -points[`${side}${utils.capitalize(id)}`] = points[ids2[side].points[id]].copy() -} -} - -/\* -_ Construct the path -_/ -paths.seam = new Path() -.move(points.edgeLeft) -.line(points.bottomLeftStart) -.curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd) -.line(points.bottomRightStart) -.curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) -.line(points.edgeRight) -.curve(points.edgeRightCp, points.edgeTopRightCp, points.tipLeftTopStart) -.curve(points.tipLeftTopCp1, points.tipLeftTopCp2, points.tipLeftTopEnd) -.curve(points.tipLeftBottomCp1, points.tipLeftBottomCp2, points.tipLeftBottomEnd) -.curve(points.topCp1, points.rightCp2, points.right) -.curve(points.rightCp1, points.bottomCp2, points.bottom) -.curve(points.bottomCp1, points.leftCp2, points.left) -.curve(points.leftCp1, points.topCp2, points.tipRightBottomEnd) -.curve(points.tipRightBottomCp2, points.tipRightBottomCp1, points.tipRightBottomStart) -.curve(points.tipRightTopCp2, points.tipRightTopCp1, points.tipRightTopStart) -.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft) -.close() -.attr('class', 'fabric') - -/\* \* -_ Annotations -_ -\*/ - -/\* -_ Cut list -_/ -store.cutlist.addCut({ cut: 1, from: 'fabric' }) - -/\* -_ Add the snaps -_/ -snippets.snapStud = new Snippet('snap-stud', points.snapLeft) -snippets.snapSocket = new Snippet('snap-socket', points.snapRight).attr('opacity', 0.5) - -/\* -_ Add the bias tape -_/ -if (complete) -paths.bias = paths.seam -.offset(-5) -.addClass('note dashed') -.addText('fronscratch:finishWithBiasTape', 'center fill-note') - -/\* -_ Add the title -_/ -points.title = points.bottom.shift(-90, 45) -macro('title', { -at: points.title, -nr: 1, -title: 'bib', -align: 'center', -scale: 0.8, -}) - -/\* -_ Add the scalebox -_/ -points.scalebox = points.title.shift(-90, 65) -macro('scalebox', { at: points.scalebox }) - -/\* -_ Add the logo -_/ -points.logo = new Point(0, 0) -snippets.logo = new Snippet('logo', points.logo) - -// highlight-start -/\* -_ Add dimensions -_/ -macro('hd', { -id: 'wFull', -from: points.bottomLeftStart, -to: points.bottomRightEnd, -y: points.bottomLeft.y + 15, -}) -macro('vd', { -id: 'hBottomToOpeningBottom', -from: points.bottomRightStart, -to: points.bottom, -x: points.bottomRight.x + 15, -}) -macro('vd', { -id: 'hBottomToOpeningCenter', -from: points.bottomRightStart, -to: points.right, -x: points.bottomRight.x + 30, -}) -macro('vd', { -id: 'hTotal', -from: points.bottomRightStart, -to: points.tipLeftTopStart, -x: points.bottomRight.x + 45, -}) -macro('hd', { -id: 'wOpening', -from: points.left, -to: points.right, -y: points.left.y + 25, -}) -macro('ld', { -id: 'wStrap', -from: points.tipLeftBottomEnd, -to: points.tipLeftTopStart, -d: -15, -}) -// highlight-end - -return part -} - ``` -``` diff --git a/sites/dev/docs/tutorials/pattern-design/part3/sa/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part3/sa/readme.mdx index 0ee0b438311..9dca120f1de 100644 --- a/sites/dev/docs/tutorials/pattern-design/part3/sa/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part3/sa/readme.mdx @@ -24,30 +24,29 @@ function draftBib({ part, }) { -points.topLeft = new Point(0,0) -points.bottomRight = new Point(100,40) -points.topRight = new Point(points.bottomRight.x, points.topLeft.y) -points.bottomLeft = new Point(points.topLeft.x, points.bottomRight.y) -points.cp1 = new Point(50, 20) -points.cp2 = new Point(70, 60) + points.topLeft = new Point(0,0) + points.bottomRight = new Point(100,40) + points.topRight = new Point(points.bottomRight.x, points.topLeft.y) + points.bottomLeft = new Point(points.topLeft.x, points.bottomRight.y) + points.cp1 = new Point(50, 20) + points.cp2 = new Point(70, 60) -paths.shape = new Path() -.move(points.topLeft) -.line(points.bottomLeft) -.curve(points.cp1, points.cp2, points.bottomRight) -.line(points.topRight) -.line(points.topLeft) -.close() -.addClass('fabric') + paths.shape = new Path() + .move(points.topLeft) + .line(points.bottomLeft) + .curve(points.cp1, points.cp2, points.bottomRight) + .line(points.topRight) + .line(points.topLeft) + .close() + .addClass('fabric') -// highlight-start -if (sa) paths.sa = paths.shape.offset(sa).addClass('fabric sa') -// highlight-end + // highlight-start + if (sa) paths.sa = paths.shape.offset(sa).addClass('fabric sa') + // highlight-end -return part + return part } - -```` +``` As you can see from the source, we can destructure an `sa` variable (short for @@ -64,7 +63,7 @@ seam allowance: if (sa) paths.sa = paths.shape .offset(sa) .addClass('fabric sa') -```` +``` To refer back to our three question: Whether the user wants seam allowance, and if so how much seam allowance is answered by the `sa` value passed to our draft