Toxin – Creating sprites in Processing

One of the most powerful graphical tools I am using to make Toxin is Processing, a Java based platform used to create generative art. Processing provides you with a basic IDE, a graphics API and a simplified front end to Java that lets you get things up and running with a minimal amount of work. It’s great for doing experiments or when you need to create art programmatically rather than with a graphics program.


Processing provides a simplified front end to Java, ideal for quick experiments

The green cells in Toxin were all generated using a Processing program. Each cell is a circle made up of a number of connected spline segments. I animate the cell by displacing the spline control points using Perlin noise. The cells are then resized and colourized in Photoshop.


Left, a cell being rendered in Processing. Right, the finished result

As you can see, the finished product does not look exactly like the original Processing output. I had to do a lot of tweaking, re-rendering and reprocessing until I got them looking right. It was very time consuming. There were many moments where I wondered if I was going to get useable results at all.

Many of Toxin’s graphical effects have their origins in experiments I did with Photoshop blend modes. I discovered that certain combinations of layers and modes resulted in nice abstract animations when the layers were dragged around. I wrote photoshop scripts to perform these movements and spit out animation frames. Unfortunately these scripts revealed many bugs and inaccuracies in Photoshop and its scripting system. You only have to look through the source of my AtlasMaker Photoshop script to see how many strange workarounds are required to accomplish straightforward tasks.

To solve these problems I implemented Photoshop’s blending modes in Processing, and use this to create my animations. Below are a few frames from Toxin’s shot animation that demonstrate the technique. The way the colours shift throughout the animation is down to the movement of multiple layers blended into a simple white shot sprite. You can get a better idea of how this looks in the game by looking at the screenshots I posted a couple of weeks ago.


Many of Toxin’s sprites use animated image processing effects


I also used Processing as a test bed to work out algorithms before implementing them in the game. For example, Toxin has a weapon which freezes the edges of groups of cells. It didn’t take long to prototype this in Processing.


Testing a powerup that uses a flood fill algorithm to find edge cells

Stay tuned for more posts on Toxin, and a new version of my texture atlas Photoshop script which is in final testing…