Saturday, December 29, 2012

AS3 Three hour "rant" project

Hello again. You might have realized that I am pretty fond of AS3 for my programming projects. Without getting into the never-ending debate of what programming language is the best, the reasons I like to code in AS3 are:

  • I know the language.
  • I can code stuff very quick.
  • I can share the results online easily (Dropbox public folder)

On the negative side, I do have trouble getting my creations into all iDevices. I'll be looking into that eventually.



My "Rant" project.

Okay, so the story goes something like this. I was at work, doing my usual thing, drinking my usual Ginkgo Biloba infusion. On a side note, it took me about a month to learn those two words: "ginkgo biloba". There was a time when I call it ginkgo balboa. Oh, those fun happy days.
Anyway back to the point. It seems that I drank to much ginkgo biloba, so naturally I had to hit the restroom. I did my thing, was all happy about it and went to wash my hands. 

So far things went smooth and I was happy.
But then it suddenly happened.

I opened the water faucet and a high pressure water splash spit all over my shirt.


I don't know exactly why, but I ended up pretty upset for this. So naturally, I had to talk it over with someone. That someone happened to be Xime.


The AS3 project


After talking the situation with Xime, I decided to code something funny. The result can be seen right here. The project consists of an AS3 application that recreates a chat sequence I had with Xime in Google Talk. It's in Spanish. Curiously enough, I'm listening to some German music right now. Talking about polyglotism...

The whole application was done in about 3 hours. I'm not trying to making a huge deal out of it. It's just to point out that there was little design and coding was done fast an furious

The coding

Before continuing, I suggest that you take a look at the application. There will be some spoilers bellow, so please, play through the application. It's quite short, it wont take much of your time. I promise.

Okay, let's move on.

The simulation advances whenever the user clicks somewhere on the canvas. Here is the code that controls the pace of the application:


There is a ChatConversation class stored in mChat variable. Whenever a click is detected, the next() method is called. The method returns false when the conversation is over. When that happens, the chat is finalized by calling the end() method and a new class is created and added to the stage: QuemarTodo. "Quemar Todo" is the Spanish of "Burn Everything".

External Libraries used


The chat conversation interpolates the position of the appearing images. This is done by using Greensock's TweenLite library. I recommend it to anyone that wants to quickly add a feature rich and performant interpolation solution. You can thank me later.

At the end there is a fire-like particle animation. The effect was created using Flint particle system. Again, you can get particles on screen pretty fast. The samples at their page are good. I found that some of the samples have missing data. You may found those missing bits of information by searching through their forums.


Epilogue

I'll end up with a tribute to this guy:

The name's Proof. He was a Rapper. He's dead now.

Because I just saw the "Insert Video" option here in blogger, I'll end up with a video of Proof featuring 50 cent. Represent.




Saturday, December 22, 2012

Side Project - AS3 Line Drawer - Part 3

Saturday. Just finished lunch. Today I had some "Lengua a la Vinagreta". Google translates this as "Beef Tongue Vinaigrette". Though super delicious, I will not put a picture of it as some people might find this food kinda disgusting.

I'll attempt to conclude with the AS3 Line Drawer saga today.

Creating a Drawing from scratch

There's this page called Drawception. It's a telephone drawing game. It's super fun!
A few days back, my good friend Mauro showed me this Drawception game. It was freaking amazing! All frames are super cool, but there was one that I really liked: natarii's frame, number 16, DJ Jawa:


In fact, I found the image so amazing that I remembered it as I was writing down this post. So I decided to make a tribute to it.

LineGeneration in action

The fist thing I did was downloading DJ Jawa's image. Then I opened up the LineGeneration project and changed the code to put the image on stage. Then I enabled the Line Generation mode and started tracing through the edges of the image. At the end, I got the following image on stage:


Once I was satisfied with the tracing I pressed the ENTER key to generate the code that creates all the lines. I would then copy the generated code, paste it into the point definition method, and.... DONE!

LineArtDrawer in action

I would then changed the run mode to LineArtDrawer to see the drawing animation.
I was very pleased with the results.


I uploaded the Flash program right here. Thanks, Dropbox!

The boys

In the last blog post I was missing the explanation on how the jumping boys at the bottom work.


There is an Action Script class that controls them: class Boys on the Boys.as file.
Yeah, super original.

The jumping movement of the boys is achieved by using the sin function through the zero-pi interval. For those non-math people, pi equals 180 degrees.


The code that actually makes use of this technique can be seen here:


dt is the frame time; mAmplitude defines the height of the jump movement.
When the boys jump back into the ground (if mAngle > Math.PI), the graphics of the boy change. This way we create an effect where each boy (defined by their color) changes position for each new jump. If you look closely, the images are being changed in a rotation fashion. That means, Boy 1 gets the image from Boy 2, while Boy 2 gets the image from Boy 3, and so on.

The end

The LineDrawing project was amazing. I love how a programmer can write code to create programs that are just for lols and fun. In some way, I think that programming is an excellent skill for any artist. It opens up the possibility to create non-static art, which I find awesome to create and share.

Talking about non-static art, I would like to give a shout out to the guys at ThisIsMyJam for their recent Jam Odyssey addition. That is a great initiative on their part.


Jam Odyssey is a page that creates a song mash-up from all the jams that have been set into ThisIsMyJam for the past year. They also have some cool visualization going on!

Here is the JamOdyssey created from my jams at ThisIsMyJam. Hope you like it!


Is it useful? I don't know.
Is it cool? Definitely! 


Wednesday, December 19, 2012

Side Project - AS3 Line Drawer - Part 2

I usually try to write these blog posts on Sundays because I usually spend the day at home. Unfortunately, today is Wednesday and here I am, at my place. That is not good, I should be at my usual Stammtisch, drinking my usual caipiroska. Today we had to cancel the event because there was a meteorology warning. It never came. The weather has never been so nice and quiet.

Anyway, back to the coding stuff.

I've uploaded the project to GitHub and it can be found here. I tried to put one of those cool Fork me on GitHub ribbons. Unfortunately, I just couldn't make them work.


About GitHub, I just can't get myself to work efficiently with it. I guess I'm just used to TortoiseSVN. Hell, even Perfoce treats me better than the default's GitHub client for Windows 7. Though I must admit that the best way I have found to get into GitHub was though TortoiseGit. No surprise there.

The uploaded FlashDevelop project consists of just a few files:


Main.as, the starting point of the application. Extends Sprite and calls an initialization method when Event.ADDED_TO_STAGE event is dispatched. Nothing fancy here, just common AS3 stuff.

Inside the initialization method there are just two line codes, one of them is commented out:

These methods make the application run in the two ways mentioned in my previous post: Line Generation Mode & Line Drawing Mode. I guess you can figure out which one does what. What I will say, though, is that generateLines() instantiates a LineGenerator to do the job, while drawGeneratedLines() instantiates a LineArtDrawer object. I don't know what kind of drug was on my system when I was choosing those names.


Okay, lets dig a little bit more into LineArtDrawer. For this part, I will just focus on the rendering of the scene.

Though kind of obvious, the order in which elements are rendered are: Falling Stars, Line Shadow, Red Line, Boys.

There is also a Disclaimer button, it goes on top of everything else.

Actually, LineArtDrawer is a class that does more things that it should. It draws the red lines with the shadow (which is good) but it also renders the falling stars, the jumping boys and the top right disclaimer. If you didn't noticed, the disclaimer is a button. Just click it a few times and it will go away.

The shadow line


The way to get the shadow line is pretty simple. We just need to use the same data used for the red lines, but   translate everything 2 pixels to the right and 2 pixels down. We also change the color to black. And voilĂ ! we get a shadow for the red line.

The stars


For the stars I created the class FallingStars to manage their creation, update and destruction. Pretty neat. This class stores a Vector of Bitmaps, a Vector of Points and a Timer.


The timer is used to check when it's time to spawn a new star.

Whenever a new Star is created, a Bitmap object is stored in mStars Vector and a new Velocity is added to mFallSpeed Vector.

The Stars spawn from a random position on top of the screen and get destroyed once they go beyond the bottom. In addition, you will notice that the stars rotate. And they do so in a funky way. That is because the rotation is centered on the top left corner of the bitmap, its default position (for a bitmap). That is a simple way to create a sinusoidal-like movement. It gets even better when we add an additional velocity vector. That is when the Vector of Points comes into play.

Also, the star Bitmap object is created from a 32 bit png file that is embeded into the swf at compiling time.




Well that's all for now. Again, I'm falling asleep.
But before I got and to close this post, here is a dedication to all those lovely meteorologists that forecasted today's warning.


I know what you are thinking: This guy's Photoshop skills are off the charts!
And yeah, that is Comic Sans right there. :)

Sunday, December 9, 2012

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.