Randomly generated 16x16 icons.
There are two buttons, one will generate a fresh set of icons, the other will download the current set of icons as individual images.
- Open index.html in a browser
- Make any changes in src/sketch.js
- Refresh the page in the browser
You can use query params to change the size and quantity of rendered icons. The defaults are:
?iconSize=16&iconCount=6&scaleFactor=8
Icons are represented as nested arrays, with each item indicating a "pixel" colour.
A 3x3 icon could be:
const icon = [
[0, 2, 1],
[2, 1, 0],
[1, 0, 2],
];Icons are built row by row, with each new row being a transform of the previous row.
To create an icon, first:
- Generate a random colour palette with
ncolours - Select a random "row transform strategy" from the available strategies
Then:
- Create an array for the first row
- Fill the row with random integers between
0andn, each representing a colour from the palette - Copy the row and apply the selected transform to it. This gives you the next row
- Repeat until all rows have been created
Thanks to:
- p5.js
- ColorMaker for the palettes
- this article https://www.freecodecamp.org/news/how-to-create-generative-art-in-less-than-100-lines-of-code-d37f379859f/
- Yoto Mini - the inspiration for this sketch was to create sets of distinct icons for displaying on Yoto Mini playlists.