Generative Texture

Computers are fantastic companions for creating generative art — they are fast, usually predictable, and can render pretty much anything you can imagine. But, there are a few things they don’t do so well out of the box. One of those things is texture.

Why? “Analog” materials such as paint or paper naturally add depth to a piece. When working digitally, we often sacrifice the organic depth they provide for precision and speed. Here are three ways to add some beautiful texture back into your work.

---

Tiny random shapes

For our first technique, all we need is some simple shapes added to a canvas at random points. Each of these shapes should usually have a slightly different size, but other than that, there are no rules!

Here’s an example using circles:

Here’s an example using randomly rotated lines:

And here’s an example using randomly rotated lines and circles:

Lovely! Simple but effective.

Painting with lines

Our second technique is fantastic for creating solid shape fills with character. Here’s how it works:

First, we draw a collection of lines between random points on a shape’s bounding box:

Then, we mask those lines to the shape:

Finally, we can randomize the color and size of each line a little for a different look:

Cool, right? I’m using SVG for my examples here, but you can achieve the same effect in canvas, etc.

Poisson Disk Sampling

Our third technique is almost a progression from the first. Here, rather than randomly placing objects, we use Poisson Disk Sampling to add non-overlapping circles to a canvas:

Then, we can use the position and radius values of these circles to place other objects:

From here, we can implement a custom “distance function” to create more intricate compositions:

Awesome. The example above is using a simplex noise grid to drive the placement of its objects, but there is a ton of room for creativity with this technique.

Next steps

As a creative exercise, try to find an exciting texture in the physical world and recreate it with code. Just remember, it doesn’t have to be perfect. You don’t always need to reproduce the physical world 1:1 — a simple nod to reality is often enough.