Last week , I showed a program I was working on to generate deJong attractor images. I mentioned I’d be working on adding some color. I am not there yet! This is a mere stop to take a breather, and to talk about an intermediate step: smoothing the image. Here is one of my images from last week: While interesting, there are some problems here. I am just calculating points, and as each one is calculated, I draw it on the canvas, even if it has already been drawn.

In my last post , we played The Chaos Game and ended up with a Sierpinski Triangle. It’s quite nice as far as it goes, but there is not a lot of variation and visual interest beyond the initial surpise of finding it buried in the chaos at all. This time around, lets look at the de Jong attractor. First, some terminology! An Attractor is a dynamic system with a set of numeric values to which the system tends to evolve over time, no matter what state it starts in.

Today, we’ll play The Chaos Game! It’s easy to play, and it goes like this: First, put three points on your paper. These will be the vertices of a triangle (so don’t put them in a straight line!) Any triangle will work, but be sure to leave lots of area inside where the triangle will be to make it easier to see what it going on. Next, you need a way to randomly choose one of those vertices over and over.

Let’s draw some squares! Last week I introduced Clojure as a possible replacement for Javascript for my generative art pursuits. Clojure has the Quil library that provides many of the same capabilities that p5.js provides to Javascript. Let’s look at a simple example. This Javascript/p5.js program generates an image like the one at the top of this post. function setup() { createCanvas(800, 800); background(240); stroke(0); let size = 500; let offset = 50; let centerX = width/2; let centerY = height/2; let topLeftX = centerX - size/2; let topLeftY = centerY - size/2; fill(200, 150, 250, 150); rect(topLeftX, topLeftY, size, size); rect(topLeftX-offset, topLeftY-offset, size, size); rect(topLeftX+offset, topLeftY+offset, size, size); } The program is fairly simple: create the canvas, fill in the background with grey, set the stroke (line) color to black, set the fill color, and draw three rectangles slightly offset from each other.

If you’ve been reading my posts each week, you’re probably aware that I have been working mostly in Javascript, using the p5.js drawing library. There are many things to like about Javascript, but also many ways for it to slowly drive you bonkers. I won’t go into all those reasons here, but I will say it’s time to try something new. I’d like to try to do some generative art using the Clojure language.

The Entanglement library has a few grid-based tangles now: Huggins, W-2 , Ambler and Emingle. But we have limited control over the grid: we can affect the spacing in the x and y directions, and we can add some random fluctuations to where each intersection on the grid ends up. Wouldn’t it be nice if we could warp the grid in some more dramatic ways? Yes, I thought so too!

This week I wanted to talk about something a little different, something only peripherally related to art: Behavioral Animation. Behavioral Animation is a kind of computer animation in which an autonomous object determines its own actions by interacting with its environment according to certain rules. Behavioral Animation is a fairly vague term, which covers quite a bit of ground. The Game of Life A simple example is The Game of Life, developed by John Conway , a British mathematician, in the early 1970s.

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.

The Entanglement library has a very few (so far) tangle patterns built in which can be used to create Zentangles. New ones get added to the library as I get to them, but you (yes, YOU) as a user can create them too. Warning! This post is mostly Javascript code! If that’s not your thing, avert your eyes now! You need version 0.0.5 of Entanglement to follow along:

On two occasions I have been asked, ‘Pray, Mr. Babbage, if you put into the machine wrong figures, will the right answers come out?’ […] I am not able rightly to apprehend the kind of confusion of ideas that could provoke such a question. — Charles Babbage, Passages from the Life of a Philosopher (1864) In my first post about generative art, I dumped a lot of Javascript on you with only a basic explanation of how it works, and more recently I have given up trying to explain it at all under the theory that most of the people reading these posts are more interested in the art rather than the programming behind it.

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.

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.

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.

We have been using the p5.js Javascript library. Several p5.js functions take a color as a parameter. For example, you might call background(color) to set the background color, stroke(color) to set the color used to draw lines, or fill(color) to set the color used to fill in shapes. In our past examples, we’ve set various colors, but we haven’t always done so consistently. So how do you set colors in p5.

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.