Originally I wrote this in Delphi 3, and later wrote a version in C# when I was trying to learn the language. When it came to trying out the HMTL5 canvas tag, Algorithm Animation seemed like the perfect application with which to try.
Soon after completing the first incarnation and posting it, I stumbled across a 37 Signals blog entry, ‘How Do I Learn To Program?’.
The author talks about how he learned to program:
…I tried to learn to program by following tutorials that created programs I didn’t have the slightest interest in keeping…
Sound familiar? How many times have we followed tutorials in a book that have taught us how to write a program we have no interest in.
These examples generally start out with some problem, which and will demonstrate how this is solved with their examples. But, for me, there is no point of reference, and I have no empathy for the problem. I don’t really care about it, and as a result, don’t care about the solution. The knock on effect is generally, that I don’t learn as well.
So when i’m picking something new up, I always try to refer back to an interesting point of reference, hence attempting the Algorithm Animation.
Inspired by the Biolab Disaster HTML5 game, I’ve been playing around with the HTML5 cavas.
I decided to resurrect my old Algorithm Animation project, as it lent itself perfectly to this kind of thing.
So here it is:
Just Click “Go” and watch it work.
I make no apologies for the fact that its very very limited – it was just a proof of concept more than anything else! You’ll have to refresh the page if you want to run it more than once. Hmmm….I feel a ‘reset’ button coming on.
The HTML is laughably simple. In fact, here it is:
<canvas id="myCanvas" width="300" height="170">
Fallback content, in case the browser does not support Canvas.
</canvas>
<br />
<input type="button" value="sort" id="sort" onclick="Sort_OnClick();"/>
As HTML 5 gathers pace, a number of interesting projects utilising the technology are popping up. One in particular that caught my attention was Biolab Disaster, a classic platform game, written entirely in HTML5 and JavaScript.
It will work in the latest versions of the most common browsers (including IE9, with which it reports issues with sound and speed). If you try to access it with IE8 or lower, you get the following unequivocal message:
“Hey there, it looks like you’re using Microsoft’s Internet Explorer. Microsoft hates the Web and doesn’t support HTML5
As for the game, well, it’s very simple and only has a limited number of levels. It won’t set the world of gaming alight, but nevertheless is still a fun (albeit brief) distraction.
