Wavatars Development

By Shamus Posted Sunday Dec 16, 2007

Filed under: Projects 136 comments

After I showed off my new Wavatars WordPress plugin on Saturday, a lot of people posted just to see what their wavatar looked like. I feel bad, but I’m afraid that initial system had to go and as a result, everyone’s Wavatar has been changed. This was for a good cause. I’ve moved away from PHP generated random numbers to random values derived directly from the hash of the email. To translate out of programmer babble: The plugin will now generate the same wavatar for you no matter where the plugin is running. Different websites running the same plugin will give you the same, predictable results.

I also added a bunch of new parts for greater variety, so the plugin can now generate 956,384 different shapes in 57,600 different color combinations for a total of 55,087,718,400 unique Wavatars. That should be enough combinations for now.

I’ll be releasing the plugin later this week. If you have a WordPress blog then you’ll be able to have wavatars on your own site. I’ve ironed out the installation problems, so that you should be able to simply upload the thing and turn it on. (In theory.)

Also, I can’t take credit for the idea, which I first saw at implemented as MonsterID. (Hat Tip: MetaBLOG.)

 


From The Archives:
 

136 thoughts on “Wavatars Development

  1. DGM says:

    Very nice.

    If you feel like putting more work into your site after this, is there any chance we could get a preview function for comments?

    1. drew.. says:

      Truly awesome experience running into Wavatars and the general feel for the post and the comments.. awesome!

      1. drew.. says:

        damn, i need to user another email that is not gravatar-bound..

  2. Shamus says:

    DGM: I’d like to, but since it’s email and not IP based I don’t have the required value when the page is generated.

    Actually, now that I’m thinking about it, maybe there would be a way to do it with some fancy Javascript. I’m rubbish at Javascipt, though. You’d need a way for the user to fill out the comment email field and hit “preview” to see the resulting wavatar. Somehow you’d have to capture the value of the email field and send it to a little 60×60 IFRAME, which would be a PHP page designed to take the form input and show the resulting avatar.

    I guess the only part I can’t figure out is how to grab the field contents and stick it into the query string.

    Hmmmmm…

  3. Marauder says:

    looks good so far…

  4. DGM says:

    “You'd need a way for the user to fill out the comment email field and hit “preview” to see the resulting wavatar.”

    Sorry, I may have been unclear. I don’t want to preview the wavatar, I want to preview what I typed. For spellchecking, making sure my tags worked, etc.

  5. Jim says:

    Hah, my new Wavatar looks like its having some major issues. Note to self: turn Gravatar back on tomorrow, lest I get used to that face staring at me.

  6. James says:

    Now I’ve got to get a Gravatar so I don’t have to look at this this next time I post…

  7. ZzzzSleep says:

    It all looks good, Shamus. Well done on the wavatars.

  8. Sharpie says:

    Aww, I liked my old one, I hope this one is as good!

  9. Joe says:

    DGM- ditto on the previews. It’s not quite so important now that there’s the bit of “permitted tags” right above the comment… but it would be kinda nice.

    And I keep thinking, it’s sort of interesting… If you don’t feel like creating a gravatar, and want to “browse” for a nice wavatar, you can just keep using e-mail addresses with something different after a +. (many e-mail systems disregard that. I know gmail does.)

  10. Daemian_Lucifer says:

    55,087,718,400 unique Wavatars,eh?So,at a rate of about 3 minutes per each e-mail for generating it and posting here,Id need about….314427 year.Ok,time to get bussy!

  11. Nathaniel says:

    Lesse if this new one is as good as my old one…

    Also, I noticed that on the dark theme, the quotes in some of your posts have the same background color. This is most apparent in the D&D Campaign posts.

  12. food4worms says:

    It’s pretty easy to get the values off your form. Here’s something that should work on this page:

    function show_form() {
    var author = document.commentform.author.value;
    var email = document.commentform.email.value;
    var url = document.commentform.url.value;
    var comment = document.commentform.comment.value;

    alert(
    ‘author = ‘ + author + ‘\n’ +
    ’email = ‘ + email + ‘\n’ +
    ‘url = ‘ + url + ‘\n’ +
    ‘comment:\n’ + comment
    );
    }

    If you wanted to do a preview thing. The easiest would be to submit the form to a “preview page” with a “accept” or “deny” button on it. Have that page then submit all the fields to wp-comments-post.php on accept, and return to the blog page on deny. That wouldn’t require any javascript at all.

  13. Bowmore says:

    They’re cute, but I was kinda hoping they’d be dice…

  14. Ryan says:

    Love the all the updates, Shamus!

  15. Tylhandrias says:

    I’m on yer webpage, testing my wavatar.
    :D

  16. Nathan says:

    testing!

  17. Steve says:

    I don’t know. Do you think the wavatars fit in well enough with the dice theme of the blog?

  18. SiliconScout says:

    PBBBBT!!

    =)

  19. Jimmie says:

    I like these. They’re kind of cute! I’m not sure they fit on m blog but they are geeky-cool.

  20. Nathanael says:

    testing

  21. BrikZ says:

    Sheer Curiosity Drove me to this. Damn you Shamus, damn you and your kooky website coding. ;)

    A fine job tho, almost makes me wish i stuck w/ CS in college, almost.

  22. Sarah says:

    I like the new text for the “anti-spam word” protection code…doodad…..thingy.

    You know what I mean.

  23. Joel D says:

    Just wanna see mine, without a big-ol’ search…

  24. Davesnot says:

    yrdyomh 2.3.4 (that’s testing 1,2,3.. for those wondering)

  25. Chaos Fact says:

    Just checking out my Wavatar too.

  26. Rich G. says:

    Never heard of a wavatar until now.
    Is it luck of the draw about the security word?

  27. Davesnot says:

    Great.. _Now_ my Gravitar decides to start working.. lovely.

  28. Davesnot says:

    So.. my wavatar is..

  29. sleepyfoo says:

    also just testing today

  30. Kristin says:

    Hoping for a better wavatar!

  31. Chris says:

    Let’s see, let’s see…

  32. Scott says:

    Davesnot: I would guess your Gravatar was probably not working because of capital letters in your e-mail. Shamus seems to have fixed it. Thanks, Shamus!

  33. Griffin says:

    I just failed my saving throw against posting a pointless comment just to see my wavatar. Sorry?

  34. Snook says:

    To prove this post, I wanna say: Damn you Shamus, for getting me interested in D&D!

  35. Crusader Corim says:

    Well, I don’t post often, but now that it is ironed out, I’ve got to know what face I get to display here.

    You know, for science.

  36. straechav says:

    I second that, this post is purely for science. It’s not about curiousity, it’s about putting order in the world, and for the betterment of mankind.

  37. Bosun Bumm says:

    I can’t wait to see my very own personal wavatar

  38. Bosun Bumm says:

    Ooo! I love it

  39. Zaghadka says:

    Hmm. The default Wavatars remind me of a game called “Snood.”

  40. Zaghadka says:

    This Weblog looks deep within my soul and assigns me a wavatar based on the email with which I joined. -Homer Simpson, sort of…

  41. ngthagg says:

    This will work fine until some jerk takes the wavatar of someone else and uses it as their gravatar, along with the person’s name, just to confuse people.

  42. Nazgul says:

    Testing… Please oh please nothing boring or dorky… An evil monocled one would be good LOL…

  43. Nazgul says:

    Gaaaaaaah!

    (beats head on desk)

  44. Snook says:

    I think my campus e-mail one looks cool. Sunglasses and an “o-face” for the win2k!

  45. Snook says:

    Oh damnit I’m gonna have to stick with this one now, it’s too hilarious!

  46. Bizarre says:

    I guess if all the cool kids are doing it…

  47. Dr-Online says:

    Test 1, test 1, 2

  48. CryptoKnight says:

    Testing my wavatar, like so many others.

    Having fun, Shamus?

  49. Kevin says:

    Shameless wavatar check.

  50. Kris says:

    So… Let’s see how this thing looks!

  51. mookers says:

    aw, I liked my old wavatar better. Still, they’re awesome :)

  52. Stubby says:

    Let’s see what happens…I’m hoping for a slightly more cheerful look than last time :D

  53. JB says:

    Had of course to check, I did.

  54. silent_death says:

    Wavatar test ^^

  55. dwarfenhoschi says:

    also testing

  56. QE says:

    Shamus, your comments feed (?feed=comments-rss2) is broken, as of the 15th. You’ve got a long title including malformed stubs for lots of entries and no description.

  57. Denzine says:

    Since I don’t much like posting without some kind of content, here’s a link to an unfinished novel set in the future of the Legends of the Five Rings universe circa 2000 or so.

    http://www.lowfierce.com/kazenoshiro/Rokugan2000/l5r2k/stryindx.html

  58. whitehelm says:

    I wonder what mine looks like.

  59. Germelia says:

    … because everyone’s doing it. And I’m curious.

  60. Vegedus says:

    But I liked my old one :(

  61. Randomscrub says:

    I am curious also…

  62. Randomscrub says:

    Not too shabby, even if mine does look like it’s giggling…

  63. Ravs says:

    And as I’d like to see wavatars too here’s my bit of random content which shows you how to make a digital whiteboard using a wii remote and a couple of red led lights.

  64. Fuloydo says:

    Here goes…

    1. Carrie says:

      I might be beating a dead horse, but thank you for ponstig this!

  65. Lochiel says:

    I R N Epic Thread :)

  66. Rob says:

    These wavatars are great ideas Shamus. I’m rolling the dice here and hoping mine turns out alright! :)

  67. Heather says:

    Not that I post here much, but I just have to know what my wavatar would look like…

  68. Heather says:

    haha Wow, that’s freaky. It’s got my specs AND my evil grin down pat. :)

  69. Zukhramm says:

    Hope mine looks good.

  70. Amy says:

    Just wondering what my wavatar will look like.

  71. Zippy says:

    Wavatar test

  72. Zippy says:

    Wavatar test?

  73. Feylamia says:

    Nice! I’ve been I’ve been thinking about installing a gravatar-plugin on my blog for a while, but never did so as a lot of people just don’t have them. So yay, the Wavatars will make both gravatar users and regular non-geeky people happy. :D

  74. PinkCoder says:

    Wavatar test

  75. Deoxy says:

    Sweet! I like the new Wavatar thing… but you might want to add caching to it (this page has been loaded for over a minute, but it’s still filling in wavatars…. ssssllloooowwwlllyyy).

  76. Shamus says:

    Deoxy: It does cache them, so that isn’t the problem.

    I loaded this page and it took 8 seconds instead of 3, so I am seeing an effect. The page loaded normally, and then the little icons appeared one at a time.

    My first instinct is to blame Gravatars.com, since it redirects back here to the wavatar if a Gravatar isn’t found. That trip might be adding some unwanted overhead.

    I’ll investigate later today.

  77. Visi says:

    Well, I didn like my old one anyway.

  78. Visi says:

    I do like that one though! This thing is shiny. :D

  79. Well, let’s see if I get as good a wavatar this time as last…

  80. Ben says:

    Hmmm… not experiencing much lag from here with the wavatars. It’s a great idea, thanks for making it!

  81. Clyde says:

    Jeez, I hope this one doesn’t look as constipated as the last wavatar did!

  82. Clyde says:

    Oh, man! Even worse! It looks like he ate 20 pounds of iron rations, heavy on the cheese! Back to the gravatar!

  83. Strangeite says:

    That really is a great plug-in.

    Good job!

  84. Davesnot says:

    I say Gravitars be damned… I’d rather have a wavatar.. now I’ve had to dig up an all-but-defunct e-mail address to get my wavatar because that gravitar decided to start working… akk!!

  85. Ryan says:

    Sorry but I must try out how a wavatar looks like based on the fact that I want to see one I create with this type of message.

  86. BlackJaw says:

    I got a bad feeling about this…

  87. scragar says:

    you try some simple javascript like:

    function fillWavatar(){
    var foo = document.getElementById("email").value;
    document.getElementById("previewIMG").src = "previewimg.php?email="+foo;
    };

    that way you can write a PHP script to handle deciding on the image based from the email, certainly would be a better solution for you to edit than entirely javascript.

  88. BlckDv says:

    Beg for mercy, poor server, as we base minions test our Wavatars!

  89. lxs says:

    Admit it, you’re just fishing for comments!

  90. Shinjin says:

    That’s a lot of wavatars!

  91. Olly says:

    OK, I just have to know what my Wavatar is now…

  92. Olly says:

    I love it!

  93. James says:

    Curious like a cat.

  94. Matt` says:

    hmm.. I have a feeling I’m going to need to disable my gravatar somehow (just came from their site and there appears to be no way of removing a gravatar or deleting your account.. bugger

  95. Matt` says:

    Let’s try sticking in a plus..

  96. Matt` says:

    ooh, good one
    can’t resist a little experimentation though

  97. Matt` says:

    that sucks…
    ok, this is the last, I swear

  98. Matt` says:

    middle one turned out to not be broken… I actually kinda like it

  99. Matt` says:

    So.. addicted.. can’t.. stop commenting

  100. Ranneko says:

    Because I too want to see what mine looks like.

  101. Matt` says:

    I could use these things for different moods…

  102. Eltanin says:

    Yep, I’m one of the sheep. What do I look like now? I just need to know what will be hidden below my gravatar.

  103. Eltanin says:

    Ooh, wow. I’m snaggle toothed with glasses. No wonder my avatar looks so unhappy.

    I like the wavatars Shamus though I think I’m going to go back to my gravatar.

  104. NobleBear says:

    Avatars are a really great idea, Shamus. Thank you for setting it up.

    I’m trying my gravitar first before switching to a wavitar.

  105. NobleBear says:

    D’oh, I’m now a piece of geometry. Ah well, only three sides means I’ll render well.

  106. Adam says:

    Shamus, you’re awesome.

  107. KMJX says:

    No mercy for Shamus’s server!

  108. lplimac says:

    Server overload, man the life boats!

  109. Cthulhu says:

    testing…

  110. Lode says:

    Sorry for the spam, but I couldn’t resist to test mine out :)

  111. Evilllama says:

    o/` I feel pretty…

  112. Wavatar Test! says:

    testing!

  113. Ravs says:

    wavatar test (I hope it’s a happy face!)

  114. kanthalion says:

    Just had to jump on the bandwagon

  115. Dank says:

    Ignore this comment. wait, too late!

  116. Dank says:

    Oh, now that is wickedly rockstar cool.

  117. russellmz says:

    i am curious

  118. Bear says:

    test-a-mundo

  119. BlckDv says:

    Trying this out with a new email, see if it is any better than the old one.

  120. Griffyn says:

    testing…1…2…3

  121. Logan says:

    Testing

    Lol, not exactly what I was hoping for but alright.

  122. Logan says:

    Let’s try my other email…

    oh geez. Apparently turquoise is my color. :P

  123. Anna says:

    what will it look like?? so exxciteddd!

  124. Anna says:

    why so sad…?

  125. jaewoong says:

    cool~!

  126. Wtf says:

    It could be more beatufitul…

  127. Jonathan says:

    Lets see

  128. ixsan12 says:

    Love the all the updates, Shamus

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>

Leave a Reply

Your email address will not be published. Required fields are marked *