fix(docs): Pattern tutorial: Change "you/your" to "we/us/our". Fixes #2982
This commit is contained in:
Benjamin F
parent
6c97d081e7
commit
4def5963a0
20 changed files with 383 additions and 393 deletions
|
|
@ -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:
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<Example tutorial caption="It is looking pretty wonky now, but we'll deal with that next">
|
||||
```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
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
|
||||
|
||||
<Example tutorial caption="Almost done. But there's one more thing the user can ask for: a **paperless** pattern">
|
||||
```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"
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ To accomplish this, we'll call the `hide()` method on our path:
|
|||
|
||||
<Example tutorial caption="A hidden path is not shown">
|
||||
```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.
|
||||
|
||||
<Example tutorial caption="Our completed 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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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:
|
|||
|
||||
<Example tutorial caption="Our very first path forms a quarter of our neck opening">
|
||||
```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({
|
|||
```
|
||||
</Example>
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<Note> You can find more information on the `round` macro in [the macros docs](/reference/macros/round/).</Note>
|
||||
|
||||
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.
|
|||
|
||||
<Example tutorial caption="Now the straps overlap. Which doesn't work for a pattern as it would make it impossible to cut it out of a single piece of fabric. So let's deal with the overlap next.">
|
||||
```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
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ With our neck opening in place, let us draw the basic outline of our bib.
|
|||
|
||||
<Example tutorial caption="Note how the neck opening is the same distance from the left, right, and top edge">
|
||||
```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`.
|
||||
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ it's `hidden: false` property.
|
|||
|
||||
<Example tutorial caption="It is starting to look good. But this sharp corners at the bottom don't exactly say baby, do they?">
|
||||
```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()
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<Tip>
|
||||
##### 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.
|
||||
</Tip>
|
||||
|
||||
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:
|
||||
|
||||
|
||||
<Example tutorial="1" previewFirst="1" caption="Our end result">
|
||||
```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({
|
|||
```
|
||||
</Example>
|
||||
|
||||
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.
|
||||
|
||||
<Tip compact>You need Node.js 16 or higher to use FreeSewing</Tip>
|
||||
<Tip compact>We need Node.js 16 or higher to use FreeSewing</Tip>
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@ right_:
|
|||
|
||||
<Example tutorial caption="It might look the same as before, but now it's just 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
|
||||
|
|
|
|||
|
|
@ -10,17 +10,17 @@ npx @freesewing/new-design@next
|
|||
```
|
||||
<Fixme compact>Remove `@next` suffix once v3 is in production</Fixme>
|
||||
|
||||
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.
|
||||
|
||||
<Note>
|
||||
|
||||
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.
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
@ -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:
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<Tip>
|
||||
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.
|
||||
</Tip>
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
<Note>
|
||||
<Note>
|
||||
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.
|
||||
</Note>
|
||||
|
||||
## 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 }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
<Note>
|
||||
Refer to [the list of macros](/reference/macros/) for more details.
|
||||
Refer to [the list of macros](/reference/macros/) for more details.
|
||||
</Note>
|
||||
|
||||
<Example tutorial paperless caption="Making your pattern paperless is the icing on the cake. Time to wrap up, go over what we've learned, and give some pointers on where to go from here">
|
||||
<Example tutorial paperless caption="Making our pattern paperless is the icing on the cake. Time to wrap up, go over what we've learned, and give some pointers on where to go from here">
|
||||
```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", {
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ Fortunately, we merely have to update the start of it.
|
|||
|
||||
<Example tutorial caption="The shape our bib is now completed">
|
||||
```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()
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Which means, halfway between the start of the curve, and the corner of our recta
|
|||
|
||||
<Note>
|
||||
|
||||
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.
|
|||
|
||||
<Example tutorial caption="All of a sudden, things are starting to look like a bib">
|
||||
```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({
|
|||
}
|
||||
```
|
||||
</Example>
|
||||
|
||||
|
|
|
|||
|
|
@ -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/
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
|||
|
||||
<Fixme>
|
||||
This page needs to be updated with screenshots from the v3 development
|
||||
environment
|
||||
environment
|
||||
</Fixme>
|
||||
|
||||
<Tip>
|
||||
|
||||
###### 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.
|
||||
|
||||
</Tip>
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
<Fixme compact>Update screenshot for v3</Fixme>
|
||||
|
|
@ -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:
|
||||
|
||||
|
||||
|
||||
<Fixme compact>Update screenshot for v3</Fixme>
|
||||
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
<Fixme compact>Update screenshot for v3</Fixme>
|
||||
|
|
@ -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.
|
||||
|
||||
<Fixme compact>Add screenshot</Fixme>
|
||||
|
||||
## 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.
|
||||
|
||||
<Fixme compact>Add screenshot</Fixme>
|
||||
|
||||
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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue