Up until now, the Entanglement library has provided a few tangle elements and a few tangles, which you could draw onto your canvas. But real Zentangles have a border, and might be round or triangular instead of square. To make this easier to do, Entanglement now has the Zentangle class. This is the top-level class you should use to define what your Zentangle should look like.
Here is an example using it. This program drew the image at the top of this page:
function setup() {
const z = new Zentangle(600, 'square', {
});
z.addTangle(new Aah(z.getFullMask(), {
background: z.background,
}));
for (let i=0; i<12; i++) {
const a = 20+i*30;
z.addTangle(new BoxSpirals([
new Point(z.width/2, z.height/2),
new Polar(100+10*i, radians(a)).toPointCenter(new Point(z.width/2, z.height/2)),
new Polar(120+10*i, radians(a+30)).toPointCenter(new Point(z.width/2, z.height/2)),
], {
background: 111+12*i,
divisions: new Range(6, 10),
rotation: 'random',
startCorner: 'random',
size: new Range(30, 60),
}));
}
z.draw();
}
Here we have declared z, and instance of Zentangle, and specified a size and a shape. The shape can be ‘square’ (the default), ’triangle’ or ‘circle’. The size is in pixels. There is only one number, as Zentagles are a square or a triangle (in which case size is the length of the side), or a circle (in which case the size is the diameter.)
Once you have z, you can add new tangles using the addTangle() method. When you have added the ones you want, use the draw() method to draw them onto the canvas in the order they were added, and to draw a border around the whole thing. The border is really a polygon using very short lines with some minor random variations to try and make it look like it might have been hand-drawn.
In this case, we are adding 13 tangles. First, there is an instance of Aah that covers the canvas. The getFullMask() method returns a polygon that exactly fits the canvas.
Inside a loop, we then generate 12 instances of BoxSpirals. These all touch the center of the canvas, but are drawn at different angles, with the size of the triangle increasing each time. Each triangle is drawn with an increasingly lighter background.
The tangles are all drawn to internal buffers; the call to the draw() method at the end draws everything to the canvas.
Notes
You need version 0.0.4 of Entanglement to run this program:
<script src="https://cdn.jsdelivr.net/gh/tektsu/entanglement@0.0.4/dist/entanglement.js"></script>
If you draw a circular or triangular Zentangle, the area you draw to is still square (well, rectangular in the case of the triangle), it’s just that the portion that doesn’t fit the shape has been masked out and will not appear in your finished Zentangle.
Look at ZentangleOptions to see what options you can pass to a Zentangle. Spoiler Alert: there aren’t many yet, but that is likely to change!
Our images are starting to look more like real Zentangles! In the future we’ll need to add some more tangles. So far we can draw three, but Tandika has nearly 600 of them in her collection! I have some work to do…