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! 


No comments:

Post a Comment