Side Project - AS3 Line Drawer - Part 1

A couple of months ago I was working in a C++ project. The codebase was ginormous. In this project I was part of the Line Rendering team along with Ariel and Mauro. If memory serves me well, they where doing some Antialiasing implementation while I was doing bug fixing. Fun happy times.

Then on some random Friday, I found out that it was Mauro's birthday. Strangely enough, the next day it was Ariel's birthday. So an idea came into mind: I should make them a present! But not any present, a developer kind of present.

And so I did.

Because we where working on the Line Rendering part of the project, I though of making a program that would draw the phrase "Happy Birthday!" along with some other cute thingies. Or something like that.

The project I created was named Line Drawer. It's a program written in ActionScript 3 that has 2 running modes: one for creating the line image, and another for progressively rendering the created image. The second one is the one I sent to Ariel & Mauro.

The original creation can be found here. You need a Flash Player computer in order to see it. Sorry iDevice users.

Anyways about this project, it was done in two, maybe three days.

1. Line Generation Mode

This mode was the first one to program. It's functionality is pretty straight forward. When the application starts you are given the ability to click around the rendering area. This will create points from where lines will spawn. These lines are like the LineStrip found in DirectX or OpenGL primitive calls. Whenever I clicked and the Shift key was pressed, a new line strip would be created.

Here you can see 2 line strips, nothing fancy.

Now, when I was done drawing all the lines I wanted, I simply pushed Enter on my keyboard and some code would be generated in the output window.

This is FlashDevelop btw. I just love this program.

I would then copy all these lines of code and paste them into a method that would be called to populate the mPoints Vector<Point> structure. Take a look at the push(null) line, this indicates where a line strip ends and a new one begins (duh!).

2. Line Drawing Mode

After I was satisfied with a drawing, I would then enabled a code path that uses the information in mPoints to render the image, line by line, so that the end picture gets revealed progressively.

In order to make the progressive rendering, I did some transformation to the data in mPoints:

1. Increment Line Segments. This process would split a line segment into two of them. For each segment that goes from point A to point B, a C point would be created between them so as to have a segment from A to C and another segment from C to B. Segment A to B would be removed in the process. With this method I would increase the total number of segments so that the image would be generated slower.

2. Normalize Segments. Here I transform the Point list into an easier to parse. I didn't remember exactly what this method was for so I checked the comment in the code. Here it is, I think it gives a pretty good explanation:

3. Randomize Segments. I don't think I have to explain this.

Once all of these steps are done, the rendering process can begin.

This would be the output of the progressive rendering program. You can notice that the lines have a shadow. This is achieved simply by drawing the same geometry twice, once in black and a second one in red above it. Each of these geometries are rendered on separate DisplayObjectContainers.

Well, that's all for now. I'm feeling kinda sleepy, I'll be zombie-walking to bed now. Maybe.

One final note, all the images in this post have been uploaded using Snag.gy. This service is a MUST for everybody everywhere. Seriously.