/Word stream

Figured I’d post my acting debut here. I’m the guy wearing the green shirt and frowning at the dog.

In January 2010, Brazilians will finally see a Flash-related Adobe-supported event in Brazil with Flash Camp Brasil. To avoid repeating what has been said, here’s what Lee Brimelow had to say about it:

In about a month and a half I will be traveling to beautiful Maceió for Flash Camp Brasil. This is shaping up to be a great event with an impressive group of speakers. In addition to many local speakers there are several international speakers coming including myself, Joshua Hirsch from Big Spaceship, and fellow evangelist Danny Dura. Oh and did I mention that Maceió is a tropical paradise with crystal clear water and beaches?

The event is set in a beautiful city, in the peak of the summer, and will see a bunch of great presentations (not to mention, it’s really cheap!), so be sure not to miss it!

Due to personal logistic shenanigans I won’t be able to be there, but I’m certain it’ll be awesome to have an event of this magnitude finally landing in Brazilian soil – in a sense, we’ve been too far apart from the rest of the development community.

Here’s the intro video, by the way.

Awesome.

Last year I finally delved head-first into the wonderful world of Processing. It was one of those (many) times I could college as an excuse that allowed me to spend some more serious time with something that wasn’t directly related to what I do on my day-to-day work. I used the time to create some small experiments to learn the platform, and to help some colleagues with their Processing-based graduation projects – that is, never creating something final, or by myself, other than random experiments.

That’s why when the São Paulo-based band Omega Code started their open poster contest I knew that, instead of using normal illustration editors, I wanted create an entry using Processing. Additionally, my previous experiments were all based in video or real-time functionality, so creating a poster – static, high-res – would be great for a change.

The first idea that popped in my mind when I thought about what I wanted to build was that I didn’t want to use any kind of external asset; so no image composition or anything, I’d do it all with typography.

I did have to use one image, however. I created a black&white version of their template document, which contains the band logo, to serve as a guide of sorts for my poster.

Omega Code poster template

Basically, this logo is used as a map for where I want to have different colors.

The second idea was what to use. Now, I’m an atheist, but I know from Xenogears Fallout 3 that the whole “Omega” thing comes from The Book of Revelations, and I figured the text of that chapter of The New Testament would fit the poster (and the overall concept of the contest) well.

I went to look for the Biblical text and, thankfully, there’s no shortage of Bible-based content on the web. More precisely, I found this website which contains the full text of all chapters from the Christian Bible, including the one I wanted, the Book of Revelations. And what’s best – in its original language.

The one I wanted was written in Greek, however. That poses a problem, since most fonts – including general use fonts like Arial – do not include the glyphs needed for proper Greek rendering. So it was with a big surprise that I found Gentium, a font made specially for Greek rendering – and with a free license to boot – that I could use for the poster. It looks beautiful, too.

With the ingredients ready, I went on to create the poster by writing Processing code.

As strange as this sounds, the most difficult part was actually getting the text rendering to work.

I created a text file containing the entire Book of Revelations, and created a quick sketch that could read random words from it and render those to the sketch area. The problem wasn’t in reading this text file, or getting UTF-8 based strings to read and write properly. The real problem was with getting them to render correctly at the sizes I wanted. This is because processing renders text as images, as is the norm with platforms that are meant for realtime graphics. That is to say, you have to generate raster image “tables” from true type files, posing a problem with quality: too big of a text, and it’d be blurred; too small, and it’d look awful.

Of course, I could generate different font files, one of each size of the funt, but since I wanted to use all kinds of text from size 5 to 300, this wasn’t entirely feasible.

The first thing I tried was to find some Processing library that used text as vector data – meaning it could work like, say, Flash, where you can scale text to your heart’s content without worries about quality. This proved a big problem, however, as the two such libraries I tested had problems of their own – incompatibilities with the Processing version I was using, I suppose.

In the end, I gave up on trying to use different libraries and went back to Processing’s original font support. I ended up doing something absolutely awful – regenerating the font table to memory every time the font size changes. Since this was all meant for a high resolution, non-realtime poster, it served its purpose well, but it was really slow. I started caching the fonts for each size after a while (at the expense of a lot of memory) and restricted the available font sizes to 50 variants, and this made things faster, but still this wouldn’t be possible for realtime text rendering.

With all set on the text rendering features, I went on to creating the actual poster. The first thing I did was write the start of the chapter on the background, as some simple, running text. This was meant to give some texture to the poster’s background.

Then I made the sketch read random points from the “template” map (the one in black and white). If the result was a black point, it’d paint a random word on that same position on the final image. The result was as such:

This worked, but it wasn’t really what I wanted yet. I wanted something a bit more random, to give it more texture, even if always type-based. I made it randomize the size of the text as well too, and made it so that if the source background was white, the stamped text would be a very transparent black instead of simply ignoring that point. This was the result:

Still not quite what I wanted, I made the algorithm check the template image to find the brightest color from the entire square that the new word would occupy (instead of just the center point). Now, I’m the first to admit this was done in a very dumb way – it runs the entire perimeter of the text bounding box, checking for the color of each pixel – but it served its purpose well, and heck, this was for a non-realtime sketch, I could afford to be optimization-challenged.

After implementing the box color checking feature, this was the result:

After solving a few problems that would get the random font sizes to get stuck in the same size forever, I decided to add some more features to the background. For a first pass, instead of being fully white, the further from the band symbol’s center the new word was, the darker it would become – this would give the impression of a white glow around the band’s symbol. After running the sketch for a long time – it added a few words every frame – this was the result:

Despite having way too much solid gray, that was almost the result I wanted. Next, I added some better pattern to the background, by making the text color actually vary depending on its angle from the symbol’s center, creating the impression of rays coming out of the symbol. This was the result, still in grayscale:

Finally I added some color to it. I didn’t really want to make it too colorful, and after testing with the above image in Photoshop for a while, I came up with a combination that gave it the impression I wanted, of some sort of thing that’s coming out of an old book or printed on an old paper.

The above image also shows a slightly different color detetion algorithm, as I made the text color detection a bit erratic (by using a smaller color selection rectangle). This was meant to make the logo look tighter, even at the expense of the precision of its forms. This is subtle, but I think it looks a lot better.

The final step was generating the image to be used. This image was supposed to be pretty big; thankfully, I build the sketch in way that it’s based on a global scale variable, so while the tests above were ran on a smaller version, I could simply change the scale and let it run to create the final image.

Like I said, the sketch generates the final poster by adding new words to it on every frame. The sketch adds 5 new words on every frame rendered, and runs the sketch for 20,000 frames (because I found the ideal result with 100,000 words randomly placed). But since it’s manipulating a image with dimensions of 2953 x 4185 pixels, it’s a rather slow process – the final image took almost 3 hours to be generated (see this video to understand how it works).

And heck, there’s even a Twitter log with more test images if you want to see them, as I was posting to it while I was working on the final poster.

The final result is pretty simple, visually speaking, but I think it solves the concept well. And while it uses an image as its base, it’s still entirely based around typography, as even the background patterns are created by adding a lot of text with low opacity, so I think it responds well to this self-imposed restriction too.

For more information about the poster, see all fan-made entries to Omega Code’s poster contest, including the above one. The contest goes until March 31, and everybody can send their entries. You can also see the original posters, made by several renowned designers.

This entire post was made because I wanted to explain what the poster contains, and specially because I wanted to make the Processing source code available: download it here. It includes all assets used (font file, image map, and source text file). You’ll obviously need Processing to run it.

Caveat: the above is exactly what I used, and I did try a lot of different things during the development process, so it’s a very non-optimized, non-cleaned up code. There’s a lot of strange things there, like old lines and functions that are commented out, some rather confusing equations, it only uses one class, and all that kind of stuff that a coder does when he’s writing for himself. But it works: press space to hide/show the final result, or S to save the image. It also saves the image automatically every 1,000 frames (or 5,000 words). And feel free to make new entries to Omega Code’s contest based on it if you so want, or of course, create entirely new submissions.

This is great: meet JSTweener, an independent port of Tweener’s syntax and functionality to JavaScript. Here’s an example.

It’s done by Yuichi Tateno (aka secondlife), my second favorite person that I can’t really understand.

File this under the “odd” category: here’s Tweener for vvvv. Check out some sample source code:

The patch pictured above makes a circle move from the left side to the right side of the GDI Rendering module, using an easeOutBack animation, in 1 second.

If you’re asking “what the hell?”, I’ll just quote Wikipedia and tell you that vvvv is “…a graphical programming language similar to Pure Data or Max but less focused on audio.” In other words, vvvv is a platform in which you program by building blocks with things that resemble commands, and directing the flow of execution in what is called a patch. Much like Max/MSP (mentioned on the above quote), vvvv is also a software for image and sound synthesis. This means you can do some very powerful stuff with just a bit of tinkering with boxes and lines. Softwares like these are used on interactive art installations and such – they’re more or less on the same bag in which Processing is.

The major difference between vvvv and Max/MSP or PD is its focus in hardware-accelerated graphics with DirectX (which also makes it Windows-only), bringing it closer to the Jitter extension for Max/MSP. Also differently from Max/MSP, vvvv is free (for non-commercial use).

I’ve been using vvvv for some academic and experimental work as of lately and it has been a blast. The program is a bit strange, and it feels slightly beta, but it’s pretty awesome – and quite fast.

The thing is, today I needed some quick transitions to be applied on some screen elements on one of the pieces I’m creating, and while the program has a module used to create linear transitions/loops, I couldn’t find anything similar to our beloved easing transitions. So I went to try and create something like it for the platform, and to my surprise, it was quite easy (and fun) adapting Tweener to fit this little gem of German wit.

So here it is: Tweener version 0.1 0.2 for vvvv. It’s pretty simple – it lacks event handling like onStart, onUpdate and onComplete, and only features quad and linear transitions – but it’s a great start, I think.

Update: I’ve updated the Tweener version to 0.2 and it nows features all of the original Tweener equations, as well as event bangs. It’s renamed to “Tweener (Animation)”, and there’s an additional module called “TweenerSpread (Spreads)”, which can be used to create spreads with specific equations. It’s also properly formatted as a vvvv module, and includes help patches. It’s pretty much final. People who prefer the LFO approach better can simply reuse the Ease* equation modules to transform the LFO value.

Darren David has just released the first public version of his tweening classes for Microsoft’s WPF. Called “PennerDoubleAnimation” and “Animator”, they’re hosted at Google Code and help developers create animations by code more easily while fighting some specific WPF caveats. To quote,

I had three primary goals in mind:

* Be able to start an animation and assign an “OnComplete” handler in one line of code
* Have those animations set the final value of the property to the “To” value of the animation, then disappear (basically, if I animate the Canvas.Left property of a Rectangle from 0 to 100, I expect the Canvas.Left property to be 100 when the animation completes, and I want to be able to assign a new value directly to that property)
* Bring the canonical Penner easing equations to WPF, but leverage the WPF animation engine so I can use them in XAML or in code.

Apparently he’s been successful on those goals. Check this blog post for more details.

I’ve finally found the time to add content to the Projects page of this website, and I’m gonna do it by introducing the ImageLoader class (actionscript 2 only). Simply put,

import zeh.loading.ImageLoader;
var myImgLoader:ImageLoader = new ImageLoader(whateverMC);
myImgLoader.loadImage("whatever.jpg");

What does make it different? Well, it uses BitmapData caching, handles its own loading queue with variable priority control, and works by attaching the image (with smooth on) instead of actually loading the content on the container. Because of this, simultaneous downloads of the same content can occur seamlessly on two different locations, and additional loadings are attached from the image cache instead of reloaded from the web or the browser cache.

And since ImageLoader depends on it, the LoadingQueue class is also available for download. It simplifies the loading of MovieClip content with internal queuing, priority control, and the ability to use different queue groups.

The classes are not really new and I’ve been using them for a while on my own work, but I guess someone can find them useful so I’m putting them on my public subversion server. Anyhow, more information and download of both of them here.

The official Nintendo Wii website has an interview of sorts with the developers that created the channel functionality (and its interface) for their new console, the Wii.

We decided to use the term “Channel” at about the same time we decided upon the panes. We were having some difficulty in pulling together all the different ideas suggested to us by each department. In fact, we were more or less at a dead end. And then someone proposed that we try lining them all up. Right then, someone casually said, neither as a complement nor as a criticism, “That’s a TV channel,” and that’s when it clicked. I mean, at that moment, the atmosphere was electric. When I first heard the word “channel”, it enveloped the whole idea, even though I wasn’t fully aware of its appeal. Looking back, I think this is when I first realised that these “panes” would play a leading role in our interface.

It’s pretty lengthy and it goes into depth about the decisions they needed to take when creating that kind of rich interface to be used on a console that’s plugged to a standard TV. The website itself also has a lot more interviews available on the subject of design for the Wii – both the frontend layer and game titles. Via Shacknews.

Gamespot has an article by Mike Verdu (of Electronic Arts LA) where he explains the pitfalls involved in designing the new interface for Tiberium Wars (the new version of the Command & Conquer real time strategy series) and how they were addressed. While targeted at players, it does have some interesting tidbits about the usability of RTS interfaces, and the final interface seems pretty different from the standard collection of buttons on the bottom of a screen which you would expect to find on a RTS game.

How could I have missed that? FlashDevelop has better AS3 support now, including code completion.

I’ve already been using AS3 on it for a few days on a personal project of mine, but having that official patch helps. I can’t wait for a more final AS3 support though, as compiling is still a bit confusing (read, not supported out-of-the-box) and requires some additional installing/unzipping/XML editing.