Thought Flow

Tag: canvas

  • Fractals revisited

    FractalGoing through old code can be fun and educational. While updating my website, I took an extra look at some of my featured code. When I came across my simple fractal simulations on the <canvas> element, I was quite surprised to see how much I violated the Don’t Repeat Yourself (DRY) principle. The three simulations share more than 80% of the same code but they were each defined in separate files where all the code was repeated. The performance of the simulation had bothered me earlier, so I decided to take a look at the code and did the following:

    • Consolidate the three simulation files into a single file.
    • Optimize the animation loop.

    It was a fun little evening project to refactor some old code. There’s still some work that could be done, like removing the hardcoded dependency of the canvas element with a specific ID, but for a little showcase like this, I do not want to bother too much about that.

    By the way, the code is online.

  • Space Wars on html canvas

    Space Wars screenshotI recently spent a little time testing out the <canvas> element which is a nice and fairly new markup element that is included in html5. I decided to take a little Asteroids-like game that I made in a group project at the University of Oregon in Fall 2009 (we called it Space Wars) and convert it to work with the <canvas> element and Javascript.

    This was very fun and surprisingly easy. A lot of the code could be copied almost exactly from the Java code and modified slightly to work with the <canvas> element. I gained the necessary background from this excellent tutorial and besides some differences between Firefox and Chrome/Opera/Safari in how to handle keyboard events there were no major obstacles along the way.

    If anyone should be interested, the game can be played here:
    davidlebech.com/spacewars/

    The <canvas> element is definitely a nice addition to the toolkit for online webservices and it will be interesting to see what people might use it for in the future.