Evolution Art – A Genetic Image Algorithm


After reading up about Genetic Programming by Roger Alsing (, I decided to create a very simple version of it in Javascript.

Alsing's approach is to create a DNA object that contains information about the polygons, such as points and colour. It then iteratively alters the DNA until a closer representation is reached, at which point the DNA strand becomes the basis of the next generation.

I wanted to try it in a slightly different way, where the DNA object is replaced with the contents of the canvas of the most successful mutation of the previous generation.

The code creates a number of in-memory canvases (gene pools) and draws randomly coloured polygons to it, or colours picked from the source image if you select that option. It then compares each child to the source image. If the child is a closer match to the source image than the parent canvas is, (which in the first generation is just a white image), it will replace it and become the parent for the next generation.


This process simulates evolutionary mutation over time.

See the Pen Evolution Art by John Bower (@Beclamide) on CodePen.

It can take a long time for a decent representation of the original image to appear, but it is fairly hypnotic.