Metamoku

I have started working on a new game! HTML5 canvas! Network multiplayer! Turn-based strategy! Metaballs!

The name of the game will be Metamoku. A combination of metaball and moku (which is territory in Go).

I have been putting together various demos to experiment with rendering metaballs. It is actually a difficult problem to render them fast+smooth+accurate. I have tried three approaches:

Approach	Speed	Smoothness	Accuracy
pair-wise Bézier curves	Fast	Good	Bad
pixel rendering	Variable	Bad	Good
border following	Slow	Good	Good

Pixel rendering is the most common rendering approach. However, it can get very slow on large displays. Also, making the edges smooth is difficult. dllu made a two color demo.

Here are a couple demos I made with the pair-wise approach. These are just an approximation to the actual metaball function and are therefore not "accurate".

I found a great article about the border following approach here. This is the most complex of the three approaches. I implemented a demo here. Here is another demo where you can see some of the path-finding internals (red is border misses, blue is border hits). These demos don't have real-time rendering or drag-and-drop because it is too slow. However, this approach might be feasible for a turn-based game with one frame per turn.