Saturday, January 19, 2013

Conway's Game of Life - AS3 Project

Becoming God's pupil

A few months back I had this idea: What would it take to program life? This question has been raised many times by lots of people all over the world. In my case, I got the idea on my way back home while listening to the audiobook A Short History of Nearly Everything by Bill Bryson. As soon as I arrived, went online and raised this question to my good ol' friend Sebastián.


Interestingly enough, Sebastián had something to say about it: "What you are talking about already exists... have you heard of the Game of Life?"

Clearly, I did not know about it. So I did a little research about it.

The first Google results nailed it. Sebastián was talking about Conway's Game of Life. This wasn't exactly what I was aiming for, but I though it could be a good exercise to begin with.


I first read the Wikipedia article, then opened FlashDevelop and began coding. I got a first workable version very fast. I improved it a bit and added a bunch of maps. You can check this first version here. Click or drag to make the simulation advance one tick.

Some of these maps will come to an end even although they are supposed to be never-ending growing patterns. This happens because the map size is fixed and the patterns need more room than the one available.


Some technical details


Maps were defined by drawing points into white png images, like the ones above. Then from the code I would load them as BitmapData elements and process them pixel-by-pixel. White pixels represent dead cells while black ones represent cells with life.


Improving the solution

Now this time I did take my time to improve the implementation. Mostly because I felt that the logic of the solution was super easy to achieve.

I decided to improve the user experience.


  1. The background has now changed to a color that clearly differentiates from the maps. 
  2. Map borders are now all from the same width.
  3. Each map can be advanced separately.
  4. Rollover behavior has been added to each map, displaying the current tick count and a name for the map.
  5. Red map border changes into green when rollovered to indicate that it can be interacted with.
  6. Added a title and author text. Just because.

I can honestly say that these changes took as long (or even more) than programming the first implementation. The reason is that I did not have a clear idea on how to improve the solution UI-wise. So I tackled this problem by iterating through ideas, one by one.

Though it was not hard work, it did take quite some time.

I can even state that most of the creative stuff takes time, simply because one does not know exactly what one wants to achieve. Personally, I always have a hunch that guides me, but its feels like walking in a foggy terrain. I will know I've reached my destination once I arrive there. Not before, though I get a sense that I'm going in the right direction. Kinda hard to explain, actually.

Anyway, I have uploaded the source code into Github. If you are curious about it, check it out here.


Conclusion

I feel quite satisfied with the improved AS3 solution. After doing additional Googling about the Game of Life, I found that it would be really cool to explore additional visualizations for this. Maybe trying to play a bit more with the colors that are used, or make it 3D, maybe by using cubes of some other shape.

I'm still curious about the subject of programming life. Though this was a nice exercise, I feel that it was not enough to satisfy my hunger. I might continue exploring other possibilities in the future.

Finally, here's a happy panda:

Believe me, he is happy! 

Maybe if we could arrange pandas in a Conway's pattern that perpetuates their life... we could stop worrying about them going extinct!

Yeah, right...

Stay awesome!



No comments:

Post a Comment