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
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
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:
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