The Evolution of Color
This Emergent Mind project uses genetic algorithms to evolve a population of colors where you, the user, can select which color represents the fittest color and observe how it affects the population over time.
How it Works
A standard Red Green Blue (RGB) color is made up of exactly three bytes (24 bits).
For example, here is red:
| R | G | B | |
|---|---|---|---|
| Hex | FF | 00 | 00 |
| Decimal | 255 | 0 | 0 |
| Binary | 11111111 | 00000000 | 00000000 |
And here is yellow:
| R | G | B | |
|---|---|---|---|
| Hex | FF | FF | 00 |
| Decimal | 255 | 255 | 0 |
| Binary | 11111111 | 11111111 | 00000000 |
When you load this page, the population consists of random colors:
The fittest color is set to red by default, but you can change it at any time. The closer a color’s bits are to the fittest color's bits, the more likely it is to survive to the next generation.
You can hover over a color to see the bits that comprise it, the bits of the fittest color, and how many of the color's bits match the fittest color's bits (its fitness):
After you start the evolutionary process, the colors will use a genetic algorithm to evolve and trend towards the fittest color. The reason the colors never completely match the fittest color is because each color is always subject to mutation and crossover in each new generation (see below).
You can monitor the average fitness of the population to see how it trends over the course of many generations:
If you change the fittest color during the evolutionary process, you can see how it drastically affects the average fitness, especially if you swap all of the bits (such as changing the fittest color from black to white):
In the real world this would be like raising the average global temperature by ten degrees over a short period of evolutionary time. Organisms that have evolved to survive in the cooler climate would find themselves in an environment that they are not as well suited for. Over time, the organisms that survive would be more likely to reproduce and pass on their genes, raising the average fitness of the population.
A Quick Intro to Genetic Algorithms
The colors in this experiment evolve using a simple genetic algorithm outlined by Melanie Mitchell in her excellent book, An Introduction to Genetic Algorithms.
Quoting the book:
1. Start with a randomly generated population of n l-bit chromosomes (candidate solutions to a problem).
Each color in the population is randomly assigned 24 bits (its chromosome) that determine its color.
2. Calculate the fitness f(x) of each chromosome x in the population.
The fitness is calculated by counting how many bits in the color’s chromosome are equal to the corresponding bits in the fittest color’s chromosome.
3. Repeat the following steps until n offspring have been created:
a. Select a pair of parent chromosomes from the current population, the probability of selection being an increasing function of fitness. Selection is done “with replacement,” meaning that the same chromosome can be selected more than once to become a parent.
A color is chosen from the population using fitness-proportionate selection using roulette wheel sampling which is conceptually equivalent to giving each individual a slice of a circular roulette wheel equal in area to the individual’s fitness. The roulette wheel is spun, the ball comes to rest on one wedge-shaped slice, and the corresponding individual is selected.
b. With probability Pc (the “crossover probability” or “crossover rate”), cross over the pair at a randomly chosen point (chosen with uniform probability) to form two offspring. If no crossover takes place, form two offspring that are exact copies of their respective parents.
In this experiment, the crossover probability is set to 0.7.
c. Mutate the two offspring at each locus with probability Pm (the mutation probability or mutation rate), and place the resulting chromosomes in the new population.
The mutation rate for each chromosome is 0.001 (1 in 1,000).
4. Replace the current population with the new population.
Each time the population is replaced with a new one, a new generation of colors is displayed in your browser.
5. Go to step 2.
This process is repeated indefinitely until you stop the simulation.
If you'd like to learn more about the implementation, you can view the source on this page and explore the JavaScript used in this project.
As always, if you have any questions or feedback please do not hesitate to shoot me an email: matthew.h.mazur@gmail.com.