Raining Pictures

I was toying with the idea of doing some kinetic art, but decided that before I invest a large amount of time building what I wanted to do, I decided to try and model it with code to see if it was even worth it.

Raining Pictures

I wanted to create the impression of an image with falling particles.  As the particles fell, they would either slow down or speed up based on the darkness of the image where the particle currently was.  The darker the pixel of the image, the slower the velocity of the particle.  This gave a pretty neat effect, however, it was sometimes very difficult to see detailed images that had a fairly uniform colors (think faces).  To help bring out the picture more, I coded in particles being able to change to the color of the pixel that they were representing.

I grabbed the particle code from http://html5hub.com/build-a-javascript-particle-system/ to provide the foundation of the system.

Here’s my buddy Alex during Denver’s Zombie Crawl to demonstrate how some of the parameters will change the effect.  You can click on the image to see the animation.

Image With defaults
alex Black and white
With colors turned on High emission rate
Alex with color High emission rate
Low emission rate, large particle size Inverted (slower for lighter, faster for darker)
Pixelated Alex Inverted Alex

If you checked the URL of any of the above animations you can see how parameters are passed in to the animation. For simplicity, I’ve made a small URL creator below. Note that you can use any image from imgur.com, but please use sparingly as you’re likely to take down this site since my host is cheap :P.

To use an image from imgur.com, just put in the image name with the extension.


A new window will open with the animation. To share with a friend, just use the URL of the new window to link them.

Boid Algorithm in 10 Dimensions

Click here
to the see the visualization


Basic idea and behavior rules

I’ve been interested in emergent behavior since early college.  One of the first algorithms I learned for emergent behavior was the Boid flocking algorithm, created by Craig Reynolds in 1986.   I’ve always wanted to model this, but I never had any experience in 3d programming until very recently.

The idea behind the boid algorithm (and emergent behavior in general) is complex behavior arises from fairly simple interaction rules.  For this implementation, I applied the following behavior rules to each of the boids (dots):

  1. Move toward the center of the mass of the swarm
  2. Avoid other boids
  3. Try to match velocities with other boids
  4. Stay within bounds (I just used a cube for this)

Descriptions of these rules and pseudocode to implement it can be found here: http://www.vergenet.net/~conrad/boids/pseudocode.html

Adding more dimensions

At my 9-5 I’ve been thinking a lot about how to represent  multidimensional data.  I realized the boid behaviors could be easily extended into multiple dimensions if the other dimensions provided good visual cues.  I decided to go with three different 3 dimensional spaces, with each axis a continuous numerical value that could be translated into a visual construct.  The 3D graphs always map the positional locations of the boids, but the 10D graph only pulls the positional elements from the XYZ space.  The following images show the max/min of all the axes.

First 3d space:  positional X, Y, and Z

Positional X, Y, and Z

This works exactly as you would imagine.  The coordinates here are simply the 3d positions you’re used to dealing with.

Second 3d space: Red, Green, and Blue

RGB Space

For RGB space, X represents the amount of red in the color (0-255), Y represents the amount of green in the color (0-255), and Z represents the amount of blue in the color (0-255).

Third 3d space: alpha, size, and number of shape vertices

Alpha, Size, and Vertices Space

For this space, I used alpha (transparency) for the x value.  You can see the boid on the left is completely black while the one on the right (the minimum negative x value) is faded out.  The y axis scales the size of the boid.  The z axis determines the number of vertices the node shape has (from 3 – 6).  You can see the minimum z value has a vertex count of 3 (triangle), while the max z almost looks circular (hexagon).

For this example, I’m running 3 separate boid algorithms on each of the spaces and then combining the output into one 9 dimensional space.  The tenth dimension is time.

Combined dimensions


To see it all in action, click here.

View sourcehas been enabled.

To compile this yourself, you’ll need Away3D 3.6.

Flex Fast Compiler Update

Since this app seemed to be fairly well received, I made a few changes and threw the code up on github.

I fixed a few issues regarding doing thread-unsafe things.  I also put in functionality for your compilation defaults to load from a file.  Disabled the use of multiple tabs (1 FCSH per instance of the app).

Github project URL: http://github.com/EvanMGates/Flex-FCSH-Frontend

Flex Fast Compiler (FCSH frontend)

Fast Flex Compiler (GUI frontend to FCSH with incremental compiling).


Unzip source with 7-Zip, run jar with java -jar FastFlexCompile.jar.

So if you’ve been working on large-scale projects in Flex (especially if they’re monolithic beasts), you have undoubtably noticed how slow the compiler is in Flex Builder 3. This is because (from what I could find) Flex Builder 3 doesn’t allow incremental compilations, which drastically speeds up compiling.

FCSH, which comes with the Flex SDK, does. The problem with FCSH is it’s a pain in the ass to get setup and when you do every time you want to recompile you have to type “compile {target number},” it does not support the up arrow key for last command.

To make things a bit easier and to add highlighting, which I find useful, I made a quick Java Swing frontend to FCSH so you can enjoy quick compilation without dealing with FCSH directly.

To start: Run the app by using the command:

java -jar FlexFastCompile.jar

Put in your SDK path using forward slashes for a Windows machine, making sure to omit the trailing “/”

C:/Development/Flex Builder 3/sdks/3.5.0

Put in your mxmlc command line arguments. If you’re unfamiliar with the switches, check out the documentation here. The common ones are: -o (output swf), -file-specs=(application file), -libarary-path+=(library path) for library directories, and -sp+=(path) for source paths.

Click “Spawn New Compiler.” This will execute FCSH and hold the session open in the tabbed window below. To recompile that instance, hit the “Recompile” button.

You can change your sdk and arguments and open up multiple FCSH sessions in the tabbed windows. Be sure to watch your memory usage as too many FCSH sessions can eat up your RAM right quick.

Developer Notes

The GUI and class skeletons was thrown together in NetBeans using Swing components.  The projects was then transferred into Eclipse because I’m more familiar with it.  There are probably still some artifacts from NetBeans in the source.

So the implementation ain’t pretty, and I’m actually passing the Swing JTextArea component down to the output reader threads directly (didn’t feel like messing with thread management much for such a quick and dirty project).  To avoid the possibility of race conditions, I’m using the JTextArea as a lock for the synchronized block that handles the highlighting (:cringe:).  If you want to customize this code for further development, that would be the first place I’d start.

To change the highlighting just edit the wordToLinePainter map in the FCSHOutputDump class. Changing the colors can be done in FCSHOutputDump by editing the DefaultHighlightPainter instantiations.

Feel free to use the code for whateverthehell you want.  There’s no license on here and no warranties as well.  I ask if you do use or modify the code shoot me an e-mail or comment (I like to know if projects are useful or not).  Thanks.

Decentralized Distributed Flash Proof of Concept

Finished my lil’ project I’ve been working on. You can view it by clicking the link below.

View the app and participate in the network.

It doesn’t really have a name, but for the purposes of this post I’ll refer to it as DDFPOC (Decentralized Distributed Flash Proof-Of-Concept).

DDFPOC is a prototype for a new way of utilizing web traffic for computational purposes. Inspired by projects like BOINC and Folding@Home, I wanted to find a way to have casual web surfers participate in a computational network just by visiting a webpage. Deviating from the BOINC and Folding@Home models and my prior Flash-based distributed computing POC, I also wanted information sharing across the clients as opposed to a central location that aggregates all the separate work units together. Finally, I wanted to have a visual representation of the network so the users could see what’s happening within the network and what the work units were doing.

Implementation Details

The client-side application was programmed entirely in Flex and uses the awesome dependency graph provided with Flare.  The server-side code is in PHP5.  The Flash application makes framework and worker requests to the server in set intervals.  The framework requests are to get the status of the network — who is currently in the network, who’s connected to who, and statistics.  The worker messages are for sending and receiving messages about the current worker.

Spoiler: it’s not really decentralized. I didn’t make the program to do Flash-to-Flash communication, so messages passed between clients are routed through the server.

Green is a message in, red is that same message out.

There are 2 main parts to both the Flex and the PHP: the framework and the worker.  For Flex, the worker module only has to implement an interface.  If this project continues forward (which I doubt due to my project ADD), I would like to be able to add and remove worker modules during runtime.  That way the client could choose which project they would like to donate their CPU cycles to (much like BOINC).  The PHP is a bit more messy, and there’s a couple places where the implementation of the worker is coupled with the user management (such as clearing out expired users).  Aside from these few places, though, the PHP worker is pretty encapsulated and I don’t think it would be much work to make it entirely so.

What’s With The Number Guesser?

I chose to implement a random number guesser as the first POC worker for the following reasons: it’s easy to understand, the knowledge sharing is trivial, it didn’t have to be very visual.

On the PHP side: if there is no work unit out (a number had recently been found), the PHP worker generates a new number between 1-1000 and informs the client that there’s a new work unit.

On the Flash side: keep guessing numbers between 1-1000 until you find the answer or someone else does.

The knowledge sharing works as follows:  keep track of the numbers you guess and tell the neighbors you’re linked to what numbers you’ve tried.  When a neighbor informs you of their guesses, add them to your “already guessed” pile.  Forward on to your neighbor’s guesses to your neighbors.  Eventually the network will guess the number using all of the clients’ memory of guessed numbers.

In The Future

This project was made to be throw-away, but if it were to continue forward I’d first like to completely decouple the framework and worker on the server side.  Next would be making the Flash worker load dynamically.

What I’d love to see is an actual application for this.


Keep in mind this is a POC and isn’t well tested, I expect bugs :D.

Also, if there’s any interest I’d be happy to release the source code.

Quick update

Once again, an “I’m sorry I haven’t posted in forever” post.

My weight-gaining fun is over.

It started out great, and over the course of 2 weeks I gained around 12 pounds and I could express my joy with both my smile and the smile-shape my blossoming second chin made. Disaster struck when I started putting on a pair of jeans and had to squeeze to get that button in the hole. I signed up to be a fatty, not to replace all my clothing.

So now I’m back to being scrawny (thanks cigs) and I’m quite comfortable with it. I suppose in life one has to give up some dreams in order to obtain more important ones (never shopping for clothes).

I’m working on a project now that I’m aiming to be out before Feb. It’s just a toy POC flash app that demonstrates pseudo-decentralized distributed computing visually from within a browser, but the nerd in me is excited about it.

P.S. I’m sorry I haven’t posted in forever.

November and December: A Warning

I will fucking eat you.

With my 25th birthday nearing (hint: I like Qdoba gift certificates. And hookers), my metabolism has decided that it has tortured me enough and it’s time for it to die in a deliciously blubbery coffin. My goal is straightforward and simple: to become jolly big in time for Christmas. This will be accomplished by maximizing my caloric intake, minimizing my tobacco usage (farewell once again my sweet, sweet… sweet… sweet fire sticks), and participating in a whole lotta sitting-around-doing-shittism.

My last cigarette was Saturday, when I weighed 166. I’m currently weighing in at a 170 and sky is the limit (or a cardiac arrest).

I’ll keep this blog a bit more updated for the next month while I, much like a bear preparing for hibernation, stuff myself full of hot, dense meat (nohomo) for the winter.

Also, check out this site for Modern Warfare 2 Titles.