1
0
Fork 0

chore(tutorial): Updated working to avoid confusion about neck opening

This closes #1259
This commit is contained in:
joostdecock 2021-09-04 14:31:21 +02:00
parent ae1685d83b
commit 27922027ec
3 changed files with 32 additions and 8 deletions

View file

@ -3,10 +3,34 @@ title: Completing the neck opening
order: 180
---
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:
## Hiding our quarter neck
First create some new points:
We've constructed the perfectly sized quarter neck, and we're going to use this
to create our complete neck path by flipping and mirroring it.
To make our code easier to understand, we're going to leave the `quarterNeck` path
as it is, and simply chose to not show it.
To accomplish this, update the code and add this one line:
```js
paths.neck = new Path()
.move(points.right)
.curve(points.rightCp1, points.bottomCp2, points.bottom)
.setRender(false) // <== Add this line
```
We're saying: don't render this path. In other words, don't show it.
The path is now known, and we can still use it to calculate the length of the neck opening.
But it won't show up on screen or on the page.
## Create the complete neck path
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.
Below your code (under the line with `while` on it), let's add some more points:
```js
points.rightCp2 = points.rightCp1.flipY()
@ -28,7 +52,7 @@ Perhaps you can figure out what they do? If not, check [the API documentation](/
</Note>
Then, update your path:
Then, below those new points, and the following code to create your path for the neck opening:
```js
paths.neck = new Path()

View file

@ -40,7 +40,7 @@ points.rightCp1 = points.right
points.bottomCp2 = points.bottom
.shift(0, points.bottom.dx(points.right)/2)
paths.neck = new Path()
paths.quarterNeck = new Path()
.move(points.right)
.curve(points.rightCp1, points.bottomCp2, points.bottom)
```
@ -83,12 +83,12 @@ You can find them all in [the Point API docs](/reference/api/point/).
The next line introduces you to something new: Paths:
```js
paths.neck = new Path()
paths.quarterNeck = new Path()
.move(points.right)
.curve(points.rightCp1, points.bottomCp2, points.bottom)
```
- We're adding a path named `neck` to `paths` which holds our part's paths
- We're adding a path named `quarterNeck` to `paths` which holds our part's paths
- We're using the Path constructor, which takes no arguments
- We're following up with a `Path.move()` call that takes one Point as argument
- Then, there's a `Path.curve()` call that takes 3 points as arguments

View file

@ -16,7 +16,7 @@ do {
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.neck = new Path()
paths.quarterNeck = new Path()
.move(points.right)
.curve(points.rightCp1, points.bottomCp2, points.bottom)