August 5, 2011

Flocking in javascript

Flocking is one of those things I've been meaning to play with for a while. So here is my crude result; flocking in javascript. I'm not quite sure what type of flock it's simulating... definitely not birds though. I'm calling them noids.

July 28, 2011

Python markdown

$ easy_install mark3
$ python -m mark3 < myfile.text
Or used as a python module:
from mark3.markdown import markdown
html_output = markdown(raw_text)
I wanted a markdown to html converter for python3 that was lightweight and fast. So I created mark3.
Much to my surprise I was able to get mark3 quite a lot faster than existing libraries (~7x faster).
$ hg clone
$ cd mark3
$ python tests/
See the README for details on how mark3 differs from the official markdown implementation.

July 9, 2011

Things I learned about html5 canvas

WebGL is awesome and all, but it's far less portable. For example, my AMD card has been blacklisted on linux. So I figured I'd revisit trying to make a real-time game with 2D canvas.
Check out the game so far.

Off-Screen Rendering

Off-screen rendering is both cheep and easy to use. Here I'm using it to render map tiles to a single image. Since the tiles are (mostly) static I don't need to be redrawing them individually each frame.

setInterval is not guaranteed to call at an exact interval

So I already knew this, but I forget how much accurate timing matters for real-time games. To the point, calculate time-past yourself with the getTime function:
var dt = new Date().getTime() - last_time;
Still use setInterval for scheduling logic and render functions, just don't expect the timeout values to be consistent with actual times.

Keep an eye on object allocation/deallocation

You don't normally have to think about allocating memory in javascript like you would in C. The problem comes when you're creating a real-time game and you notice it periodically skipping a beat, resulting in jerky rendering. This is caused by javascript's garbage collector, basically, blocking your program as it cleans up unused memory.
The way to avoid this problem is to limit the number objects you create and then discard. Or an easy solution; just use Chrome. It's significantly better about it.

It's better on Google Chrome

Simply put, Google Chrome is better for canvas based games. Dramatically better in some situations (or rather, Firefox is dramatically worse in some situations).

July 7, 2011

Canvas off-screen rendering

Rendering to an off-screen buffer can be a great way to cache expensive drawing operations or preform post processing effects. html5's canvas element lets us do it easily.
var buffer = document.createElement('canvas');
var buffer_ctx = buffer.getContext('2d');
// ... draw to buffer_ctx ...
Then simply use our new buffer as an image:
main_ctx.drawImage(buffer, 0, 0);
For example, I can use an off-screen buffer to apply an expensive bloom effect:

June 2, 2011

Playing with WebGL

OpenGL is one of those things I like to play with from time to time. So naturally I wanted to check out WebGL now that Chrome and Firefox support it.

It's fun being able to use javascript and web technology in conjunction with OpenGL. Building GUIs using raw SDL/OpenGL was always rather a pain for me. I don't even like how standard toolkits work (GTK+, Qt etc). So being able to use HTML widgets and jQuery on top of my 3D scene is really awesome.

Unfortunately it's noticeably slower than an equivalent program running natively. When profiling, the GL calls seemed to be the bottleneck. A bit less so on Windows than Linux, although that may have been due to better driver support on the former.

So like usual, optimizing comes down to reducing the number of GL calls you make per frame.

The javascript logic and matrix transformations ran very fast. This was the case for both Firefox and Chrome and was a very pleasant surprise.

You can try out what I made at, play with the source or what ever. It's all under public domain (with the exception of the glmatrix library which has a BSD license).

I had also started toying with the idea of a turn-based game (very, very far from completion)

If you want to check out more webgl stuff is a great resource. They also have some decent tutorials that are easy to follow along if you're new to OpenGL.