Avatar Portraits .:. kentbrewster.com

Some generative Canvas magic, with a little help from the Twitter API and YQL's instant-data-URI converter. To try it out, enter your Twitter nickname down there where you see mine, which is kentbrew.

What's Going On Here?

We're calling the Twitter API from Yahoo! Query Language, receiving an image URL for your avatar, converting it to a data:uri, and returning its base64-encoded value as JSON with a callback.

Then we create an image on the client, load it with the data YQL gave us, and stretch it to fit our (comparatively very large) canvas tag.

Since we've created the image locally, the usual canvas security restrictions don't apply and we're free to sample pixels. We do this, collecting color values and positions, and then we start drawing circles with random sizes and tiny random offsets from where each color sample was taken.

We let this run for about 20 seconds; this is long enough to develop most of what you're going to get, while leaving some of the interesting batik/pastel texture intact.

Things to Do and Notice

The result can be surprisingly complex and fun to watch. I've noticed that intensely-colored logos seem to work nicely; see Etsy, ProgrammableWeb, YCombinator, BoingBoing, or Google. Also pretty awesome: those EightBit.Me avatars. Adrianocastro, noahmittman, and ladyfox14 are all looking great.

The default image is my own Twitter avatar. If you're a fan of this sort of thing, you might want to consider following me.

If you'd like to save one of these images, smarter Web browsers like Firefox will allow you to drag and drop to your desktop or save it the way you usually save an image.

The handwritten font was made by the talented Kimberly Geswein and distributed through the Google Web Fonts project.


So far this works on everything I've tried, including my iPhone. As far as I know this should run on IE; I think I've done the right things with the Excanvas library.


This one's pretty straightforward; if you were to save this page to your desktop and drag it into your browser, it would come right up and run. There might be 75 lines of JavaScript in here, with a bit of CSS to make things pretty.

As always, please have fun with this, and do let me know how it goes.

Copyright Kent Brewster 1987-2019 .:. FAQ .:. RSS .:. Contact