Making generative art with simple mathematics
Since launching the newest iteration of this site, I’ve received many great questions on how I made the animated blobs on the homepage. If you havn't seen them, go checkout this site’s homepage. Generative art (also known as procedural art) is a hobby of mine and once my primary area of study. Much like any creative pursuit, it boils down to sketching, experimentation, and many prototypes. But the hallmark of great procedural art is often the simplicity of the system behind the pixels. Some of the most beautiful generative pieces operate on simple equations, not complex simulations. In this tutorial, you will learn how a simple wave can be used to generate beautiful organic forms.
The humble sinusoidal wave
If you’ve taken trigonometry, you know the sine function. You probably encountered it as
y = sin(θ)
I’m not going to cover all the beautiful properties of sine waves (also know as sinusoids) in this tutorial, but if you’re interested the Wikipedia page is a great place to start. All sinusoids has three primary attributes: amplitude, frequency, and phase.
- Amplitude is how tall it is, in this case on the vertical axis. In sound engineering, this is how “loud” the wave (or signal) is.
- Frequency is number of oscillations (e.g. cycles) that happen during a unit of time. Think of it as how skinny or fat the waves are.
- Phase dictates where the wave “starts”. This let’s you push the wave backwards and forwards.
If you’re not used to playing with sinusoids, this is a lot of nonsensical information. Think of each of these parameters as a lever you can play with to get a different shape. Here, play with this:
Move the sliders around until you get a feel for how each parameter changes the wave. Try to make a wave that looks like calm, rolling hills. Now make one that feels like static. The more comfortable you are with these three fundamental properties, the easier the next section will be.
The fourth parameter: time
If you slide the phase knob back and forth in the above diagram, you might notice it feels like the wave was almost animated. If you did, you’ve just hit upon the greatest secret of procedural art. Dump some time into any high school physics equation and you’ve created some procedural art. Hyperbole aside, motion makes alomst any simple form interesting. Here’s the exact same toy as above, but with it's phase is now controlled by a timer. To make things interesting, you can control how fast - or slow - time moves. It’s like a shit version of The Matrix.
Again, play with the different parametrs and create that have different exhibit personalities. Make a composition that feels like a calm ocean or frenetic laser.
Double down
So we have made a wave wiggle. Who cares. WE WANT TO MAKE ART. Waves are cool things though, because when you smash two or more together, really neat things start to happen. In fact, with enough waves, you can make almost any shape. For all you audio geeks, that’s basically what a Fourier transform is. Don’t click that link unless you really like mathematics.
Let’s explore what we can create with two different sine waves. The toy below works just like the previous ones, but takes the two waves on top (inputs A and B) and adds them together to produce the wave on the bottom. That’s it, no fancy math, just A + B.
Play with the sliders until you find something of your liking.
Notice how when the phases are a multiple of each other (try the in sync, or 1 to 2 preset) the resulting wave is large, literally twice the size, of the input waves. This is called constructive interference. The interaction of the two waves makes something larger, amplifying their attributes. When the waves are perfectly out of sync (try the negate preset) you get a flat line. This is because the rises of one wave are completely canceled out by the falling of the other wave. Give the ripple preset a try. Notice how the overal broad shape of A is maintained, while B emparts a ripple to the wave.
Make some of your own compitions by playing with the different paratmers. Create an expressive wave you're happy with. We'll see it again in the next section.
Put a ring on it
If the procedural art community had an alliance, this part of the article would get me kicked out. To turn these neat waves into a blob-like thing, all we need to do is draw the wave on a circlar path. That’s it. Switch between the different drawing modes in the follow figure.
The wave in the above figure uses the same parameters as figure 3 up above, but allows you to choose whether it draws the wave on a straight line or around a circle. Head back up to the above figure and try to create different blobs with different character.
That's it!
Once you have the basic mathematics down, the rest is a lot of tweaking and optimization to produce something interesting... something characterful. Most procedural art is built upon some fundamental, elegant algorithm. That's the beauty of it: the artist doesn't define the artwork, just the systems that generate the artwork on their behalf.
So grab your high school physics book, choose an equation, and see what you can create.