Wavatars Process

By Shamus
on Dec 18, 2007
Filed under:
Projects

A few people have expressed interest in how Wavatars are made. Here is the long boring explanation for those overly curious souls. Again, if you want the WordPress plugin, go for it. If you want to adapt it for non-Wordpress use, help yourself.

All of the following is done in PHP: This isn’t exacly the most complex process in the world. Pretty simple, but the results are amusing to me.

Step 1 is to generate an 80×80 blank PNG using imagecreatetruecolor (). That image is then flood filled a color of a random hue (max saturation, low lightness value) with imagefill ().

wavatars-1.jpg

Step 2 selects a random “fade” pattern from a possible 4. This is a simple white PNG with a gradient mask that will cause the background to fade from that base color to white. This makes the icon a little more interesting, and adds some variety.

wavatars-2.jpg

Step 3 selects a random face shape from the possible 9. It loads in the mask of the chosen face and slaps it into place. I have a black border on the mask, because that looks nice.

wavatars-3.jpg

Step 4 selects a color for the head. Again, this is a random hue, max saturation, high lightness value. It then flood fills the image starting in the very center at 40, 40. Note that this creates an interesting limitation. The face has to be a single enclosed polygon that covers the center. This means you couldn’t make a head from two shapes which weren’t touching, and you couldn’t make a shape with a hole right in the middle

I could get around these limits by using imagefilter (IMG_FILTER_COLORIZE) instead of imagefill (), but I found that not all setups of PHP will support this, and that if it fails the wavatar will come out white. I figured portable, functional code was more important than something which would silently fail in confusing and unrecoverable ways for some users.

wavatars-4.jpg

For each mask shape, (circle, triangle, square, etc) I have a matching “shine” filter. This is another gradient-masked PNG of pure white, which is used to make the shape look glossy. It’s totally opaque in the areas with lots of shine, low transparency accross the main surface, and fully transparent where the “shadows” should be. I made these using the “emboss” tool in Paint Shop Pro 8.

Step 5 puts this shine image into place. Note that this step is optional. (You’ll need to have the know-how to edit the source if you want to skip it, though.) If you skip it, the Wavatars will look a little more cartoony and a little less like they’re made of iPod plastic.

wavatars-5.jpg

Step 6 selects a random set of eyebrows and slaps them on. No fancy filters or coloring this time. The brows go on before the other features so that they will appear “behind” eyeglasses.

wavatars-6.jpg

Step 7 selects a random set of empty eyes / eyeglasses and slaps them into place.

wavatars-7.jpg

Step 8 selects a set of pupils and adds them.

wavatars-8.jpg

Step 9 adds the mouth.

wavatars-9.jpg

The last step is to resample the image from the default size to the icon size the user selected (assuming they differ) and save the resulting image to disk.

That’s it. All done. You could, if you wanted, add all kinds of additional shapes to any of the categories, or replace ones you don’t like. If you change the number of available images, you’ll have to edit the source code so that the plugin knows how many images are available. Don’t worry – you can do this even if you don’t know PHP. Just look inside of wavatars.php and near the top you’ll see a few lines:

define("AVATAR_SIZE", "80");
define("WAVATAR_BACKGROUNDS", "4");
define("WAVATAR_FACES", "11");
define("WAVATAR_BROWS", "8");
define("WAVATAR_EYES", "13");
define("WAVATAR_PUPILS", "11");
define("WAVATAR_MOUTHS", "19");

Just change the number in quotes to reflect the number of images you’re using, and you’re all done. You can modfy Wavatars just a bit, or replace them with something totally different.

Enjoyed this post? Please share!



A Hundred!15115 comments. Quick! Add another to see if this message changes!

From the Archives:

1 2

  1. Jérôme says:

    Cool concept!

  2. Jérôme says:

    And I have glasses so it fit perfectly :)

  3. Adam says:

    Well, I think all the “Just Testing” posts are funny…


    darn it can’t remember what mine looks like.. lol

  4. Seracka says:

    I just want to see what mine would be. Sorry about the ‘just testing’ post.

  5. spelley says:

    I love PHP sometimes. The GD library is such a powerful tool for this type of thing.

  6. JohnyMcMuffin says:

    I am curious as to what my avatar is

  7. JohnyMcMuffin says:

    i love my monocle, i gives my posts a sense of class

  8. Davesnot says:

    I have to go disable my gravatars!

  9. Sivi says:

    Hm…interesting. Well, nothing else to contribute, just seeing what my wavatar is.

  10. Marty says:

    Okay, I’m jumping on the bandwagon… what exactly will I look like?

  11. Marty says:

    The next question is:

    Will “Wavatars” influence the “tone” of the post?

    Not how it was written, but how it is read. Do I now read like a disgruntled curmudgeon?

  12. Fred Mischler says:

    Interesting, and probably effective too, to make a comment list more lively. What’s mine look like?

  13. Fred Mischler says:

    Oy, do I have a mean case of the winds . . . . hehehe

    “I will NEVER smile again, Dammit!”

    Why didn’t I get a monocle? Curses!

  14. Fizban says:

    *hops on the testing bandwagon*
    Also, first post on this site, hi all!

  15. Mark says:

    *posting to see mine*

    I have to say, they look very professional for being made in such a simple way (even if the code behind it isnt that simple in the end)

  16. Mark says:

    Oh no, I’m angry, better try another of my emails!

  17. Mark says:

    coooooooooooooool. 8-D

  18. Eric J says:

    I’ve got a Gravatar that I like, so I’ll test my work address.

  19. Mongrel says:

    Just another “What’s my Wavatar” post…

    Move along, nothing to see here

  20. AlienHunter says:

    Sorry, Can’t resist…

  21. Malkara says:

    What’s mine look like?

  22. Annon says:

    My experience with PHP is…mixed. I had tocode some stuff ti access an SQL database for one of my CS classes, and I would have liked to kill the computer. Looked really nice (and felt really great) when it was done, though.

    As for your code–it’s one of those things where my first reaction to it is “why hasn’t anyone thought of this before?” It’s a really great idea that takes very little complexity to code. Good jab.

  23. Annon says:

    And now I have to post again, because my wavatar looks like a wight with a monocle…

  24. Kleedrac says:

    Testing wavatar … must port to perl/python … also possibly a joomla version for my blog ;)

  25. brainsolid says:

    great plugin, but what I must do if I want use only black and white colors? Can you help me, becouse I not so good in php?

  26. […] and inserts a face shape, eyes, mouth, and other facial features into the image. Here is the full description of the image creation process. The resulting images are used to create avatars used in the WordPress Wavatars […]

  27. Brian says:

    Sorry, a wrong post from my side. Sory!

  28. JayGr says:

    Huh… Thats cool. I should really start trying to teach myself PHP again, I just find learning (any) programming language incredibly boring without an immediate application for it :/

  29. Libq says:

    You should have a Wavatar generator page so people don’t post “trying it out” posts, like this one!

  30. Logan says:

    Can somebody PLEASE set up a web site where we can enter in an email and see what the wavatar would look like? I can’t test mine because I already have a Gravatar account!

  31. Nothing says:

    I just wanted to see what mine looked like.

  32. NB says:

    Wanted to see what my Wavatar looked like.

  33. Sandcat01.00 says:

    IIInterestiing!

  34. Blahzors says:

    Jus’ checkin’ to see what “Wavatar” (sigh) shows up…

  35. boogity says:

    hrrmmm… make me wavatar, you will… like it, i may…

  36. stot says:

    I would like to see my wavatar

  37. stot says:

    what is my wavatar

  38. kim says:

    just checking mine out…:)

  39. Olivia says:

    looking at my wavatar…

  40. Phil says:

    oops, used one with a gravatar, el testo dos…

1 2

One Trackback

  1. By Sweet Hacks - Vol I | GrokCode on Thu Mar 13, 2008 at 11:00 pm

    […] and inserts a face shape, eyes, mouth, and other facial features into the image. Here is the full description of the image creation process. The resulting images are used to create avatars used in the WordPress Wavatars […]

Leave a Reply

Comments are moderated and may not be posted immediately. Required fields are marked *

*
*

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun.

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>