Random Icon Generator
I wanted a way to generate batches of interesting and visually distinct icons. Think GitHub’s Identicons, but more colourful.
The end result can be seen at p5-sixteens.netlify.app, with the source at github.com/m-allanson/sixteens/.
Initial Version
I used p5.js and this article about generative art to come up with something that looked like this:
I got the maths wrong, so it only generated diagonal stripes. But I liked this “wrong” version more than the fixed version, so I kept it that way.
The colours were picked at random, which gave some nice contrast but didn’t feel very cohesive.
Cue version two…
Version Two
For this version I used a library to generate the colour scheme for each icon: ColorMaker. These palettes are less contrasty than the previous version, but had nicer vibes, so they stayed.
I also added a few different strategies for arranging colours on each icon, which created some pleasing variety.
Customisation
You can customise the output via queryParams. Here’s an example:
The above screenshot used ?iconSize=8&iconCount=48&scaleFactor=2
You can get a nice range of outputs from adjusting these, though it’ll fall over on some larger or smaller numbers. The icon generator is way over in the realms of “for fun only”, so I’m not too bothered about these issues.
Wrapping Up
Finally, here’s one icon displayed on a Yoto Mini, which was my original motivation for creating these icons.
Nice :)