Recently I did a post about the Ambler tangle in the Entanglement library. Ambler uses an element called a box spiral. It turns out, box spirals appear in several tangles, most notably the Box Spirals tangle. In this post, we’ll talk about the Entanglement BoxSpiral class, which implements the Box Spirals tangle. The box spiral used in Ambler as it is implemented in Entanglement is very specific. It consists of nine lines, and always rotates counter-clockwise. Therefore it can only be drawn in four orientations, with the spiral starting from one of the four corners of its enclosing box.
The Entanglement library now supports Ambler! This officially doubles the number of tangles it can produce! Two tangles! Progress! OK, so two tangles isn’t really all that many, but still! Progress! Using Entanglement to draw a basic Ambler is easy. Here’s the program that generated the image at the top of this page: const height = 600; const width = 600; function setup() { createCanvas(width, height); background(255); } function draw() { let amb = new Ambler(width, height, {}); amb.paste(new Point(0, 0)); noLoop(); } So how does it work? Unlike Aah, the other tangle supported by this library, Ambler is a repeating pattern in a grid. So, no need for the collision detection we used with Aah; each pattern has a defined place where it can be drawn. The pattern that goes into each grid square is a box spiral. We build that in each square by dividing each square side into 6 sections, drawing a crosshatch of lines through those points and finding the intersections of those lines. We then use those points to draw the spiral.
In my last two posts , I showed how to draw most of the Aah tangle using the Javascript p5.js library. In this post, the Aah is complete, as you can see from the image below. However, the Javascript code to do so, does not follow directly from what we saw in those previous posts. I have rewritten it and packaged it into a library: Entanglement . More about that shortly. First, lets talk about how the Aah pattern was completed. You’ll recall that we had successfully generated the 8-armed starburst pattern, and distributed copies of it the around the canvas, with some random variations to make it seem more like it was hand-drawn. We avoided overlapping them by using collision detection: we draw a polygon around each pattern, and then as we create new ones, we check the polygon against those for the patterns we had already drawn to make sure there were no collisions. The final image we generated was nice, but missing something important: an Aah tangle is supposed to have small circles randomly scattered between the starburst patterns.