Procedural Patterns24 Nov 2016
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.