{"id":1463,"date":"2007-12-18T12:59:37","date_gmt":"2007-12-18T17:59:37","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=1463"},"modified":"2007-12-18T13:00:44","modified_gmt":"2007-12-18T18:00:44","slug":"wavatars-process","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=1463","title":{"rendered":"Wavatars Process"},"content":{"rendered":"

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<\/a>, go for it. If you want to adapt it for non-Wordpress use, help yourself. <\/p>\n

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.<\/p>\n

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

wavatars-1.jpg<\/td><\/tr><\/table><\/p>\n

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. <\/p>\n

wavatars-2.jpg<\/td><\/tr><\/table><\/p>\n

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. <\/p>\n

wavatars-3.jpg<\/td><\/tr><\/table><\/p>\n

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 <\/p>\n

I could get around these limits by using imagefilter (IMG_FILTER_COLORIZE)<\/code> instead of imagefill ()<\/code>, 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.<\/p>\n

wavatars-4.jpg<\/td><\/tr><\/table><\/p>\n

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. <\/p>\n

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.<\/p>\n

wavatars-5.jpg<\/td><\/tr><\/table><\/p>\n

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.<\/p>\n

wavatars-6.jpg<\/td><\/tr><\/table><\/p>\n

Step 7 selects a random set of empty eyes \/ eyeglasses and slaps them into place.<\/p>\n

wavatars-7.jpg<\/td><\/tr><\/table><\/p>\n

Step 8 selects a set of pupils and adds them. <\/p>\n

wavatars-8.jpg<\/td><\/tr><\/table><\/p>\n

Step 9 adds the mouth.<\/p>\n

wavatars-9.jpg<\/td><\/tr><\/table><\/p>\n

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.<\/p>\n

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:<\/p>\n

define(\"AVATAR_SIZE\", \"80\");
\ndefine(\"WAVATAR_BACKGROUNDS\", \"4\");
\ndefine(\"WAVATAR_FACES\", \"11\");
\ndefine(\"WAVATAR_BROWS\", \"8\");
\ndefine(\"WAVATAR_EYES\", \"13\");
\ndefine(\"WAVATAR_PUPILS\", \"11\");
\ndefine(\"WAVATAR_MOUTHS\", \"19\");<\/code><\/p>\n

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. <\/p>\n","protected":false},"excerpt":{"rendered":"

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:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[69],"class_list":["post-1463","post","type-post","status-publish","format-standard","hentry","category-projects","tag-wavatars"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/1463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1463"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/1463\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}