Jono Shields

Procedural Patterns

 So a few weeks ago I saw a really great pattern on a van driving around.

image

I thought it was really cool, so today I sat down and made an algorithm to generate something similar.

Lets begin with the finished product.

image

I started with perlin noise, this is for the smooth transitions and is actually the core of the pattern.

image

In the example above the perlin algorithm gives me values between 0 and 1 depending where on the grid each point is. I am then rendering it so that the values closer to 0 are darker and closer 1 one are lighter.

Then I simply map those values from 0 to 1 to a full spectrum of hue. This basically means that each value represents a colour in the rainbow, 0 is red, 0.2 is orange, 0.4 is yellow, 0.6 is green …. so on so forth… and every colour in between.

Then we get something like this…

image

The last step is just breaking it down into triangles, giving each triangle a different saturation and brightness. Then we are done. Easy as pie.

And here is a lovely animated version for reading the whole thing.

The source code for the above is here.