Image Evolution with Genetic Algorithms

After reading up on some fantastic work in the field of Genetic Algorithms by Karl Sims I thought I'd give implementing his ideas in flash a go.

First and foremost, click the image below to run the application, left click to select the strongest genotype, control click to randomly mutate an image, and shift click to save an image you like...

There were three specific challenges that had to be tackled when working with evolving images. Firstly how to convert DNA into an image, secondly how to cross breed sets of DNA and thirdly how to mutate DNA effectively.

Each gene on a set of DNA is stored as a reference to a function (in this case a Pixelbender shader) and a seed integer. There are 3 types of gene, generators, combiners and affectors. Generators create an image from a blank canvas, affectors transform an image in some way while combiners merge a generated image with another image. Currently there are 5 combine functions, 10 generators and 14 affectors in total, so a choice of 29 genes each with some set of parameters based on a seed value.

In order to generate an image from a set of DNA then, the phenotype of a gene is calculated by applying that gene's function in order. The range of images that can be produced from such an image is impressive to say the least. Here are some examples:

To breed an image two sets of DNA are compared to each other, there is simply a 50% chance of the new DNA choosing a gene from one set and a 50% chance of choosing that gene from the other set.

Mutations work in a similar way, all genes have the potential to mutate with some probability, if they mutate quite marked changes in the phenotype can be seen. Here is an example of a set of images from the same genotype with minor mutations:

Anyway have a play around and let me know if you manage to evolve any cool images!

Update: here is a typical evolution route:

Recursive Random Triangular Subdivision

I've started getting into writing my blog on my lunch hour so I've had to come up with some quick and easy 30 minute experiments - I need the other 30 minutes to eat... Here is today's result (it follows along the lines of my circle packing experiment a while back). It works like this. One starts by drawing a triangle, then picks a random point within that triangle. These vertices are then used to draw more triangles, and the process is repeated recursively. At each stage the triangles are rendered with a level of transparency. This means more "visited" triangles will appear brighter thus forming a kind of network. Click the image below to launch the demo and find the source here.

Embedding Fonts In Actionscript 3

I hardly use the Flash IDE at all any more. Pretty much all of my coding is done in FlashDevelop. One thing that the IDE does very well is the embedding of fonts but there are certainly ways of doing it using purely code. People seem to have found many ways of embedding fonts but this one has always worked for me:

This class is my font library - I embed all fonts that I use in here. The two things to note are the embed code for the fonts and public constants to allow me to access them using FontLibrary.FONT...

package org.experimentalized.fonts 
{
 /**
  * Font Library
  * @author Experimentalized
  */
 public class FontLibrary 
 {
  //Embed your fonts here
  [Embed(source="samplefont.ttf",fontName = "Mia's Scriblings ~", mimeType = "application/x-font-truetype")]
  private static const _samplefont:String;
  
  //Access font using this
  public static const FONT_SAMPLE:String = "Mia's Scriblings ~";
 }
}

This is the main class of my application. Here I create a sample text field and set the text format to one of my embedded fonts.

package org.experimentalized.fonts 
{
 import flash.display.Sprite;
 import flash.text.TextField;
 import flash.text.TextFormat;
 
 public class Fonts_Demo extends Sprite 
 {  
  public function Fonts_Demo() 
  {
   //Create a new text field
   var text_field:TextField = new TextField();
   text_field.width = 500;
   text_field.height = 200;
   
   //Make sure we embed fonts
   text_field.embedFonts = true;
   
   //Create some text
   text_field.text = "This is a test";
      
   //Set the font using our new font library
   text_field.setTextFormat(new TextFormat(FontLibrary.FONT_SAMPLE, 30));
   
   //Add the text field to the display object list
   addChild(text_field);
  } 
 }
}

Easy! You can download all of the source files for this and my other projects from: http://experimentalized.com/blog/sourcezip/Blog.zip.

Two Dimensional Water Simulation

This is my first blog post in a while so I thought I'd try something interesting. A few years ago I took a look at some discrete cell methods for simulating water in 2D. I decided to take a new approach and use a particle based method to simulate particles interacting. The image below shows the simulation running with 6000 particles at a reasonable framerate. All the particles in the scene repulse one another, and are accelerated earthward by gravity. If a naive approach were taken, the number of tests performed on each iteration of the program would be 6000 * 6000 = 3600000 distance calculations. This would be a large number of square roots for even the best CPU. In order to get around this I make use of some simple image filters to approximate the same result. Each particle is rendered to a bitmap buffer as a single pixel (I took this approach for a previous experiment). These pixel values are then blurred and the gradients at each point on the bitmap calculated using Sobel operators. At this stage calculating particles updated trajectories is just a case of subtracting the value of the gradient at each point from their velocity. Because the blur filter naturally falls off the repulsive force is proportional to the kernal used in the filtering process.

As usual just click to try out the demo!

The source code for all projects from now on will be added to a single flash project which can be found at:

http://experimentalized.com/blog/sourcezip/Blog.zip