Jono Shields

Procedural Patterns


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


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.


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


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…


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.

Want to get notified next time I post?