In 2013, Giacinto Barresi, Victor Zappi and I presented a laboratory at Genova’s Festival della Scienza. The topic of the laboratory was Generative Art, and during its preparation we ran into the need for a way to randomly create aesthetically pleasing color palettes. These palettes would have been used for the creation of visual and interactive generative content. These color collections had to be generated in real time, and used in Processing sketches.
Generative Art creation is based on the use of autonomous systems which follow some rules, in order to create interesting outcomes. Disclaimer: when it comes to real artists, the result is way more than interesting! In our less artsy case, we used computer based systems programmed using the Processing platform, in order to complement our discussion about Generative Art and human perception of beauty.
If you don’t know Processing, go check it out, it’s awesome!
Where do I start with these random colors?
Well, as many things we do nowadays, I started with a search on the Internet, which gave me back a lot of results. After reading a bit and trying some things out, I ended up following the advice (and algorithms!) found in these 3 references:
1 – http://devmag.org.za/2012/07/29/how-to-choose-colours-procedurally-algorithms/
2 – http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
3 – http://stackoverflow.com/questions/43044/algorithm-to-randomly-generate-an-aesthetically-pleasing-color-palette
I also added some things of my own, which I think came from trial and error.
The result is a Processing file containing a library of functions which can be used to create those “aesthetically pleasing” – or at least interesting – colors we wanted to introduce in our sketches and installations for the festival.
Feel free to use this small library for your own projects, as I do. It may need some studying and tweaking, but it’s better than starting from scratch. The source code can be found here, both for Processing and p5.js (its JavaScript younger brother).
Here is a p5.js example of 4 of the available palettes generation algorithms, refreshing every second:
In order:
– RandomMix (triad mixing)
– RandomHue (with constant saturation and brightness)
– Random Offset
– HarmonyCentered
(more on these techniques can be found in the source code, and of course in the articles mentioned above).