More procedurally rendered eggs in HTML5 canvas

The first Project Nightjar game was a big success, with 6 thousand players in the first few days – so we’ll have lots of visual perception data to get through! Today I’ve been doing a bit more work on the egg generator for the next citizen science camouflage game:


I’ve made 24 new, more naturalistic base images than the abstract ones I was testing with before, and implemented the start of the genetic programming system – each block of 4×4 eggs here are children of a single randomly created parent, each child is created with a 1% mutation rate. The programs trees themselves are 6 levels deep, so a maximum of 64 binary composite operations.

All the genetic programming effort will happen in HTML5, thus neatly scaling the processing with the number of players, which is going to be important if this game proves as popular as the last – all the server has to do then is keep a record of the genotypes (the program trees) and their corresponding fitness.

One catch with this approach is the implementation of globalCompositeOperation in HTML5, the core of the image synthesis technique I’m using, is far from perfect across all browsers. Having the same genotype look different to different people would be a disaster, so I’m having to restrict the operations to the ones consistently supported – “source-over”,”source-atop”,”destination-over”,”destination-out”,”lighter” and “xor”.

4 thoughts on “More procedurally rendered eggs in HTML5 canvas”

  1. A thought: after playing my first ten rounds, I noticed that I’m picking up strong cues from the focus and framing of the photograph. I hope you’ve recognized and are attempting to correct for that influence?

  2. Hi Joe – In terms of framing, the images are made from much bigger photos and randomly framed around the nightjar (with some safety margin). These offsets are stored so we can recreate them, as indeed this will have a strong influence. Some of the photos are quite tightly focused, but we are also storing the mouse coordinates for each click, so we should be able to see what effect this has for each photograph, and disregard them if necessary… I’ll be posting some of the results here soon.

Leave a Reply

Your email address will not be published. Required fields are marked *