Introduction

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.