What do you get when you combine Digital Identity, MD5 Hashes, the Canvas element, JQuery and Quilting? Answer: My first JQuery plugin – “Identicon5″ for want of a better name.
Identicon5 is a JQuery plugin that takes an MD5 hash and converts it to a unique image. It’s called Identicon5 since it works through the HTML5 Canvas element.
Working Demo is here: http://francisshanahan.com/identicon5/test.html
Project page is here: http://francisshanahan.com/index.php/identicon5
JQuery Plugin page is here: http://plugins.jquery.com/project/identicon5
Identicons provide a nice visual representation of a user’s identity, that’s unique to that user, without divulging any private information. You’ve probably seen them in use on many social websites e.g. http://stackoverflow.com
Identicons are the little geometrical profile images for certain users. Normally Gravatar.com serves up an image based off the MD5 hash of your email address. If you’ve defined a profile image it’ll serve that but if not it’ll show your Identicon, this blog itself is Gravatar enabled as are most WordPress installations.
EXCERPT from Wikipedia
An Identicon is a visual representation of a hash value, usually of the IP address, serving to identify a user of a computer system. The original Identicon is a 9-block graphic, which has been extended to other graphic forms by third parties some of whom have used MD5 instead of the IP address as the identifier. In summary, an Identicon is a privacy protecting derivative of each user’s IP address built into a 9-block image and displayed next the user’s name.
A visual representation is thought to be easier to compare than one which uses only numbers and more importantly, it maintains the person’s privacy.
The Identicon graphic is unique since it’s based on the users IP, but it is not possible to recover the IP by looking at the Identicon.
If you have page with a lot of Users listed, either because there are a lot of contributors on the thread, you might end up with a lot of Identicon image links. Each image is small, about 1kb and carries an HTTP connection as additional overhead. This isn’t really a big problem given today’s bandwidth on the Desktop but on my Droid it becomes an issue. Besides, with HTML5 we can do better.
Identicon5 takes the same MD5 hash value and draws the image dynamically using a Canvas element within the browser. This eliminates the HTTP call and saves you 1kb per profile image. If Canvas is not supported it’ll degrade into a standard img tag linking to Gravatar.
How does Quilting enter into it? Don Parks came up with the notion of using small tiles, arranged in a 3×3 grid per Identicon. The process uses a selection of smaller shapes in each 3×3 grid square and either rotates it or colors it depending on the input value. This is essentially how quilts have been made for hundreds of years.
I’m sure this won’t be the most popular jQuery plugin ever but the idea of applying newer technologies such as HTML5 Canvas to solve a problem that would traditionally have been fixed with a network call was very interesting to me so just had to hack it together.
This is a very tangible example of how HTML5 will make the web more scalable.