Huggins and W-2 have appeared in the Entanglement library! Huggins and W-2 both look like they have been woven but are really just shapes on a grid connected by lines according to a few simple rules. The difference between them is that Huggins connects circles with curved lines, while W-2 connects squares with straight lines.

In this post, I’ll talk about how I built Huggins (once you build Huggins, W-2 is pretty easy to add) and show some examples of how both are used.

### Huggins

Huggins is relatively easy to draw by hand. It’s just a matter of drawing curved lines between circles, like this:

This is repeated over and over again until all the circles are connected in a specific pattern.

Drawing this in p5.js is a little bit harder, as curves require a little extra work. If you have two points and want a curved line in between them, you need to provide a bit more information so the computer knows which direction and how much to curve. This information is provided through control points.

The p5.js `curve()`

function needs to be passed 4 points (8 parameters, those being the x and y values of the 4 points.) It will calculate a curve that will pass through all 4 points, but will only draw the calculated curve between the 2nd and 3rd points. So the positions of the 1st and 4th points affect the curve that is drawn between the 2nd and 3rd points.

The points we are drawing from and to are *not* the centers of the circles, but are near the tops of the circles (or near the bottoms, depending on which curve is being drawn.) But the aren’t exactly at the tops either. For Huggins, I have chosen to use points the are 45 degrees away from the tops. So in this example, we are drawing from a point 45 degrees counterclockwise from the top of the first circle to a point 45 degrees clockwise from the top of the 2nd circle.

To draw all the curves in Huggins, we need to calculate eight points for every circle: four points on the edge of the circle, 90 degrees apart, and four points outside the circle, also 90 degrees apart. These are shown in red in this image, and are numbered for reference.

So to draw a curve like in the example above, curving up from the top of the first circle and down to the top of the second circle, the four points we need for the `curve()`

function are point 7 on the first circle (first control point), point 0 on the first circle (start of curve), point 1 on the second circle (end of curve), and point 6 on the second circle (second control point).

Using the eight points we’ve defined for each circle, all the different curves necessary for Huggins can be drawn. Increasing the distance of the control points, points 7 and 6 in this example, from the circle will increase the curvature. A distance of about 5 times the radius of the circle gives a slight curvature. A distance of 100 times the radius gives a highly distorted curve, and we don’t have a Huggins tangle anymore!

You can see the finished source code for the `Huggins`

class here
.

### W-2

After creating Huggins, W-2 is trivial. Instead of circles we draw squares, and we don’t need the eight calculated points, we just need four: the corners of the square. Then we just draw straight lines using the same pattern as in Huggins.

You can see the finished source code for the `W2`

class here
.

### Using Huggins and W-2

The `Huggins`

and `W2`

classes are very similar. The circles (squares for `W2`

) are referred to as holes in the source code and the options, since they look like holes in the woven patterns these classes produce.

In `Huggins`

there are several options. The `holeDiameter`

option sets the size of the circles, the `holeFillColor`

options sets the color of the circles. You can decide not to draw the holes at all by setting `holesShow`

to false. In this case only the lines will be drawn, which can be an interesting effect. There is also a `curve`

options which is set to a value specifying how many times the size of the radius the control points should be from the center of the circle. These options can be found in the documentation
. Of course, all the `Tangle`

class options could be used as well. In particular, since this is a grid-style tangle, the grid options are key to how Huggins looks when it is drawn.

`W2`

has the same options, except that `holeDiameter`

becomes `holeSize`

(squares don’t have diameters), and for obvious reason, there is no `curve`

option. The W-2 options can be found in the documentation
.

Here is an example Zentangle drawn with Huggins and W-2. This program produced the image at the top of this post.

```
function setup() {
const z = new Zentangle(600, 'square', {
});
z.addTangle(new Huggins(new Polygon([
new Point(0, 0),
new Point(z.width/2, 0),
new Point(z.width/2, z.height/2),
new Point(0, z.height/2),
]), {
background: z.background,
gridSpacing: 10,
tangleRotate: 20,
}));
z.addTangle(new W2(new Polygon([
new Point(z.width/2, 0),
new Point(z.width, 0),
new Point(z.width, z.height/2),
new Point(z.width/2, z.height/2),
]), {
background: z.background,
holeSize: 20,
tangleRotate: 35,
}));
z.addTangle(new W2(new Polygon([
new Point(0, z.height/2),
new Point(z.width/2, z.height/2),
new Point(z.width/2, z.height),
new Point(0, z.height),
]), {
background: z.background,
gridVary: 5,
holesShow: false,
}));
z.addTangle(new Huggins(new Polygon([
new Point(z.width/2, z.height/2),
new Point(z.width, z.height/2),
new Point(z.width, z.height),
new Point(z.width/2, z.height),
]), {
background: z.background,
curve: 15,
tangleRotate: -10,
gridXSpacing: 10,
}));
z.addTangle(new Huggins(new Polygon([
new Point(z.width/4, z.height/4),
new Point(3*z.width/4, z.height/4),
new Point(3*z.width/4, 3*z.height/4),
new Point(z.width/4, 3*z.height/4),
]), {
background: z.background,
curve: 15,
gridVary: 10,
}));
z.draw();
}
```

To run this example yourself, you will need v0.0.6 of the Entanglement library:

```
<script src="https://cdn.jsdelivr.net/gh/tektsu/entanglement@0.0.6/dist/entanglement.js"></script>
```

Entanglement is expanding! Have fun playing with it!