Twitter Avatar Portraits
Capital of Nasty, an Electronic Magazine - ISSN 1482-0471
Tuesday, August 9, 2011 at 12:00 (5635/46)
Web developer Kent Brewster has created this really cool HTML5 Canvas script that creates a painted-like portrait based on your Twitter avatar.
From the blog entry:
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.
Please enter your comment below. Hit Return twice (leaving a completely blank line) between paragraphs.
Use [b] for bold [/b] and [i] for italic [/i]. All other HTML commands will be stripped.
Your comment is (almost) immediately placed online as soon as you hit 'Post'.
Specifying an email address is optional. In the interests of your own privacy, CoN discourages you from doing so. Further, think twice about revealing any other personal information including telephone number, real name, exact address or blood type.
* A red asterisk denotes a required field.