An Identicon is a visual representation of a hash value that serves to identify
a user of a computer system as a form of avatar while protecting the user's
privacy. You can read more about Identicons here.
Put simply, an Identicon is an image that corresponds to, and is derived from, a
unique value, (i.e. a username string).
GitHub automatically generates one for every user before they have uploaded a
profile photo. They tend to look like this!:
This lab is specifically set up to improve your ability to independently break
down a larger problem into smaller, achievable tasks. It is up to you to
figure out a good approach to tackle this challenge. You have been given an end
goal: a working Identicon generator. Your objectives are to:
The completed application should look and function like this:
/src/. When approaching a problem like this, take a moment to map out the distinct parts of code that need to work together:
An external library
md5 has been provided and is already being imported
in our HTML. Use the
md5.array method to generate a unique set of integers
from the user's input value:
const hashedArr = md5.array(strValue) // hashedArr == an array of 16 integers, 0 - 255 (inclusive) // i.e. [243, 8, 144, ...]
We can use these values to derive both our color as well as our block
positions. For color, the bounds of 0 - 255 are very convenient! We could, for
example, always use the first three values of the hash array and map them to an
To derive which squares belong where, we have to be a little more clever.
In examining the Identicon example, we see a total of 25 squares making up the
image. Upon further inspection, we see that the graphics are mirror images. This
leaves us with only 15 unique squares (the rest are mirrored). Using 15 of the 16 values from our hashed array should allow us to map them to positions in the graphic.
The final step is to determine how a value determines whether a square should
be present or not. For simplicity's sake, let's use an odd/even check on the
values (essentially making them boolean) and use that to determine whether a
square should be present or not.
index.htmlhas everything we need as far as references to Identicon squares on the DOM
"row_index-column_index", mapping to the 5x5 Identicon DOM grid. If we wanted to change the color of the top right block in our DOM's Identicon grid, we could do it like this: