Introduction

In this text I will expand directly upon the generative art methods introduced in Shepherding Random Numbers and Shepherding Random Grids. Most notably I will be using random walks.

Splines

Splines is a mathematical concept used to draw smooth lines between points. There is an extensive literature about splines, and there are multiple types. The details aren't too important, unless you will be implementing this yourself, but in this text we will consider quadratic B├ęzier curves. That means that a curve is controlled by two end points (●) and a mid point (๐).

You can think of it as a string which is connected to two points. Then the midpoint is used to stretch (or bend) the string in a certain direction. To get an idea you can have a look at the illustration below.

This text relies on Javascript animations (Canvas). They should work on most devices, but please let me know if you experience any issues.

You can click or tap all animations to restart them.

Multiple Nodes

We can then introduce more nodes. Below all the nodes used to control the spline move independently around at random. (Here is a neat trick for drawing splines with multiple points in Javascript Canvas.)

Even More Nodes

It is generally difficult to strike a nice balance between detail and simplicity. Often you will get more chaotic behaviour when you increase the level of detail. In this case the level of detail corresponds to the number of nodes.

Expose

By drawing transparent dots along the length of a spline we can get a nice smoke-like effect. This is exactly the same method that was used previously on straight lines.

Varying Noise

We can change the amount of noise applied to each node individually. For instance we can increase the amount of noise—randomness—as we get further to the right.

Lines

In addition to changing the amount of applied noise, we can change the number of points in the spline. Different configurations result in different results. Below we apply these parameters at random to a number of different splines.

Circle

You can pretty much distribute these splines any way you like. Here are multiple splines, with varying number of points, distributed evenly along the circumference of a circle.

Circles

What can I say, I really like circles.

End

You can make quite nice things if you scale this technique up a little. One of the challenges of doing this in the browser is the that we are limited by relatively low resolution, and low color depth. The latter becomes important when gradually combining transparent strokes like we do above. Solving this challenge is outside the scope of this brief introduction.

Hopefully you enjoyed this guide, and you can see a few more images here and here. I've also written about this method previously in my essay On Generative Algorithms in the section called Sand Spline.