by Don Park
at 2007/01/21 13:58:48
Suggestion from Wes Felter and a good cup of coffee prompted me to write an implementation of Identicon using the canvas tag. If you are using a browser with canvas tag support (i.e. Firefox), take a look at the Identicon Canvas Test page. If not, the screenshot below will have to do because the example falls back to server-side identicon. I am going to hold off on deploying on my blog until I figure out how to get around a Safari canvas-related bug.
FYI, updated Identicon source package (version 0.3) includes the canvas implementation code. You can take a look at the javascript here. As you can see from the example and javascript file, identicon code is stored in canvas title attribute. Kinda funky but *shrug* it works.
Feel free to use this at your own website.
Comments
Don- this is cool. I'll sent it over to the graphics team at Mozilla.
Gen: Super.
Source Code Readers: ignore vertices2points and draw_grid functions. They were for debugging and no longer needed.
Source Code Readers: ignore vertices2points and draw_grid functions. They were for debugging and no longer needed.
Great, now I have to remember this image in addition to my various user names and passwords :o/
I love it.
HTTP Status 404 - /blog/donpark/donpark/files/identicon_canvas_test.htm. Description: The requested resource (/blog/donpark/donpark/files/identicon_canvas_test.htm) is not available.
It looks like you need a better feed reader, one that is inclined to work around the way Don creates his feeds:
http://www.intertwingly.net/blog/2007/01/22/Overriding-xml-base
http://www.intertwingly.net/blog/2007/01/22/Overriding-xml-base
Asbjørn: sorry about that. Apparently, TinyMCE's default configuration converts absolute URLs to relative URLs. Fixed.
Sam: I thought you should know that I thought of using identicon for IP when I saw your blog exposing them as-is awhile back when you were having trouble with spammers. Funny how things happen.
Sam: I thought you should know that I thought of using identicon for IP when I saw your blog exposing them as-is awhile back when you were having trouble with spammers. Funny how things happen.
Fixed? There still are three other occurrences in your feed... Check with the feed validator.
Putting a single attribute in your Atom feed would fix this once and for all... for that feed. The other feed will remain error prone in ways that are beyond the capability of Bloglines and Google Reader to fix (I disagree that this is an issue with whether or not this has anything to do with whether they consider the problem significant).
P.S. I like the identicon that your software has assigned me. Pleasingly blue and somewhat minimalist.
Putting a single attribute in your Atom feed would fix this once and for all... for that feed. The other feed will remain error prone in ways that are beyond the capability of Bloglines and Google Reader to fix (I disagree that this is an issue with whether or not this has anything to do with whether they consider the problem significant).
P.S. I like the identicon that your software has assigned me. Pleasingly blue and somewhat minimalist.
Sam, fixed as in "new posts will no longer get screwed up by TinyMCE", not all screwed up posts will magically get fixed.
Anyway, I added xml:base attribute to my atom feed. I still have reservations about using xml:base as anything other than a fallback mechanism.
Re your identicon, that certainly is interesting looking. :-)
Anyway, I added xml:base attribute to my atom feed. I still have reservations about using xml:base as anything other than a fallback mechanism.
Re your identicon, that certainly is interesting looking. :-)
Heh, This is cool. I could see this being used in forums.
LazyWeb: It works. :-)
The canvas version even seems to have better rendering than the server version.
A fallback technique to fix the Safari problem might be to have only the img tags in the source and then use JS to replace them with canvases before the images actually load.
These PNGs appear to be 24-bit color but they could be 1-bit, which would reduce the size by ~8x, making them small enough to fit in data: URIs. In fact, they would be so small that it might even be better to use GIF.
The canvas version even seems to have better rendering than the server version.
A fallback technique to fix the Safari problem might be to have only the img tags in the source and then use JS to replace them with canvases before the images actually load.
These PNGs appear to be 24-bit color but they could be 1-bit, which would reduce the size by ~8x, making them small enough to fit in data: URIs. In fact, they would be so small that it might even be better to use GIF.
Good suggestions, Wes. Thx.
I don't know what kind of joke you think this is. Both of my grandparents died in Concentration camps, and you identify me with a Swastika?
Not Funny: I have no reason to joke nor intentionally identify you with an identicon which may resemble a taboo symbol. It's just an algorithm with an unfortunate side-effect which I am working to correct. Please have patience.
Just looking
Just looking again
Read about you on Coding Horror
http://www.codinghorror.com/blog/archives/000774.html
And just had to stop by!
I'm a CRM consultant and agree that this would be a great way of visually representing MANY types of information.
http://www.codinghorror.com/blog/archives/000774.html
And just had to stop by!
I'm a CRM consultant and agree that this would be a great way of visually representing MANY types of information.
And I appreciate knowing that more people are able to look past my fingers and see where I am pointing. :-)
Wow, really funky!
Don,
Any plans on extending this to greater than 32 bits? IPv6 is right around the corner...
Any plans on extending this to greater than 32 bits? IPv6 is right around the corner...
Don,
I was playing with the js code and I found that a canvas with this title:
title="identicon -2044886757"
renders a perfect svastika.
I was playing with the js code and I found that a canvas with this title:
title="identicon -2044886757"
renders a perfect svastika.
Noted. Thanks Jose.
"Identicon Explained" post has some discussion on IP6 and rendering code now uses BigInteger so at least the interface is ready.
A suggestion to help eliminate swastika-looking identicons - assuming you have that goal - is to abandon radial symmetry and adopt horizontal or vertical axis symmetry. This would require minimal changes to the code, and would retain your three-block design.
Using a vertical axis of symmetry would have the potential to produce anthropomorpic figures, I think.
I can't imagine how you're going to eliminate swastikas if you're using radial symmetry, without resorting to really kludgy overrides in the code. You've got a simple, elegant process to generate identicons, please don't complicate it...
Using a vertical axis of symmetry would have the potential to produce anthropomorpic figures, I think.
I can't imagine how you're going to eliminate swastikas if you're using radial symmetry, without resorting to really kludgy overrides in the code. You've got a simple, elegant process to generate identicons, please don't complicate it...
In all honesty, I was just trolling and think it is pretty funny as unintended consequences go. It still seems a good idea to make sure an algorithm that identifies people can't produce anything easily confused with meaningful symbols.
Not Funny: Agreed. Is trolling much fun? I never got off on playing tricks on strangers. But then, with people I know, it's like an amusement park.
Really interesting idea.
Yes, good idea… but too bad my identicon is really bad, how do i re-seed it ?:)
Re: Not Funny - you were right, it wasn't. And it doesn't even look anything like a swastika! In fact, even on the jumbo thread, there was only one that really looked much like a swastika.
Don, please ignore the haters. This is a really good idea that will strength trust on the internet, and stop a lot of trolls from playing games. For a one in a few thousand (at least) chance of having a swastika appear, I'd gladly take that risk.
If you don't dare risk vaguely and slightly offending someone in the world when you speak, you had best enjoy the sound of others, as you will be able to say nothing while they rant.
Don, please ignore the haters. This is a really good idea that will strength trust on the internet, and stop a lot of trolls from playing games. For a one in a few thousand (at least) chance of having a swastika appear, I'd gladly take that risk.
If you don't dare risk vaguely and slightly offending someone in the world when you speak, you had best enjoy the sound of others, as you will be able to say nothing while they rant.
Oh, forgot to say, if you go to the rendering page, you need to turn your javascript on to be able to see anything.
That page shows my concern (as posted in the other thread on Client side auth) with the ease with which an HTML/javascript version of this idea could be subverted, as a scammer could easily simply show two copies of the server generated image when a man-in-the-middle by re-writing the code on the fly, or by simply inserting his own matching images, which only the most savvy of users would be able to spot, on his fake page(s).
That page shows my concern (as posted in the other thread on Client side auth) with the ease with which an HTML/javascript version of this idea could be subverted, as a scammer could easily simply show two copies of the server generated image when a man-in-the-middle by re-writing the code on the fly, or by simply inserting his own matching images, which only the most savvy of users would be able to spot, on his fake page(s).
Cool stuff.
FYI: I briefly played with using Identicon Canvas with the ExplorerCanvas which is Google's javascript library for supporting canvas with IE. There is some little rounding error going on that prevents the tiles from aligning perfectly. Have not spent the time to find out where it is going on.
FYI: I briefly played with using Identicon Canvas with the ExplorerCanvas which is Google's javascript library for supporting canvas with IE. There is some little rounding error going on that prevents the tiles from aligning perfectly. Have not spent the time to find out where it is going on.
Cool,
I wonder if somebody would care to make a favicon generating extension for Firefox? There are many web pages without an icon, but those small pics really help to identify bookmarks.
The extension would "just" need to replace the default icon in the location bar for every page that doesn't have a custom favicon. Although, it might be a bit problematic that many web domains may belong to one ip address. So, it might be better to take the domain name into account.
I wonder if somebody would care to make a favicon generating extension for Firefox? There are many web pages without an icon, but those small pics really help to identify bookmarks.
The extension would "just" need to replace the default icon in the location bar for every page that doesn't have a custom favicon. Although, it might be a bit problematic that many web domains may belong to one ip address. So, it might be better to take the domain name into account.
I see the identicon on the comments form now, is it the same when rendered? I will try it on my website developments. Awesome ideas here!
Nice... Only to see this little thing next to your name makes you want to post :)
Is it possible for someone to have an Identicon that is identical (not similiar but exactly the same) to another commenter who is NOT using the same computer? I once responded to comments of someone else on a blog who had the same Identicon as I did. The computer was not on a network it stood alone. I'm cetain that no one else was using the computer. Any answers.
Cool idea! I immediately thought of implementing this as a Firefox Extension to spice up web pages with colorful favicons if they don't have one by default, just like Aki suggested above.
Well, good news: it's done and its downloadable from http://www.cs.bme.hu/~dhanak/identfavicon. Good browsing!
Well, good news: it's done and its downloadable from http://www.cs.bme.hu/~dhanak/identfavicon. Good browsing!
How can I show "Your Identicon" ?
Copyright © 2006 Don Park
