1
0
Fork 0

More tutorial updates

This commit is contained in:
Natalia Sayang 2024-03-16 21:06:19 +00:00
parent 940cb08b68
commit a98b869175
6 changed files with 26 additions and 9 deletions

View file

@ -25,7 +25,7 @@ I am using [*the official name* of the measurement](/reference/measurements) her
circumference, that name is `head`.
<Fixme>
The `design/src/bib.mjs` "language" title is out of date. It is used in the tutorial from this point forward to maintain syntax-highlight not yet available for the `src/bib.mjs` title, but should be replaced with `src/bib.mjs`.
The `design/src/bib.mjs` "language" title on the code snippets is out of date. It is used in the tutorial from this point forward to maintain syntax-highlight not yet available for the `src/bib.mjs` title, but should be replaced with `src/bib.mjs`.
</Fixme>
```design/src/bib.mjs

View file

@ -53,7 +53,7 @@ we'll capture these return values from the `round` macros and create
easy-to-remember points from them:
<Example tutorial caption="It looks the same as before, but now those macro points are accessible to us">
```src/bib.mjs
```design/src/bib.mjs
function draftBib({
Path,
Point,
@ -61,7 +61,9 @@ function draftBib({
points,
measurements,
options,
// highlight-start
utils,
// highlight-end
macro,
part,
}) {
@ -126,7 +128,9 @@ 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
@ -169,6 +173,7 @@ function draftBib({
points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y)
points.tipRightBottom = new Point(points.tipRight.x, points.top.y)
// highlight-start
/*
* Macros will return the auto-generated IDs
*/
@ -197,7 +202,7 @@ function draftBib({
points[`${side}${utils.capitalize(id)}`] = points[ids1[side].points[id]].copy()
}
}
// highlight-end
/*
* Always draw your path at the end
* after you've manipulated your points

View file

@ -27,7 +27,7 @@ Like our neck opening, we've only drawn half since we can simply copy the
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.">
```src/bib.mjs
```design/src/bib.mjs
function draftBib({
Path,
Point,
@ -35,7 +35,9 @@ function draftBib({
points,
measurements,
options,
// highlight-start
macro,
// highlight-end
part,
}) {
@ -149,6 +151,7 @@ function draftBib({
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
.close()
// highlight-start
// Round the straps
const strap = points.edgeTop.dy(points.top)
@ -170,7 +173,7 @@ function draftBib({
via: points.tipRightBottom,
hide: false
})
// highlight-end
return part
}
```

View file

@ -6,7 +6,7 @@ order: 88
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">
```src/bib.mjs
```design/src/bib.mjs
function draftBib({
Path,
Point,
@ -75,7 +75,10 @@ function draftBib({
.close()
.addClass('fabric')
// Drawing the bib outline
// highlight-start
/*
* Drawing the bib outline
*/
const width = measurements.head * options.widthRatio
const length = measurements.head * options.lengthRatio
@ -95,6 +98,7 @@ function draftBib({
.line(points.topLeft)
.close()
.addClass('fabric')
// highlight-end
return part
}

View file

@ -8,6 +8,8 @@ We already know how to round corners, we'll have the `round` macro take care of
With our corners rounded, we should also update our path.
Fortunately, we merely have to update the start of it.
We'll rename `paths.rect` to `paths.seam`.
<Example tutorial caption="The shape of our bib is now completed">
```design/src/bib.mjs
function draftBib({

View file

@ -17,7 +17,7 @@ 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">
```src/bib.mjs
```design/src/bib.mjs
function draftBib({
Path,
Point,
@ -111,6 +111,7 @@ function draftBib({
.close()
.addClass('fabric')
// highlight-start
/*
* Shape the straps
*/
@ -138,6 +139,8 @@ function draftBib({
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
.close()
// highlight-end
return part
}
```