sakri rosenstrom blog

All along I was planning to do something with the circular wander that involved, surprise surprise, text. After seeing Neuroproductions beautiful Alice in Wonderland I snapped into action.

So, click the image below… You can punch in your (or another) Twitter handle, specify the number of “wanders”, click GO and watch the twitter profile pic being drawn by the tweets of the profile pics proud owner. The default is 10 wanders, but 40 or 50 run smooth if you’re impatient

So how did I get there? Like this. The following images are a random selection of people I follow on Twitter, rendered as I was progressing with the code.

I started off with just squares, which looked kind of nifty:

Here is @inspirit

@makc3d

My homie @theflashbum

I then moved on to text. I started off using regular TextField :

The mighty @wefail

While fun to watch, the text was practically unreadable, so I increased the font size and added a GlowFilter to create a fake stroke:

Here’s a full size detail, the text was too big (tough to recognize the image), but damn, the black text with white stroke all piled up like that looks hott!

I had some difficulty with the spacing of the text, so I moved on to the TextEngine instead of TextFields… immediately I ran into some bugs…

My old friend @sjespers

Totally unreadable, but kewl

I then got the text engine code working:

The ever inspiring @quasimondo

The problem with having a white or black stroke, is that in dark (or light) areas, the text is once again totally unreadable.

So I figured I would alternate the stroke color. If red<128 && green<128 && blue<128, I set the stroke to white, otherwise it's black:

Rock on @derschmale

The last adjustment was to set the alpha of the glowfilter to .3 . I was happy enough with that result to call it a day and blog

The guy I keep somehow not catching at conferences @flashaddict

Update:

I added a “save image” feature to the demo. I used the inbuilt JPGEncoder, so it’s slow, I know there are faster alternatives, but no time

Click here for the demo:

Update2:

I thought it would be fun to have a gradient in the characters instead of a solid color. Instead of grabbing the pixel which corresponds to the center of the new character, I grab one from the “top center” and “bottom center” of the new character. The result isn’t necessarily more “recognizeable”, but looks nice. I also added a couple more controls : font size, background color and font. That’s right, you can now render your image with Comic Sans! Rejoice!

A designer from work with a colorful profile pic @farfields

Tags: experiment, Flash, twitter

This entry was posted on Saturday, February 13th, 2010 at 9:11 pm and is filed under experiment, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.