diff --git a/markdown/dev/tutorials/pattern-design/adding-measurements/en.md b/markdown/dev/tutorials/pattern-design/adding-measurements/en.md index 05d07d1dba1..25a1493d6c0 100644 --- a/markdown/dev/tutorials/pattern-design/adding-measurements/en.md +++ b/markdown/dev/tutorials/pattern-design/adding-measurements/en.md @@ -8,8 +8,8 @@ we are going to draft our pattern according to the measurements provided to us. Which begs the question, which measurements? -It is you, as the pattern designer, who decides which measurements are used -to draft your pattern. For our bib, the only measurement we need is the +It is we, as the pattern designers, who decides which measurements are used +to draft our pattern. For our bib, the only measurement we need is the _head circumference_. So let's add it as a required measurement. @@ -21,7 +21,7 @@ In our `bib.mjs` file, on the `bib` object, we'll add a new key called for this part. We are going to use *the official name* of the measurement. For head -circumference, that name is `head`. +circumference, that name is `head`. ```design/src/bib.mjs function draftBib({ part }) { @@ -40,22 +40,22 @@ export const bib = { Now everybody knows this part requires the `head` measurement. -This change will also get picked up by the development environment, and you'll now see this screen: +This change will also get picked up by the development environment, and we'll now see this screen: -![This screen tells you that you are missing some required measurements](./required-measurements.png) +![This screen tells us that we are missing some required measurements](./required-measurements.png) Since it's just one measurement, let's simply enter a value by hand. For example `38` as 38 cm is a realistic head circumference measurement for a baby. Enter `38` in the box, and click on **Draft Design** in the sidebar under the **View** heading. -This brings you back to our work in progress: +This brings us back to our work in progress: ## Notes ### Why using standard measurements names matters -In principle, you can use any name you want for your measurements. +In principle, we can use any name we want for our measurements. Our core library really doesn't care. However, if everybody uses their own (names for) measurements, then people @@ -67,5 +67,3 @@ invent your own. See our [best practices](/guides/best-practices/reuse-measurements) on this topic for details. - - diff --git a/markdown/dev/tutorials/pattern-design/adding-options/en.md b/markdown/dev/tutorials/pattern-design/adding-options/en.md index 81d39479307..b7f95d740da 100644 --- a/markdown/dev/tutorials/pattern-design/adding-options/en.md +++ b/markdown/dev/tutorials/pattern-design/adding-options/en.md @@ -3,17 +3,17 @@ title: Adding options order: 140 --- -You know what your bib should look like, and you have the _head_ measurement -to work with. But there's still a number of choices you have to make: +We know what our bib should look like, and we have the _head_ measurement +to work with. But there's still a number of choices we have to make: - How large should the neck opening be? - How wide should the bib be? - How long should the bib be? -You can make all of these choices for the user and set them in stone, so to speak. +We can make all of these choices for the user and set them in stone, so to speak. -But since you're designing a pattern in code, it's trivial to make your pattern -flexible and let the user decide. All you have to do is add options to your part. +But since we're designing a pattern in code, it's trivial to make our pattern +flexible and let the user decide. All we have to do is add options to our part. ## Add the neckRatio option @@ -34,7 +34,7 @@ export const bib = { measurements: ['head'], // highlight-start options: { - neckRatio: { pct: 80, min: 70, max: 90, menu: 'fit' }, + neckRatio: { pct: 80, min: 70, max: 90, menu: 'fit' }, }, // highlight-end } @@ -61,24 +61,24 @@ Let's do something similar for the width and length of our bib: ```design/src/bib.mjs options: { - neckRatio: { pct: 80, min: 70, max: 90, menu: 'fit' }, - widthRatio: { pct: 45, min: 35, max: 55, menu: 'style' }, - lengthRatio: { pct: 75, min: 55, max: 85, menu: 'style' }, + neckRatio: { pct: 80, min: 70, max: 90, menu: 'fit' }, + widthRatio: { pct: 45, min: 35, max: 55, menu: 'style' }, + lengthRatio: { pct: 75, min: 55, max: 85, menu: 'style' }, } ``` -- You've added `widthRatio` and `lengthRatio` options -- You've given all options sensible defaults -- You've given all options sensible maximum and minimum boundaries -- You've added these two new options to the *style* menu +- We've added `widthRatio` and `lengthRatio` options +- We've given all options sensible defaults +- We've given all options sensible maximum and minimum boundaries +- We've added these two new options to the *style* menu -Later, you'll test-drive your pattern to see how it behaves when you adapt the options -between their minimum and maximum values. At that time, you can still tweak these values. +Later, we'll test-drive our pattern to see how it behaves when we adapt the options +between their minimum and maximum values. At that time, we can still tweak these values. With that out of the way, let's start drawing our bib. ## Notes -The `menu` key on an option does not do anything for your pattern as such. +The `menu` key on an option does not do anything for our pattern as such. Instead it signals to the frontend that this is how options should be grouped together and presented to the user. diff --git a/markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md b/markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md index cbee2c52257..b1762043339 100644 --- a/markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md +++ b/markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md @@ -8,18 +8,18 @@ Which is a big no-no in sewing patterns, so we're going to have to address that. Specifically, we're going to rotate our strap out of the way until it no longer overlaps. -The rest of your bib should stay as it is, so let's start by making a list of points we need +The rest of our bib should stay as it is, so let's start by making a list of points we need to rotate. Once we have our list of points to rotate, we can rotate them. How far? Until the strap no longer overlaps. ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, macro, @@ -33,15 +33,15 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) .hide() // Add this line - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -66,10 +66,10 @@ function draftBib({ .close() .addClass('fabric') - // Drawing the bib outline + // 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) @@ -77,7 +77,7 @@ function draftBib({ 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) @@ -91,7 +91,7 @@ function draftBib({ 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( @@ -99,14 +99,14 @@ function draftBib({ 0.5 ) points.edgeTopRightCp = points.edgeTopLeftCp.flipX() - + // 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) - + macro("round", { from: points.edgeTop, to: points.tipRight, @@ -145,12 +145,12 @@ function draftBib({ "topCp2" ] /* - * We're rotating all the points in - * the `rotateThese` array around + * 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 + * 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) { @@ -184,7 +184,7 @@ function draftBib({ // highlight-start /* - * Always draw your path at the end + * Always draw your path at the end * after you've manipulated your points */ paths.rect = new Path() @@ -197,9 +197,6 @@ function draftBib({ .close() // highlight-end - - - return part } ``` diff --git a/markdown/dev/tutorials/pattern-design/completing-our-pattern/en.md b/markdown/dev/tutorials/pattern-design/completing-our-pattern/en.md index 952de375d4a..d1e9daa01b2 100644 --- a/markdown/dev/tutorials/pattern-design/completing-our-pattern/en.md +++ b/markdown/dev/tutorials/pattern-design/completing-our-pattern/en.md @@ -13,21 +13,21 @@ typically only want to have the pattern outline. ## The complete setting Users can indicate their desire to have either a bare-bones pattern, or rather -when that's completed with all bells and whistles with [the +when that's completed with all bells and whistles with [the `complete` setting](/reference/settings/complete). -To make sure we respect the user's choice, we must wrap all of these +To make sure we respect the user's choice, we must wrap all of these embellishments in a code block that only executes when the `complete` setting is *truthy*. To access the setting, we can destructure it: ```mjs -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, macro, @@ -36,7 +36,7 @@ function draftBib({ // highlight-end part, }) { - + // Our earlier work is not shown for brevety // highlight-start @@ -51,7 +51,7 @@ function draftBib({ ## Adding snippets -Snippets are little re-useable things to embellish your pattern with. +Snippets are little re-useable things to embellish our pattern with. Things like buttons or buttonholes, a logo, or snaps. To use them, much like points and paths, we need to destructure both @@ -59,11 +59,11 @@ the `Snippet` constructor as well as the `snippets` object to hold our snippets: ```mjs -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, macro, @@ -74,7 +74,7 @@ function draftBib({ // highlight-end part, }) { - + // Our earlier work is not shown for brevety if (complete) { @@ -96,15 +96,13 @@ You can find all possible snippets in [our documentation](/reference/api/snippet Let's put this and few other things together to complete our design: - - ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, macro, @@ -123,15 +121,15 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) .hide() // Add this line - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -147,10 +145,10 @@ function draftBib({ points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() - // Drawing the bib outline + // 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) @@ -158,12 +156,12 @@ function draftBib({ points.topRight = points.topLeft.shift(0, width) points.bottomLeft = points.topLeft.shift(-90, length) points.bottomRight = points.topRight.shift(-90, length) - + // 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( @@ -171,14 +169,14 @@ function draftBib({ 0.5 ) points.edgeTopRightCp = points.edgeTopLeftCp.flipX() - + // 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) - + macro("round", { from: points.edgeTop, to: points.tipRight, @@ -211,7 +209,7 @@ function draftBib({ while (points.tipRightBottomStart.x > -1) { for (const p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) } - + // Snap anchor points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) @@ -253,13 +251,13 @@ function draftBib({ .curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) .line(points.edgeRight) .curve( - points.edgeRightCp, - points.edgeTopRightCp, + points.edgeRightCp, + points.edgeTopRightCp, points.tipLeftTopStart ) .curve( - points.tipLeftTopCp1, - points.tipLeftTopCp2, + points.tipLeftTopCp1, + points.tipLeftTopCp2, points.tipLeftTopEnd ) .curve( @@ -268,23 +266,23 @@ function draftBib({ points.tipLeftBottomEnd ) .curve( - points.topCp1, - points.rightCp2, + points.topCp1, + points.rightCp2, points.right ) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .curve( - points.bottomCp1, - points.leftCp2, + points.bottomCp1, + points.leftCp2, points.left ) .curve( - points.leftCp1, - points.topCp2, + points.leftCp1, + points.topCp2, points.tipRightBottomEnd ) .curve( @@ -298,8 +296,8 @@ function draftBib({ points.tipRightTopStart ) .curve( - points.edgeTopLeftCp, - points.edgeLeftCp, + points.edgeTopLeftCp, + points.edgeLeftCp, points.edgeLeft ) .close() @@ -308,7 +306,7 @@ function draftBib({ // highlight-start if (complete) { /* - * Let's add the points where + * Let's add the points where * the closure's snaps should go. */ // Add snaps @@ -323,7 +321,7 @@ function draftBib({ * First the left snap (the stud part) */ snippets.snapStud = new Snippet( - 'snap-stud', + 'snap-stud', points.snapLeft ) @@ -335,7 +333,7 @@ function draftBib({ * this way it will be semi-transparent. */ snippets.snapSocket = new Snippet( - 'snap-socket', + 'snap-socket', points.snapRight ).attr('opacity', 0.5) @@ -346,7 +344,7 @@ function draftBib({ // Add a logo points.logo = new Point(0, 0) snippets.logo = new Snippet( - "logo", + "logo", points.logo ) @@ -371,7 +369,7 @@ function draftBib({ points.scalebox = points.title .shift(-90, 55) macro( - "scalebox", + "scalebox", { at: points.scalebox } ) @@ -386,7 +384,7 @@ function draftBib({ .offset(-5) .addClass("various dashed") .addText( - "finishWithBiasTape", + "finishWithBiasTape", "center fill-various" ) diff --git a/markdown/dev/tutorials/pattern-design/completing-the-neck-opening/en.md b/markdown/dev/tutorials/pattern-design/completing-the-neck-opening/en.md index e2f53d72011..5b4aabc9270 100644 --- a/markdown/dev/tutorials/pattern-design/completing-the-neck-opening/en.md +++ b/markdown/dev/tutorials/pattern-design/completing-the-neck-opening/en.md @@ -15,11 +15,11 @@ To accomplish this, we'll call the `hide()` method on our path: ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, part, @@ -32,17 +32,17 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) // highlight-start .hide() // highlight-end - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -61,19 +61,19 @@ But it won't show up on screen or on the page. Now that we've hidden our homework, let's create the complete neck path. As the neck opening is symmetrical, there's no need to re-calculate the points -on the other side. You can just flip them over, so to speak. And that's exactly -what you'll do. +on the other side. We can just flip them over, so to speak. And that's exactly +what we'll do. Let's add some more points, and then construct the complete path for the neck opening. ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, part, @@ -86,15 +86,15 @@ function draftBib({ 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) - + 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 @@ -130,6 +130,6 @@ To add the points, we're using the `Point.flipX()` and `Point.flipY()` methods here. There's a few new Path methods to, like `close()` and `addClass()`. Perhaps you can figure out what they do? If not, both [the Point -documentation](/reference/api/point/) and [the Path +documentation](/reference/api/point/) and [the Path documentation](/reference/api/path) have detailed info on all the methods available, including these. diff --git a/markdown/dev/tutorials/pattern-design/conclusion/en.md b/markdown/dev/tutorials/pattern-design/conclusion/en.md index 50e52746880..f996377551d 100644 --- a/markdown/dev/tutorials/pattern-design/conclusion/en.md +++ b/markdown/dev/tutorials/pattern-design/conclusion/en.md @@ -3,11 +3,11 @@ title: Conclusion order: 280 --- -Congratulations, you have created your first pattern. And while it's arguably +Congratulations, we have created our first pattern. And while it's arguably rather simple, we have learned a bunch of things along the way. Let's list some of the things we've learned: -- We learned how to [setup your development environment][new-design] with `npx +- We learned how to [setup our development environment][new-design] with `npx @freesewing/new-design` - We learned about [the different files and folders][structure] in the development environment and how `design/src` holds our source code. @@ -17,7 +17,7 @@ some of the things we've learned: - We learned about [a part's draft method][draft-method] and how to destructure what we need to design our part. - We learned [how to add points and draw paths][constructing-the-neck-opening] -- We learned how you can make changes in a loop to [adapt the neck +- We learned how we can make changes in a loop to [adapt the neck opening][fitting-the-neck-opening] or [rotate the straps][avoiding-overlap] until they were just right - We learned about [macros and how to use them][creating-the-closure] @@ -26,7 +26,7 @@ some of the things we've learned: - We learned about what it means to draft [a complete pattern][completing-our-pattern] - We learned about [snippets and how to add them][completing-our-pattern] -- We learned [how to offset a path][completing-your-pattern] to create seam +- We learned [how to offset a path][completing-our-pattern] to create seam allowance, or in our case, mark the bias tape line - We learned how to support a [paperless pattern][paperless] by adding dimensions diff --git a/markdown/dev/tutorials/pattern-design/constructing-the-neck-opening/en.md b/markdown/dev/tutorials/pattern-design/constructing-the-neck-opening/en.md index fb6a9094558..7ac5218b3a4 100644 --- a/markdown/dev/tutorials/pattern-design/constructing-the-neck-opening/en.md +++ b/markdown/dev/tutorials/pattern-design/constructing-the-neck-opening/en.md @@ -16,11 +16,11 @@ access to our measurements and options to do so. For this, we first destructure `measurements` and `options` so we can access them: ```design/src/bib.mjs -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, // highlight-start measurements, options @@ -40,11 +40,11 @@ Let's add some points, and use them to draw our first curve: ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, part, @@ -54,12 +54,12 @@ function draftBib({ // Construct the quarter neck opening points.right = new Point(measurements.head / 10, 0) points.bottom = new Point(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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) @@ -70,7 +70,7 @@ function draftBib({ ``` -You've added some points to your part, and drawn your first path. +We've added some points to our part, and drawn our first path. Let's look at each line in detail. ## Adding points @@ -98,10 +98,10 @@ points.rightCp1 = points.right - Instead of using the Point constructor, we're calling the `Point.shift()` method on an existing point - It takes two arguments: The angle to shift towards, and the distance -- You can see that we're shifting 90 degrees (that means up) but the distance +- We can see that we're shifting 90 degrees (that means up) but the distance uses another method - The `Point.dy()` method returns the delta along the Y axis between the point - you call it on and the point you pass it + we call it on and the point we pass it - We shift half of the Y-delta The next point is very similar again, except that this time we're shifting to diff --git a/markdown/dev/tutorials/pattern-design/creating-the-closure/en.md b/markdown/dev/tutorials/pattern-design/creating-the-closure/en.md index 33a1d6f8a39..72e6ae8a3cd 100644 --- a/markdown/dev/tutorials/pattern-design/creating-the-closure/en.md +++ b/markdown/dev/tutorials/pattern-design/creating-the-closure/en.md @@ -4,7 +4,7 @@ order: 210 --- Things are starting to look good, but we can't fit the bib over the baby's head like this. -So we must create a closure. We'll let the straps overlap at the end, and put in a snap +So we must create a closure. We'll let the straps overlap at the end, and put in a snap later. ## Using macros @@ -13,14 +13,14 @@ To round the straps, we'll use something new: **a macro**. To use macros, we need the `macro` method, which we can destructure to get access to it. Macros are little helpers that automate things that would otherwise get rather -tedious. There are macros to add titles to your pattern, or grainline +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. 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 -you'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 @@ -28,11 +28,11 @@ points to the other side. ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, // highlight-start @@ -48,15 +48,15 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) .hide() // Add this line - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -81,10 +81,10 @@ function draftBib({ .close() .addClass('fabric') - // Drawing the bib outline + // 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) @@ -92,7 +92,7 @@ function draftBib({ 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) @@ -106,7 +106,7 @@ function draftBib({ 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( @@ -114,7 +114,7 @@ function draftBib({ 0.5 ) points.edgeTopRightCp = points.edgeTopLeftCp.flipX() - + // Now, adapt our `rect` path so it's no longer a rectangle: paths.rect = new Path() .move(points.edgeTop) @@ -128,11 +128,11 @@ function draftBib({ // 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) - + macro("round", { from: points.edgeTop, to: points.tipRight, @@ -149,7 +149,6 @@ function draftBib({ }) // highlight-end - return part } ``` diff --git a/markdown/dev/tutorials/pattern-design/draft-method/en.md b/markdown/dev/tutorials/pattern-design/draft-method/en.md index fbeee11ee38..28226bdf146 100644 --- a/markdown/dev/tutorials/pattern-design/draft-method/en.md +++ b/markdown/dev/tutorials/pattern-design/draft-method/en.md @@ -23,8 +23,8 @@ If you're not familiar with the `({ part })` syntax you see above, this is a technique called *parameter destructuring* or more generally, [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) -The draft method receives only 1 parameter: An object that holds everything you -need to draft your method. Destructuring is a way to *pull things out of the +The draft method receives only 1 parameter: An object that holds everything we +need to draft our method. Destructuring is a way to *pull things out of the object into their own variable*. It saves us a bunch of typing as these two are equivalent: @@ -63,12 +63,12 @@ If you're new to JavaScript, and don't intuitively _get this_, stick with it. It Change the function to look like this: ```design/src/bib.mjs -function draftBib({ +function draftBib({ // highlight-start - Path, - Point, - paths, - points, + Path, + Point, + paths, + points, // highlight-end part, }) { @@ -84,11 +84,11 @@ For a complete list of what you can access via destructuring like this, refer to [the draft method reference documentation](/reference/api/part/draft). Here's a brief summary of the things we've added above: -- `Path`: The Path constructor, allows you to create new Paths -- `Point`: The Point constructor, allows you to create new Points +- `Path`: The Path constructor, allows us to create new Paths +- `Point`: The Point constructor, allows us to create new Points - `points`: A container object to hold the part's points - `paths`: A container object to hold the part's paths -Long story short: These will make it possible for you to draw points and paths easily. +Long story short: These will make it possible for us to draw points and paths easily. So let's go ahead and do that. diff --git a/markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/en.md b/markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/en.md index 46627fe0db8..c8c78fa2185 100644 --- a/markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/en.md +++ b/markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/en.md @@ -7,11 +7,11 @@ With our neck opening in place, let us draw the basic outline of our bib. ```design/src/bib.mjs -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, part, @@ -24,15 +24,15 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) .hide() // Add this line - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -58,10 +58,10 @@ function draftBib({ .addClass('fabric') // highlight-start - // Drawing the bib outline + // 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) @@ -69,7 +69,7 @@ function draftBib({ 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) @@ -93,9 +93,9 @@ const width = measurements.head * options.widthRatio const length = measurements.head * options.lengthRatio ``` -Both the length and width of your bib are a factor of the head circumference. -This way, your bib size will adapt to the size of the baby, and the user can tweak -the length and width by playing with the options you added to the pattern. +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 +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`. diff --git a/markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md b/markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md index e88b1b2a91b..701d02374a7 100644 --- a/markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md +++ b/markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md @@ -16,11 +16,11 @@ it's `hidden: false` property. ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, macro, @@ -34,15 +34,15 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) .hide() // Add this line - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -71,10 +71,10 @@ function draftBib({ */ // strikeout-end - // Drawing the bib outline + // 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) @@ -82,7 +82,7 @@ function draftBib({ 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 paths.rect = new Path() @@ -93,14 +93,14 @@ function draftBib({ .line(points.topLeft) .close() .addClass('fabric') - */ + */ // strikeout-end // 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( @@ -108,14 +108,14 @@ function draftBib({ 0.5 ) points.edgeTopRightCp = points.edgeTopLeftCp.flipX() - + // 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) - + macro("round", { from: points.edgeTop, to: points.tipRight, @@ -162,7 +162,7 @@ function draftBib({ 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", { @@ -213,13 +213,13 @@ function draftBib({ .line(points.bottomRight) .line(points.edgeRight) .curve( - points.edgeRightCp, - points.edgeTopRightCp, + points.edgeRightCp, + points.edgeTopRightCp, points.tipLeftTopStart ) .curve( - points.tipLeftTopCp1, - points.tipLeftTopCp2, + points.tipLeftTopCp1, + points.tipLeftTopCp2, points.tipLeftTopEnd ) .curve( @@ -228,23 +228,23 @@ function draftBib({ points.tipLeftBottomEnd ) .curve( - points.topCp1, - points.rightCp2, + points.topCp1, + points.rightCp2, points.right ) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .curve( - points.bottomCp1, - points.leftCp2, + points.bottomCp1, + points.leftCp2, points.left ) .curve( - points.leftCp1, - points.topCp2, + points.leftCp1, + points.topCp2, points.tipRightBottomEnd ) .curve( @@ -258,8 +258,8 @@ function draftBib({ points.tipRightTopStart ) .curve( - points.edgeTopLeftCp, - points.edgeLeftCp, + points.edgeTopLeftCp, + points.edgeLeftCp, points.edgeLeft ) .close() diff --git a/markdown/dev/tutorials/pattern-design/en.md b/markdown/dev/tutorials/pattern-design/en.md index 75cacf33dd9..38408869c31 100644 --- a/markdown/dev/tutorials/pattern-design/en.md +++ b/markdown/dev/tutorials/pattern-design/en.md @@ -2,31 +2,31 @@ title: Pattern design tutorial --- -Welcome to the FreeSewing pattern design tutorial, where you'll learn how to +Welcome to the FreeSewing pattern design tutorial, where we'll learn how to design a made-to-measure sewing pattern, start to finish. ##### Before you start -If you haven't done so yet, read the [Before you start -guide](/guides/prerequisites). It's very short, but covers some basic +If you haven't done so yet, read the [Before you start +guide](/guides/prerequisites). It's very short, but covers some basic terminology and concepts that we'll use throughout this guide. -You will be designing a pattern for a baby bib. It's a very simple pattern, but -that's the point. Your focus today is on learning FreeSewing and how to -translate your designs into code. +We will be designing a pattern for a baby bib. It's a very simple pattern, but +that's the point. Our focus today is on learning FreeSewing and how to +translate our designs into code. -At the end of this tutorial, you will have created this pattern: +At the end of this tutorial, we will have created this pattern: ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, macro, @@ -43,15 +43,15 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) .hide() // Add this line - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -67,10 +67,10 @@ function draftBib({ points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() - // Drawing the bib outline + // 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) @@ -78,12 +78,12 @@ function draftBib({ points.topRight = points.topLeft.shift(0, width) points.bottomLeft = points.topLeft.shift(-90, length) points.bottomRight = points.topRight.shift(-90, length) - + // 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( @@ -91,14 +91,14 @@ function draftBib({ 0.5 ) points.edgeTopRightCp = points.edgeTopLeftCp.flipX() - + // 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) - + macro("round", { from: points.edgeTop, to: points.tipRight, @@ -131,7 +131,7 @@ function draftBib({ while (points.tipRightBottomStart.x > -1) { for (const p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) } - + // Snap anchor points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) @@ -223,8 +223,8 @@ function draftBib({ ``` -Before we can get started, let's make sure you have the required software -installed on your computer: +Before we can get started, let's make sure we have the required software +installed on our computer: ## Prerequisites @@ -232,15 +232,15 @@ FreeSewing is a JavaScript library that can run in the browser, on [Node.js](https://nodejs.org/), or a variety of other runtimes such as Deno, AWS Lambda, and so on. -For development, we'll use Node.js. If you don't have Node.js on your system, -follow the link above and install it on your system. +For development, we'll use Node.js. If we don't have Node.js on our system, +follow the link above and install it on our system. -You need Node.js 16 or higher to use FreeSewing +We need Node.js 16 or higher to use FreeSewing -When you're done, you can test whether it works by running: +When we're done, we can test whether it works by running: ```sh node -v ``` -If you get the Node.js version number, you're all set. +If we get the Node.js version number, we're all set. diff --git a/markdown/dev/tutorials/pattern-design/fitting-the-neck-opening/en.md b/markdown/dev/tutorials/pattern-design/fitting-the-neck-opening/en.md index cd282be675c..027e1451469 100644 --- a/markdown/dev/tutorials/pattern-design/fitting-the-neck-opening/en.md +++ b/markdown/dev/tutorials/pattern-design/fitting-the-neck-opening/en.md @@ -9,11 +9,11 @@ right_: ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, part, @@ -28,14 +28,14 @@ function draftBib({ // highlight-end 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) - + // highlight-start delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 diff --git a/markdown/dev/tutorials/pattern-design/new-design/en.md b/markdown/dev/tutorials/pattern-design/new-design/en.md index 2acb7ac08c7..f25ec0716e9 100644 --- a/markdown/dev/tutorials/pattern-design/new-design/en.md +++ b/markdown/dev/tutorials/pattern-design/new-design/en.md @@ -10,17 +10,17 @@ npx @freesewing/new-design@next ``` Remove `@next` suffix once v3 is in production -You'll be asked some questions. +We'll be asked some questions. All the defaults will do, but here are the details: - *What template would you like to use?* — Pick the default: **Tutorial** - *What package manager should we use?* — Pick the default: **npm**, unless you are certain you have **yarn** installed -After you've answered these questions, files will be copied, dependencies installed, and components downloaded. +After we've answered these questions, files will be copied, dependencies installed, and components downloaded. -This will take a few minutes because we're loading some software for your development environment. +This will take a few minutes because we're loading some software for our development environment. @@ -31,16 +31,16 @@ cd tutorial npm run dev ``` -Or if you chose to use yarn as package manager: +Or if we chose to use yarn as package manager: ```sh cd tutorial yarn dev ``` -Now open your browser at http://localhost:8000 +Now open our browser at http://localhost:8000 -If all goes well, you should see this landing page: +If all goes well, we'll should see this landing page: ![The FreeSewing development environment](./nd.png) diff --git a/markdown/dev/tutorials/pattern-design/our-first-part/en.md b/markdown/dev/tutorials/pattern-design/our-first-part/en.md index 39902acaa39..84dc5c9d51b 100644 --- a/markdown/dev/tutorials/pattern-design/our-first-part/en.md +++ b/markdown/dev/tutorials/pattern-design/our-first-part/en.md @@ -1,5 +1,5 @@ --- -title: Your first part +title: Our first part order: 120 --- @@ -7,10 +7,10 @@ Much like garments themselves, patterns are made up of _parts_. Most patterns will have multiple parts. A sleeve, a back part, the collar, and so on. Our pattern is very simple, and only has one part: the bib. -It's a good idea to keep each part in its own file. You don't *have to* do -this, but it's a good habit to get into. When you create more elaborate designs +It's a good idea to keep each part in its own file. We don't *have to* do +this, but it's a good habit to get into. When we create more elaborate designs with multiple parts, keeping each in its own file makes for a more tidy -and approachable code base. +and approachable code base. ## bib.mjs @@ -49,12 +49,12 @@ all details about configuring the part object ``` A part's `name` should be unique in a pattern. Apart from that, anything goes. -Although you probably want to give it a sensible name. +Although we probably want to give it a sensible name. -As you can see in the example above, we're using `tutorial.bib` as the name. +As we can see in the example above, we're using `tutorial.bib` as the name. -We **strongly** recommend to follow this `design.part` naming scheme to avoid +We **strongly** recommend that you follow this `design.part` naming scheme to avoid naming conflicts when mixing parts from various designs to create new designs. @@ -69,9 +69,9 @@ The second mandatory key on the part object is `draft` which should hold the met In our example above, it refers to the `draftBib` function we defined at the top of the file. For now this function doesn't do much, but that will change soon enough. - + This structure of putting the draft method at the top of the file and -the part object at the bottom is a bit of a convention in FreeSewing. +the part object at the bottom is a bit of a convention in FreeSewing. ## index.mjs @@ -89,11 +89,11 @@ we're including a version with comments below: ```design/src/index.mjs /* - * Import the `Design` constructor + * Import the `Design` constructor * from the FreeSewing core library * - * This Design constructor is a method - * (also known as a function) + * This Design constructor is a method + * (also known as a function) * that creates a new Design */ import { Design } from '@freesewing/core' @@ -101,19 +101,19 @@ import { Design } from '@freesewing/core' * Import the `bib` part from the bib.mjs file * in the same folder as this index.mjs file * - * This is the part we'll be working on + * This is the part we'll be working on * in this tutorial */ import { bib } from './bib.mjs' /* - * Create a new Pattern by passing + * Create a new Pattern by passing * a configuration object * to the Design constructor */ const Pattern = new Design({ /* - * This `data` key is optional, but we + * This `data` key is optional, but we * typically add a name and version here */ data: { @@ -123,8 +123,8 @@ const Pattern = new Design({ /* * This `parts` key is the most important thing * It holds a list of `parts` for our Design. - * A Pattern/Design is in the end not much more - * than a collection of parts. + * A Pattern/Design is in the end not much more + * than a collection of parts. */ parts: [ bib ], }) @@ -133,7 +133,7 @@ const Pattern = new Design({ * We are exporting our Pattern * (so others can use it) * but we also (re-)export our bib part - * this allows others to re-use it + * this allows others to re-use it * in their own designs */ export { bib, Pattern } diff --git a/markdown/dev/tutorials/pattern-design/paperless/en.md b/markdown/dev/tutorials/pattern-design/paperless/en.md index cc3ffc03cc3..e281027576b 100644 --- a/markdown/dev/tutorials/pattern-design/paperless/en.md +++ b/markdown/dev/tutorials/pattern-design/paperless/en.md @@ -3,11 +3,11 @@ title: Supporting paperless patterns order: 270 --- -The goal of paperless patterns is to create a pattern that you don't need to -print to be able to use it. Saving paper is always a good thing, but it's +The goal of paperless patterns is to create a pattern that we don't need to +print to be able to use it. Saving paper is always a good thing, but it's also a way to democratize access to patterns. -While more and more of humanity is on the internet, access to printers and +While more and more of humanity is on the internet, access to printers and printing paper is often harder to come by, especially in developing countries. So before wrapping up, let's make the extra effort to make our bib design @@ -15,11 +15,11 @@ support paperless pattern. ## The paperless setting -Users can request paperless patterns by setting [the `paperless` +Users can request paperless patterns by setting [the `paperless` setting](/reference/settings/paperless) to a *truthy* value. Like other settings, we can destructure it to get access to it. -Then, much like with the `complete` setting, we will wrap our +Then, much like with the `complete` setting, we will wrap our paperless-specific code in a condition so it only runs when the user wants that. @@ -27,11 +27,11 @@ 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 +Such a grid is already a good starting point. In addition, we'll be using different macros to add *dimensions* to the pattern. -While the grid gets added automatically, the dimensions you have to add yourself. -Thankfully, there's macros that can help you with that, specifically: +While the grid gets added automatically, the dimensions we have to add ourselves. +Thankfully, there's macros that can help us with that, specifically: - The `hd` macro adds a horizontal dimension - The `vd` macro adds a vertical dimension @@ -39,16 +39,16 @@ Thankfully, there's macros that can help you with that, specifically: - The `pd` macro adds a path dimension that follows a given path -Refer to [the list of macros](/reference/macros/) for more details. +Refer to [the list of macros](/reference/macros/) for more details. - + ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, macro, @@ -68,15 +68,15 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) .hide() // Add this line - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -92,10 +92,10 @@ function draftBib({ points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() - // Drawing the bib outline + // 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) @@ -103,12 +103,12 @@ function draftBib({ points.topRight = points.topLeft.shift(0, width) points.bottomLeft = points.topLeft.shift(-90, length) points.bottomRight = points.topRight.shift(-90, length) - + // 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( @@ -116,14 +116,14 @@ function draftBib({ 0.5 ) points.edgeTopRightCp = points.edgeTopLeftCp.flipX() - + // 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) - + macro("round", { from: points.edgeTop, to: points.tipRight, @@ -156,7 +156,7 @@ function draftBib({ while (points.tipRightBottomStart.x > -1) { for (const p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft) } - + // Snap anchor points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5) @@ -198,13 +198,13 @@ function draftBib({ .curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd) .line(points.edgeRight) .curve( - points.edgeRightCp, - points.edgeTopRightCp, + points.edgeRightCp, + points.edgeTopRightCp, points.tipLeftTopStart ) .curve( - points.tipLeftTopCp1, - points.tipLeftTopCp2, + points.tipLeftTopCp1, + points.tipLeftTopCp2, points.tipLeftTopEnd ) .curve( @@ -213,23 +213,23 @@ function draftBib({ points.tipLeftBottomEnd ) .curve( - points.topCp1, - points.rightCp2, + points.topCp1, + points.rightCp2, points.right ) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .curve( - points.bottomCp1, - points.leftCp2, + points.bottomCp1, + points.leftCp2, points.left ) .curve( - points.leftCp1, - points.topCp2, + points.leftCp1, + points.topCp2, points.tipRightBottomEnd ) .curve( @@ -243,8 +243,8 @@ function draftBib({ points.tipRightTopStart ) .curve( - points.edgeTopLeftCp, - points.edgeLeftCp, + points.edgeTopLeftCp, + points.edgeLeftCp, points.edgeLeft ) .close() @@ -290,7 +290,7 @@ function draftBib({ // Add dimensions /* * The `hd` macro adds a Horizontal Dimension (hd) - * It takes a from and to point, and a y value + * It takes a from and to point, and a y value * at which to place the dimension */ macro("hd", { @@ -300,7 +300,7 @@ function draftBib({ }) /* * The `vd` macro adds a Vertical Dimension (vd) - * It takes a from and to point, and an x value + * It takes a from and to point, and an x value * at which to place the dimension */ macro("vd", { @@ -328,7 +328,7 @@ function draftBib({ }) /* * The `ld` macro adds a Linear Dimension (ld) - * It takes a from and to point, and a d value + * It takes a from and to point, and a d value * that sets its offset from the line from -> to */ macro("ld", { diff --git a/markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md b/markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md index 695983d0cdc..02febd44470 100644 --- a/markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md +++ b/markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md @@ -10,11 +10,11 @@ Fortunately, we merely have to update the start of it. ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, macro, @@ -28,15 +28,15 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) .hide() // Add this line - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -52,10 +52,10 @@ function draftBib({ points.topCp1 = points.bottomCp2.flipY() points.topCp2 = points.bottomCp1.flipY() - // Drawing the bib outline + // 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) @@ -63,12 +63,12 @@ function draftBib({ points.topRight = points.topLeft.shift(0, width) points.bottomLeft = points.topLeft.shift(-90, length) points.bottomRight = points.topRight.shift(-90, length) - + // 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( @@ -76,14 +76,14 @@ function draftBib({ 0.5 ) points.edgeTopRightCp = points.edgeTopLeftCp.flipX() - + // 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) - + macro("round", { from: points.edgeTop, to: points.tipRight, @@ -116,7 +116,7 @@ function draftBib({ 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() @@ -165,13 +165,13 @@ function draftBib({ // highlight-end .line(points.edgeRight) .curve( - points.edgeRightCp, - points.edgeTopRightCp, + points.edgeRightCp, + points.edgeTopRightCp, points.tipLeftTopStart ) .curve( - points.tipLeftTopCp1, - points.tipLeftTopCp2, + points.tipLeftTopCp1, + points.tipLeftTopCp2, points.tipLeftTopEnd ) .curve( @@ -180,23 +180,23 @@ function draftBib({ points.tipLeftBottomEnd ) .curve( - points.topCp1, - points.rightCp2, + points.topCp1, + points.rightCp2, points.right ) .curve( - points.rightCp1, - points.bottomCp2, + points.rightCp1, + points.bottomCp2, points.bottom ) .curve( - points.bottomCp1, - points.leftCp2, + points.bottomCp1, + points.leftCp2, points.left ) .curve( - points.leftCp1, - points.topCp2, + points.leftCp1, + points.topCp2, points.tipRightBottomEnd ) .curve( @@ -210,8 +210,8 @@ function draftBib({ points.tipRightTopStart ) .curve( - points.edgeTopLeftCp, - points.edgeLeftCp, + points.edgeTopLeftCp, + points.edgeLeftCp, points.edgeLeft ) .close() diff --git a/markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md b/markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md index c1db82b7f14..9307c404528 100644 --- a/markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md +++ b/markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md @@ -9,7 +9,7 @@ Which means, halfway between the start of the curve, and the corner of our recta -For this, you'll be using a new method: `Point.shiftFractionTowards()`. We've already +For this, we'll be using a new method: `Point.shiftFractionTowards()`. We've already used `Point.shift()` and there's also `Point.shiftTowards()` and `Point.shiftOutwards()`. As always, [the API docs](/reference/api/point/) have all the details. @@ -18,11 +18,11 @@ As always, [the API docs](/reference/api/point/) have all the details. ```js -function draftBib({ - Path, - Point, - paths, - points, +function draftBib({ + Path, + Point, + paths, + points, measurements, options, part, @@ -35,15 +35,15 @@ function draftBib({ 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) - + paths.quarterNeck = new Path() .move(points.right) .curve(points.rightCp1, points.bottomCp2, points.bottom) .hide() // Add this line - + delta = paths.quarterNeck.length() - target if (delta > 0) tweak = tweak * 0.99 else tweak = tweak * 1.02 @@ -68,10 +68,10 @@ function draftBib({ .close() .addClass('fabric') - // Drawing the bib outline + // 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) @@ -79,7 +79,7 @@ function draftBib({ 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) @@ -94,7 +94,7 @@ function draftBib({ 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( @@ -102,7 +102,7 @@ function draftBib({ 0.5 ) points.edgeTopRightCp = points.edgeTopLeftCp.flipX() - + // Now, adapt our `rect` path so it's no longer a rectangle: paths.rect = new Path() .move(points.edgeTop) @@ -118,4 +118,3 @@ function draftBib({ } ``` - diff --git a/markdown/dev/tutorials/pattern-design/structure/en.md b/markdown/dev/tutorials/pattern-design/structure/en.md index cad4d3ca31d..0ad4d07d978 100644 --- a/markdown/dev/tutorials/pattern-design/structure/en.md +++ b/markdown/dev/tutorials/pattern-design/structure/en.md @@ -6,9 +6,9 @@ order: 110 Inside out `tutorial` folder, the `design/src` folder holds the source code for the new pattern we will create. -You can safely ignore all other files and folders, as they are part of the +We can safely ignore all other files and folders, as they are part of the FreeSewing development environment. -So feel free to skip ahead to [Your first part](/tutorials/pattern-design/your-first-part). +So feel free to skip ahead to [Our first part](/tutorials/pattern-design/our-first-part). ## Notes @@ -16,7 +16,7 @@ If you'd like to learn about those other files and folders, here's what they do: ### folders -- `design`: Holds the source code for your design +- `design`: Holds the source code for our design - `lab`: Holds [React][react] hooks and components specific to the development environment - `node_modules`: Holds installed dependencies - `pages`: Holds [NextJS][next] client-side routes, aka pages @@ -28,10 +28,10 @@ If you'd like to learn about those other files and folders, here's what they do: - `next.config.mjs`: The [NextJS][next] configuration file - `next-i18next.config.js`: The configuration file for [next-i18next][i81n] which handles translation within NextJS - `package.json`: Every Node.js project has a [package.json][pkg] file which holds important metadata and lists dependencies -- `package-lock.json`: This *lockfile* will only exist if you use the npm package manager +- `package-lock.json`: This *lockfile* will only exist if we use the npm package manager - `postcss.config.js`: Configuration file for [PostCSS][postcss], a tool to transform CSS with JavaScript - `tailwind.config.js`: Configuration file for the [TailwindCSS][tailwind] framework -- `yarn.lock`: This *lockfile* will only exist if you use [the yarn package manager][yarn] +- `yarn.lock`: This *lockfile* will only exist if we use [the yarn package manager][yarn] [next]: https://nextjs.org/ [tailwind]: https://tailwindcss.com/ @@ -39,4 +39,3 @@ If you'd like to learn about those other files and folders, here's what they do: [yarn]: https://yarnpkg.com/ [pkg]: https://docs.npmjs.com/cli/v8/configuring-npm/package-json [react]: https://reactjs.org/ - diff --git a/markdown/dev/tutorials/pattern-design/testing-our-pattern/en.md b/markdown/dev/tutorials/pattern-design/testing-our-pattern/en.md index 7cf5f34aac9..5e291a57388 100644 --- a/markdown/dev/tutorials/pattern-design/testing-our-pattern/en.md +++ b/markdown/dev/tutorials/pattern-design/testing-our-pattern/en.md @@ -1,5 +1,5 @@ --- -title: "Testing your pattern" +title: "Testing our pattern" order: 250 --- @@ -9,23 +9,23 @@ and the range of options we provided. This page needs to be updated with screenshots from the v3 development -environment +environment ###### No more grading -FreeSewing patterns are _made-to-measure_, which means that you don't need to -grade your pattern to provide a range of sizes. You should sample your pattern +FreeSewing patterns are _made-to-measure_, which means that we don't need to +grade our pattern to provide a range of sizes. We should sample our pattern for different measurements and options to see how well it adapts. -If testing your pattern sounds like a lot of work, you're in luck. FreeSewing can do it -for you. Click the **Test Design** link in the sidebar under the **View** title. +If testing our pattern sounds like a lot of work, we're in luck. FreeSewing can do it +for us. Click the **Test Design** link in the sidebar under the **View** title. -You have a number of ways to test your pattern: +We have a number of ways to test our pattern: - Test design options - Test measurements @@ -39,9 +39,9 @@ these. We used percentage options, which can vary between their minimum and maximum value. For these tests, FreeSewing will divide that range into 10 steps and -draft your pattern for each step. +draft our pattern for each step. -Click on any of the options we've added to our pattern, and your bib will be +Click on any of the options we've added to our pattern, and our bib will be drawn with that option sampled. ### lengthRatio @@ -49,7 +49,7 @@ drawn with that option sampled. The `lengthRatio` option controls the length of our bib. Testing it confirms that it only influences the length: -![This is what it should look like when you test the `lengthRatio` +![This is what it should look like when we test the `lengthRatio` option](test-option-lengthratio.png) Update screenshot for v3 @@ -63,7 +63,7 @@ increasingly larger neck opening. Testing it confirms this. We can also see that as the neck opening gets smaller, we will rotate the straps further out of the way to avoid overlap: -![This is what it should look like when you test the `neckRatio` +![This is what it should look like when we test the `neckRatio` option](test-option-neckratio.png) Update screenshot for v3 @@ -75,11 +75,11 @@ The `widthRatio` option will determine the width of our bib. For the same bibs. If we test it, we can see that it works as intended. But there's one thing that -perhaps requires your attention. Making the bib wider shortens the length from +perhaps requires our attention. Making the bib wider shortens the length from the bottom of the neck opening to the bottom of the bib. Thereby making the bib shorter when it's worn. -![This is what it should look like when you test the `widthRatio` +![This is what it should look like when we test the `widthRatio` option](test-option-widthratio.png) Update screenshot for v3 @@ -99,7 +99,7 @@ to the reader_. ## Testing measurements Testing a measurement will vary that measurement 10% up or down while leaving -everything else the same. This gives you the option to determine how any given +everything else the same. This gives us the option to determine how any given measurement is influencing the pattern. For our bib, we only use one measurement, so it influences the entire pattern. @@ -109,37 +109,37 @@ For our bib, we only use one measurement, so it influences the entire pattern. ## Testing models Whereas testing a measurement will only vary one individual measurement, -testing models will draft your pattern for different sets of measurements, which +testing models will draft our pattern for different sets of measurements, which we refer to as _models_. On the surface, the result below is the same as our measurement test. But that is because our bib only uses one measurement. So testing that one measurement ends up being the same as testing a complete set of measurements. -But most patterns use multiple measurements, and you'll find this test gives -you insight into how your pattern will adapt to differently sized bodies. +But most patterns use multiple measurements, and we'll find this test gives +us insight into how our pattern will adapt to differently sized bodies. Add screenshot ## The antperson test A special case of model testing is the so-called _antperson test_. It drafts -your pattern with a set of _typical_ measurements , and then drafts it again +our pattern with a set of _typical_ measurements , and then drafts it again with measurements that are 1/10th of those _typical_ measurements. It is named after [the cartoon character](https://en.wikipedia.org/wiki/Ant-Man_\(film\)) who can shrink, yet somehow his suit still fits. -The purpose of the antperson test is to bring out areas in your pattern where -you made assumptions that will not properly scale. Many drafting books will -tell you to _add 3 cm there_ or _measure 2 inch to the right_. Those -instructions don't scale, and you should avoid them. +The purpose of the antperson test is to bring out areas in our pattern where +we made assumptions that will not properly scale. Many drafting books will +tell us to _add 3 cm there_ or _measure 2 inch to the right_. Those +instructions don't scale, and we should avoid them. The best patterns will pass the antperson test with 2 patterns exactly the same, where one will simply be 1/10th the scale of the other. Add screenshot -When you're happy with how your pattern passes these tests, it's time to +When we're happy with how our pattern passes these tests, it's time to complete our design.