Otomata
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.
After porting the animation logic to Javascript, I needed a way to take care of the per pixel operations for canvas, so I used ‘createImageData’ and ‘putImageData’ functions of canvas context to gain access to every distinct pixel of the viewport.
You can view the demo here.
Breakout
After watching Richard Davey coding Breakout in Flixel flash library in 20 minutes, I knew I had to do something similar using canvas.
So I started creating the world, using his code as a basis (Actionscript is not so different from Javascript after all) and when I finished the presentation part (not to self: huge mistake, you must always think the other way around) I had two options: implement a simple physics engine from scratch, working only for rectangular objects (ideal for a breakout game) where I had to code up a rather simple yet time consuming algorithm for collision detection and response (solving in a way the square - line hit test), or use an already implemented physics engine to handle the world, the movement, the collisions and all the fancy parts. Guess what, I chose the first one.
Nearly at the end of the engine implementation, I realized that I could in fact learn yet one more thing by using a third party engine, so I started digging. Luckily some days ago I read a post on Impact.js site about Box2D physics engine in Javascript. For anyone not familiar with Box2D engine, let me put it this way: it’s the engine behind Angry Birds game. Yeah, all those fancy animations, box collisions and pigs getting killed are being taken care of this beautiful library. So knowing that Box2D isn’t only available in Objective-C (C++) and Actionscript but also in Javascript, was just the excuse I was waiting for.
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 have to thank Jonas Wagner for porting Box2D in Javascript and Box2D team for the awesome documentation of the engine. Although documentation is not written for Javascript, the concepts are the same and you can easily implement a Javascript based game using Box2D in JS.
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: