Attractor Seeder

Selecting values that define Clifford and De Jong attractors can be a slow task. This tool automates that process.

This tool was originally meant to be a personal tool to make my art production process more efficient. When I thought I may not be the only one who could take advantage of it, I decided to make it public (and better).

You can check and use the tool , or check the repository and do with its contents whatever you want.

The problem

The attractors I work with are Clifford and De Jong attractors. With these attracors, you have a pair of equations that produce totally different results depending on four variables a, b, c, and d.

The equations are:

So you need to produce several attractors with random values for the variables until you find one that you find attractive, and render it in higher quality.

Rendering attractors in high quality can be expensive. And if you don’t already know that the produced attractor will look great, you’ll be losing a lot of time.

This has two solutions:

Originally, I did the former. But constantly modifying the code made me slow, and the task unpleasant. So I decided to implement the latter.

The solution

I chose to make a web app because JavaScript is the language I’ve used the most, and P5.js the library I use to produce images anyways.

I originally thought of a tool to make a grid of attractors, each one displaying the values that generated them. I started producing one canvas divided in multiple squares, drawing one attracor per square. But this made it hard to deal with one attractor at a time.

Then I moved to producing multiple canvas in a single page, and drawing one attractor per canvas. Although it generated more problems at the beginning, it was certainly a more scalable solution.

This new approach allowed me to introduce new functions I didn’t think about at first:

Attractor Seeder v1.0.0

This was built using plain HTML, JavaScript to produce the grid of canvases, P5.js to draw the individual attractors, and some CSS to style the main page.


Attractor Seeder Home

The index explains what the tool is about, and prompts you the variables that will be used to generate the grid:

Pressing Generate redirects to ./grid sending the form values as URL parameters.


Attractor Seeder Grid

The ./grid/ page is where you mass-generate attractors.

The URL parameters it takes are: size, points, equations.

To generate a new grid, you don’t need to reload the page. Just press space bar and it will re-generate all the unlocked attractors.

Each attractor has 3 buttons:


The ./drawer page is where you can draw a single attractor with specified quality.

The URL parameters it takes are equations, a, b, c, d, points, alpha.

The more points you include in your image, the smaller the alpha value should be.

For now, the only resolution available is 2048 x 2048.

Aims for future versions

Better drawing algorithm

Currently, the ./drawer page draws circle with small radius for every point the attractor generates. This is incredibly inefficient, since the graphics library has to compute how many pixels every circle will affect. Then in what proportion, and then applying those changes.

A more efficient approach I’ve been thinking is this:

This won’t be just more efficient, but will avoid having to tune the alpha value for different number of points. This will assure the most populated points in the histogram will be fully-colored.

And of course, the advantage of having custom color maps like viridis and magma.