More tutorial updates
This commit is contained in:
parent
940cb08b68
commit
a98b869175
6 changed files with 26 additions and 9 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
||||
```
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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
|
||||
}
|
||||
```
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue