Constructing the neck opening

Our goal is to construct an oval neck opening that has a circumference that is the head measurements multiplied by the neckRatio option.

That might involve some trial and error. But since the neck opening will be symmetric both horizontal and vertical, we only need to construct one quadrant.

Destructuring measurements and options

We’ll be adding some points to our pattern to do just that. But we want to have access to our measurements and options to do so. For this, we first destructure measurements and options so we can access them:

function draftBib({
  Path,
  Point,
  paths,
  points,
  measurements,
  options,
  part,
}
) {

  return part
}

Great. Now let’s get to work.

Drawing our first path

Let’s add some points, and use them to draw our first curve:

function draftBib({
  Path,
  Point,
  paths,
  points,
  measurements,
  options,
  part,
}
) {
  /*
   * 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
    )

  return part
}

We’ve added some points to our part, and drawn our first path. Let’s look at each line in detail.

Adding points

points.right = new Point(
  measurements.head / 10, 
  0
)

• We’re adding a point named right to the points object which holds our part’s points
• We’re using the Point constructor, which takes two arguments: The point’s X and Y coordinates in the 2-dimensional space
• The X value is measurements.head / 10
• The Y value is 0

The creation of points.bottom is very similar, so let’s skip to the next line:

points.rightCp1 = points.right.shift(
  90, 
  points.bottom.dy(points.right) / 2
)

• We’re adding a point named rightCp1, which will become the control point of the right part
• 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
• 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 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 the right (0 degrees) for half of the X-delta between points bottom and right.

Adding paths

Adding points is typically merely a means to an end. And that end gets introduced on the next line: Paths.

paths.quarterNeck = new Path()
  .move(points.right)
  .curve(
    points.rightCp1, 
    points.bottomCp2, 
    points.bottom
  )

• We’re adding a path named quarterNeck to the paths object 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

If you’ve read through the high-level Pattern guide you will have learned that paths always start with a move() operation. In this case, we moved to our right points.

From there, we drew a cubic Bézier curve to our bottom point by using rightCp1 and bottomCp2 as control points.

When all is said and done, we now have a quarter of our neck opening. The only problem is, we have no guarantee whatsoever that this opening is the correct size.

Rather than hope it is the correct size, we’ll make sure it is next.