Minor updates to pattern design tutorial
This commit is contained in:
parent
6a000fd365
commit
5fc5cf400f
4 changed files with 101 additions and 44 deletions
|
@ -14,7 +14,7 @@ as it is, and simply chose to not show it.
|
|||
To accomplish this, we'll call the `hide()` method on our path:
|
||||
|
||||
<Example tutorial caption="A hidden path is not shown">
|
||||
```design/src/bib.mjs
|
||||
```src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
|
@ -28,8 +28,8 @@ function draftBib({
|
|||
/*
|
||||
* Construct the quarter neck opening
|
||||
*/
|
||||
const target = (measurements.head * options.neckRatio) /4
|
||||
let tweak = 1
|
||||
let target = (measurements.head * options.neckRatio) /4
|
||||
let delta
|
||||
do {
|
||||
points.right = new Point(
|
||||
|
@ -57,9 +57,7 @@ function draftBib({
|
|||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
// highlight-start
|
||||
.hide()
|
||||
// highlight-end
|
||||
|
||||
delta = paths.quarterNeck.length() - target
|
||||
if (delta > 0) tweak = tweak * 0.99
|
||||
|
@ -86,7 +84,7 @@ Let's add some more points, and then construct the complete path for the neck
|
|||
opening.
|
||||
|
||||
<Example tutorial caption="Our completed neck opening">
|
||||
```design/src/bib.mjs
|
||||
```src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
|
@ -100,18 +98,35 @@ function draftBib({
|
|||
/*
|
||||
* Construct the quarter neck opening
|
||||
*/
|
||||
const target = (measurements.head * options.neckRatio) /4
|
||||
let tweak = 1
|
||||
let target = (measurements.head * options.neckRatio) /4
|
||||
let delta
|
||||
do {
|
||||
points.right = new Point(tweak * measurements.head / 10, 0)
|
||||
points.bottom = new Point(0, tweak * measurements.head / 12)
|
||||
points.rightCp1 = points.right.shift( 90, points.bottom.dy(points.right) / 2)
|
||||
points.bottomCp2 = points.bottom.shift( 0, points.bottom.dx(points.right) / 2)
|
||||
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)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.hide()
|
||||
|
||||
delta = paths.quarterNeck.length() - target
|
||||
|
@ -119,7 +134,6 @@ function draftBib({
|
|||
else tweak = tweak * 1.02
|
||||
} while (Math.abs(delta) > 1)
|
||||
|
||||
// highlight-start
|
||||
/*
|
||||
* Construct the complete neck opening
|
||||
*/
|
||||
|
@ -140,7 +154,6 @@ function draftBib({
|
|||
.curve(points.rightCp2, points.topCp1, points.top)
|
||||
.close()
|
||||
.addClass('fabric')
|
||||
// highlight-end
|
||||
|
||||
return part
|
||||
}
|
||||
|
|
|
@ -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.">
|
||||
```design/src/bib.mjs
|
||||
```src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
|
@ -35,27 +35,42 @@ function draftBib({
|
|||
points,
|
||||
measurements,
|
||||
options,
|
||||
// highlight-start
|
||||
macro,
|
||||
// highlight-end
|
||||
part,
|
||||
}) {
|
||||
|
||||
/*
|
||||
* Construct the quarter neck opening
|
||||
*/
|
||||
const target = (measurements.head * options.neckRatio) /4
|
||||
let tweak = 1
|
||||
let target = (measurements.head * options.neckRatio) /4
|
||||
let delta
|
||||
do {
|
||||
points.right = new Point(tweak * measurements.head / 10, 0)
|
||||
points.bottom = new Point(0, tweak * measurements.head / 12)
|
||||
points.rightCp1 = points.right.shift( 90, points.bottom.dy(points.right) / 2)
|
||||
points.bottomCp2 = points.bottom.shift( 0, points.bottom.dx(points.right) / 2)
|
||||
|
||||
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)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.hide()
|
||||
|
||||
delta = paths.quarterNeck.length() - target
|
||||
|
@ -134,7 +149,6 @@ function draftBib({
|
|||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close()
|
||||
|
||||
// highlight-start
|
||||
// Round the straps
|
||||
const strap = points.edgeTop.dy(points.top)
|
||||
|
||||
|
@ -156,7 +170,6 @@ function draftBib({
|
|||
via: points.tipRightBottom,
|
||||
hide: false
|
||||
})
|
||||
// highlight-end
|
||||
|
||||
return part
|
||||
}
|
||||
|
|
|
@ -22,23 +22,41 @@ function draftBib({
|
|||
let target = (measurements.head * options.neckRatio) /4
|
||||
let delta
|
||||
do {
|
||||
points.right = new Point(tweak * measurements.head / 10, 0)
|
||||
points.bottom = new Point(0, tweak * measurements.head / 12)
|
||||
|
||||
points.rightCp1 = points.right.shift(90, points.bottom.dy(points.right)/2)
|
||||
points.bottomCp2 = points.bottom.shift(0, points.bottom.dx(points.right)/2)
|
||||
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
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.hide()
|
||||
|
||||
delta = paths.quarterNeck.length() - target
|
||||
if (delta > 0) tweak = tweak * 0.99
|
||||
else tweak = tweak * 1.02
|
||||
} while (Math.abs(delta) > 1)
|
||||
|
||||
// Construct the complete neck opening
|
||||
/*
|
||||
* Construct the complete neck opening
|
||||
*/
|
||||
points.rightCp2 = points.rightCp1.flipY()
|
||||
points.bottomCp1 = points.bottomCp2.flipX()
|
||||
points.left = points.right.flipX()
|
||||
|
@ -57,7 +75,6 @@ function draftBib({
|
|||
.close()
|
||||
.addClass('fabric')
|
||||
|
||||
// highlight-start
|
||||
// Drawing the bib outline
|
||||
const width = measurements.head * options.widthRatio
|
||||
const length = measurements.head * options.lengthRatio
|
||||
|
@ -78,7 +95,6 @@ function draftBib({
|
|||
.line(points.topLeft)
|
||||
.close()
|
||||
.addClass('fabric')
|
||||
// highlight-end
|
||||
|
||||
return part
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
```design/src/bib.mjs
|
||||
```src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
|
@ -31,18 +31,35 @@ function draftBib({
|
|||
/*
|
||||
* Construct the quarter neck opening
|
||||
*/
|
||||
const target = (measurements.head * options.neckRatio) /4
|
||||
let tweak = 1
|
||||
let target = (measurements.head * options.neckRatio) /4
|
||||
let delta
|
||||
do {
|
||||
points.right = new Point(tweak * measurements.head / 10, 0)
|
||||
points.bottom = new Point(0, tweak * measurements.head / 12)
|
||||
points.rightCp1 = points.right.shift( 90, points.bottom.dy(points.right) / 2)
|
||||
points.bottomCp2 = points.bottom.shift( 0, points.bottom.dx(points.right) / 2)
|
||||
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)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.hide()
|
||||
|
||||
delta = paths.quarterNeck.length() - target
|
||||
|
@ -94,7 +111,6 @@ function draftBib({
|
|||
.close()
|
||||
.addClass('fabric')
|
||||
|
||||
// highlight-start
|
||||
/*
|
||||
* Shape the straps
|
||||
*/
|
||||
|
@ -121,7 +137,6 @@ function draftBib({
|
|||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close()
|
||||
// highlight-end
|
||||
|
||||
return part
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue