For the last 4 months I have been working on a Game project with Processing and Processing.js at the Centre for Development of open Technology here at Seneca College.
This game is designed to help teach the basics of Mendelian Genetics to high school aged students and above. The concept is to collect and breed different dragons and learn how the genetics of it all works because the offspring are created based on the genetics of the parents.
One of the challenges I ran into when building this game was figuring out a way to handle all the different combinations of dragons. The dragons have 9 genetic traits that differentiate them from one another and each trait has two or three different phenotypes associated with it. The end result is there are 2592 different dragons that can be created and collected in the game.
These dragons were being dynamically built from a combination of 27 smaller images and then blended together, colorized, and then had patterns applied to them. In the native Processing JAVA environment this process took only about 100 milliseconds to build each dragon. But in the Processing.js environment this process took 700ms on Chrome, 1000ms on Firefox, 2500ms on IE9, and a whopping 4500ms on Safari.
This created a lot of problems, such as slow script warnings, when there were more than 4-5 dragons to build on game load.
To solve this problem I created a sketch in Processing to dynamically build every combination of dragon and call save() on it from a PGraphic to save out an image for every dragon in the game. Now with an automated build process I can quickly (roughly 5 minutes) generate all 2600 dragons into images and load them up with loadImage() or requestImage() in Processing.js significantly improving the load times when starting the game.
As a side challenge to this sketch to generate all the images I added some code to build a massive collage to stick in a copy of every dragon in the game in a giant PGraphics image.
PGraphics massiveImage = createGraphics(27648,24576,JAVA2D);
Immediately I had problems with this with not enough memory being able to be allocated to the JRE. Because java runs in a 32 bit environment for the PDE I could only allocate about 1600mb of ram to the environment. This meant I would have to create eight separate images and then composite them later in Photoshop unfortunately. I was still able to do it though and through some crafty code I was able to make eight images that were 6144×13824 in size and then patch them together into a giant 680 megapixel composite image showing all 2592 dragons at 512×512 resolution.
reduced size collage of all 2592 dragons Generated with Processing
Compositing the image in Photoshop took 11 GB of ram, 679477248 pixels, and created a 60MB PNG image file in the end.
If I had been able to allocate 4-5GB of RAM to the PDE I think I could have generated the entire image in one shot and I would have liked to have been able to add a sitting and flying image of each dragon bumping up the resolution to 1.35Gigapixels in total.
Daniel Hodgin's Blog 