Otomata was the first canvas experiment I worked on the past weeks and it was the one that made me realize the simplicity and beauty of canvas programming.
Batuhan Bozkurt (@earslap) did a fantastic job with his Otomata Flash demo. The idea of having cellular automata interact with each other in a 9x9 grid producing sounds when colliding with the walls was awesome, along with the ability to share your “sequence” to others using permalinks.
After countless times of experimenting with his Otomata, I decided to build an HTML version of this demo in canvas. I must note though: although ‘Otomata in HTML5’ runs in iOS devices, due to mobile Safari bugs with HTML5 audio (not possible to playback more than one audio file simultaneously) sound has been disabled in iOS.
I decided to do some reverse engineering in Otomata, based on trial & error of the Flash demo and on some Batuhan’s notes and came up with this little demo. It produces nearly the same sounds as the original Otomata tool, it supports permalinks for each sequence, animation can be paused/resumed, canvas can be cleared and the automata work as expected, having four different directions.
I have created a diagonal-friendly version of Otomata too, but it didn’t quite work as expected so I am postponing it till it’s fully fixed.
Listen to some demo songs here: 1 2
Game of Death
Some applets are begging to be ported to canvas. That’s what I thought when I saw Vincent’s “Game of Death Lava” written in Java using Processing library. I was intrigued by the idea, it was simple yet beautiful. Game of Death Lava is essentially a remixed version of the Game of Life algorithm when applied to two different population swarms thriving for dominance. This produces a phenomenal animation, at least in my eyes, which can be easily implemented in any language.
You can view the demo here.
After watching Richard Davey coding Breakout in Flixel flash library in 20 minutes, I knew I had to do something similar using canvas.
Thus I spent two days messing around with the documentation, the forces, impulses and joints and all those exciting terms. I was amazed by Box2D and I began integrating it to my Breakout game. Unfortunately, I had to erase all my code in order for Box2D to fit, as everything had to be a Box2D body with real properties like elasticity (restitution), density and friction but hey, the result was better than I could have ever imagined! After hours of tweaking, learning and fixing, the ball was bouncing with the right speed, the paddle was moving just right and the bricks …well the bricks don’t have any animation at all!
I am planning of updating Breakout in the next few days with new features so stay tuned!
You can play the game here.
Update: Demos are now available @ my Github page: