brettimus / colors-and-stuff

:art:

Is this 🎨?

Let's use a genetic algorithm to find complementary colors!

Why?

😶

View the demo!

The Algorithm

1. Generate ten random palettes
2. Calculate the fitness of each palette
3. Breed the top six palettes in pairs (and calculate fitness of offspring)
4. Mutate one of top six palettes (and calculate its fitness)
5. Mutate one of bottom four palettes (and calculate its fitness)
6. Select the top ten most fit palettes
7. Repeat steps 2-6 until the steady state is reached

The Current Implementation

• Each palette is composed of two colors
• The fitness function prefers complementary colors
• The algorithm terminates after 400 loops (There is no steady state!)

The Breeding

Needs improvement! 😞

Breeding two palettes means that each color from one palette has its hue, saturation, and lightness mixed with a color from the other palette.

The Mutation

Needs improvement! 😞

Right now, mutation simply generates a new, random palette. Clearly, this could use some more thought.

The Fitness

The 💪 fitness of a palette is a function of its colors's hues, saturations, and lightnesses. Specifically,

• The fitness is 0 if either color is too light or too dark
• The fitness is 0 if either color is too unsaturated
• Otherwise, the fitness is the minimum squared angle between the two hues

The Steady State

Todo ⚠️

This just returns false right now.

Oops. 😁

The Visualization of The Algorithm

Currently, we only visualize the “most fit” palette once the algorithm is finished.

I would really love to visualize the evolution of a color palette. I have two ideas on how to do this. (I am more partial to the first.)

Idea 1: A state queue

Keep a record (probs a queue) of the algorithm's state at the beginning of its main loop.

We can then use that queue to animate the evolution of our colors.

Idea 2: Asynchronous processing

Asynchronously step through genetic algorithm.

Abstract the genetic algorithm into an object that contains both the state of the algorithm and a #tick-like method (which simply runs through steps 2-6 of the algorithm). Then, we can space out each tick by a set amount of time, and we visualize the state of the algorithm after each call to tick.

👋 Hey! Get in touch!

I'd love to talk to someone about how to construct some alternative fitness functions for this here algorithm.

✨ The spark list

A collection of links to influential stuff and things.

• Color scheme theory
• Color Schemer (Twitter Bot)
• Chroma

colors-and-stuff's Issues

:mouse: Click fails in firefox

A symptom of using an declared variable, methinks (see: event in the interaction handler).

Fitness only evaluates hue

Because the fitness function ignores saturation and lightness, we can have two colors whose hues are complementary, but one of them might look white, black, or gray. (E.g., one of them might have 100% lightness and actually look white.)

Fitness should prefer similar saturation and lightness

But not too much, ya know?