Identicons
I became interested in the Github's identicons recently.
They are the randomly generated avatar icons for each profile that is assigned
as a default to every account unless you upload a personalised image of your own.
Why did I get interested in that... ?
I thought the algorithm behind it would be interesting to come up with.
The constraint is that an ID must generate an identicon and
the same ID must alway generate an identical identicon.
My version is not an exact copy of Github's version, so I went with a chain
of characters for an ID. That could be an email address or a uuid for example.
I haven't seen any code examples of how Github handle this, so I can't say that
my version of identicons is accurate. I probably took some liberties with the color generation
and the ability to modify the number of tiles or 'pixels'.
Playing with identicons
The identicons are generated via a url or endpoint:
https://intro.hi.nikolaz.tech/pixel_things/identicon
Without any options, this will generate a non symmetrical, 5 by 5 and random identicon.
The endpoint can take some option parameters:
https://intro.hi.nikolaz.tech/pixel_things/identicon?sequence=0af7a80e58dfa93dda2730ece&pixel_factor=4&symmetrical=true&format_type=svg
- sequence(string: default random uuid): which can determine a non random identicon
- pixel_factor(integer: default 5): which can determine the size of an identicon
- symmetrical(boolean: default false): which can determine whether the identicon is symmetrical
- format_type(string: defualt html): which can determine the return format of the endpoint. Options are:
html,svgorjson
When using a sequence, it determines how the identicon is generated, so using the following sequence should always
generate the same identicon.
sequence=thisisaprettyrandomselectionofcharactersdontyouthink
When using a pixel_factor, it should be between 1 and 100 and the sequence may have to be longer
when using a larger pixel_factor, as the identicon shape is derived from the sequence.
When using a format_type, it can be one of the following: html, svg or html.
The json format will return a basic object structure like so :
{
"html": "<style> .identicon-container { /* style code omitted... */ }</style><div class='identicon-container'>html code omitted...</div>",
"sequence": "thisisaprettyrandomselectionofcharactersdontyouthink",
"svg": "<svg viewBox='0 0 25 25' >svg code omitted...</svg>"
}