ABOUT THE PROJECT

This project started on January 2nd, with the Genuary 2023 prompt: "Made in 10 minutes".

At the time, I was studying Casey Reas "process compendium" works, and was obsessed with creating art using rules-based systems.

It took me close to 10 minutes to write a first p5.js sketch with the following rule:

"Pick 8 random points, move them all in random directions (bouncing at the edge of the canvas). At each step, draw the shortest line connecting all points."

Here is the output I posted on Mastodon that day:

The next 3 months were spent refining the code to produce "The Traveling Salesman", named after the (in)famous computer science problem, finding the shortest path that connects a set of points.

It was not a smooth ride. I quickly discovered that my initial code would not work reliably across browsers, because of differences in rounding errors when blending a lot of lines with very low opacity. It was also very slow when drawing more than 100.000 lines.

Again, Genuary came to my rescue with the January 13th prompt: "Something you’ve always wanted to learn". I went down the WebGL rabbit hole, and never looked back.

The move to WebGL allowed to reliably draw a lot more lines (up to 1.000.000) at opacities as low as 1%. The arrival of fxparams was also perfectly timed, and made it possible to open the algorithm to user input.

The final algorithm uses 7 points, and is as follows:

Place the 7 points randomly on the canvas and assign a color to each. Also pick a direction for each point to move.

At each step, move the point along its assigned direction and draw the shortest path connecting all points.

When a point reaches the edge of the canvas, have it either bounce, or wrap around.

The process repeats until a predefined number of lines has been drawn.

THE PARAMETERS

Palettes and colors: There are 34 predefined palettes. Selecting the "custom" palette uses the 7 custom colors + the custom background color.

Density: This parameter controls how many lines are drawn in total, from 250.000 to 1.000.000.

Lines Width: This parameter selects the width used to draw the lines. The heavier the line width, the quicker colors pile up on the canvas. The "Mixed" mode progressively reduces the line width, starting from "very heavy" and ending with "very fine".

Lines Type: This defines the color to use when drawing a line between 2 points A and B:

• "uniform" will use the color of point A.
• "gradient" will use a gradient from "A" color to "B" color. Gradients are free in WebGL !

Symmetry: This parameter is used to quantize the directions in which points are allowed to move. For example with Symmetry=4, points can only move up, down, left and right. Even symmetry numbers increase the likelihood to have straight horizontal or vertical lines in the final drawing.

Here is an example with the exact same parameters, with symmetry = 3,4 and 11.

Transparency: This controls the lines opacity. High opacities values create opaque areas and can drastically alter the feel of the final piece. They also increase the moire pattern effects (which I'm not particularly fond of).

Edges: This controls whether the points wrap around, or bounce off the edges of the canvas.

Speed: This controls the speed at which the points move. The speed coefficient applies to all the points. I experimented with variable speed per points, and while it gave interesting results, it was harder to control.

With slow speeds, the shortest path between all points tends to connect points in the same order as the points move, which creates bigger areas with the same color.

Framing: OK, forget everything I said above about constraining points to the canvas :) This is only true in "Normal" framing mode.

For the other modes, points still bounce off (or wrap around) a rectangular area, but that area depends on the mode:

• "Full": the area is slightly larger than the canvas, which causes the painted area to extend towards the very edges of the canvas. Otherwise as points bounce or wrap around, there would be empty areas around the edges.
• "Zoomed": extends the area to a larger rectangle around the canvas
• "Macro": extends the area to a very large rectangle around the canvas
• "Small border", "Medium border", "Centerpiece": shrink the canvas area (add a small / medium / large border)
• "Glitchy": each point has its own individual constraint area, which is a random sized rectangle with one direction extending to the edges of the canvas.

Post processing: After rendering, the code applies multiple iterations of overlay, color burn, soft light and screen blending modes. This parameter controls the intensity of the effect. Here again, WebGL was a lifesaver to make sure the result is the same across all browsers.

URL parameters: The following parameters can be added to url in live view, and are useful to generate outputs for printing.

• s=2 (or 3): increase the output resolution
• noise=0: turn off the background noise texture

CLOSING WORDS

I have really enjoyed seeing what collectors have been doing with that token. Some of the outputs really surprised me, in a very good way.

It is very exciting to see each individual collector's artistic taste in their choices of parameters.

If you liked the project, please check my other token, "Conjunction of the spheres', which uses a similar algorithm, with points moving along circles instead of straight lines. The outputs are vastly different. Here is a link to it:

Meanwhile, I'll leave you with a few of my favorite iterations from "The Traveling Salesman"