Original
Best
Evolving
95.42% Fitness
5922 Improvements
305400 Mutations
Start
8h 2m 59s Elapsed time
10.5 Mutations per second

Set new image URL
Image should be small (~200x200 pixels), otherwise fitness computation is very slow.

Examples: Mona Lisa Darwin Velociraptor John Koza


Export DNA
Export SVG
Import DNA
[help]
Mutation
Gaussian
Soft
Medium
Hard
Initialize DNA
Color
White
Black
-
+
50 Polygons
-
+
6 Vertices

What is this?

A simulated annealing like optimization algorithm, a reimplementation of Roger Alsing's excellent idea.
The goal is to get an image represented as a collection of overlapping polygons of various colors and transparencies.

We start from random 50 polygons that are invisible. In each optimization step we randomly modify one parameter (like color components or polygon vertices) and check whether such new variant looks more like the original image. If it is, we keep it, and continue to mutate this one instead.

Fitness is a sum of pixel-by-pixel differences from the original image. Lower number is better.
Displayed fitness is now a percentage of how close the new image is to the original one (1-current difference/maximum difference). The best possible is 100%. This new fitness is normalized so that it's easier to compare different images and different sizes.

This implementation is based on Roger Alsing's description, though not on his code. There are probably some subtle differences in how the mutations are done, how the polygons are represented and how the fitness is computed as I tried to figure out how to have it running reasonably fast in JavaScript + <canvas> environment.

How does it look after some time?






Does it work on all images?

It depends, success varies. The best seem to be color images with well defined features.











See also Firefox logo evolution video. Thanks to Brooss.









What is DNA import/export?

Warning: Another experimental (that is not tested at all) feature. Most of the bugs should be fixed now.

Click Export DNA to copy polygon representation of the current best image to the clipboard. You can use it to save your optimization state, for example to send it to somebody by mail or post it on the web.

If you have such saved DNA string, you can later on paste it into the clipboard and click on Import DNA. This should reproduce the optimization state from the time it was saved via export.

Please note that DNA is independent of the original image. It means that if you used a custom image, you should also set this image (via image form) to reproduce a complete state. (Or you could play with switching images/DNA midway)

DNA format is very simple (all numbers are INTs except for ALPHA which is FLOAT): 
NUMBER_OF_VERTICES NUMBER_OF_POLYGONS R G B ALPHA X0 Y0 X1 Y1 ... XN YN ... R G B ALPHA X0 Y0 X1 Y1 ... XN YN ...

Click Export DNA as SVG to get vector image from your current best DNA. Thanks to Martin for SVG export.

Requirements

Unfortunately, due to required <canvas> getImageData method support, this particular implementation works only on few browsers.

Tested and works on (example mutation speed for Mona Lisa at the start of optimization on my notebook):

Tested and doesn't work on: It may work on development versions of Safari and be faster on development versions of Firefox and Opera.

Frequently asked questions

[Q] I want to play with the algorithm, but my local copy doesn't want to run. What should I do?
[A] The problem is JavaScript's same origin security policy. You must access the page via local webserver using http://localhost instead of just file://. You can use for example Apache from XAMPP.

Then it would still work just on local images (located at the same server, access via "http://"). If you want to access images from remote sites, you need to work around, for example by creating a proxy, so that images would be coming from your server. PHP Curl is one possible way how to do a simple proxy.

[Q] How do I compute a new fitness from the old one?
[A] new fitness = 100 * (1 - old fitness / (width*height*3*255))
[Q] Can I have a compiled version to run it really fast on my computer locally?
[A] You can download Roger Alsing's original binaries and C# sources. Also there is a C version for Linux by Nick Welch.
[Q] What are different mutations?

Contact

If you have any questions, suggestions, comments, you can send me a mail. Or you can check Hacker News or Reddit comments for this page. Also I'm on Twitter as @alteredq.

Feel free to improve on my implementation. The code is rather ugly, though some ugliness is there for performance reasons.

Source is released under MIT License.