Rodrigo Silveira

Genetic Algorithm Example

A slightly artsy demo of a genetic algorithm learning a non-linear function.

In this toy demonstration of genetic algorithms, the algorithm learns some arbitrary 2D function. The “chromosome” is represented by a sequence of <distance, angle> pairs. By rendering the first point at some location, we can render the next point in the sequence by computing the <x, y> coordinates relative to that first point by using the distance and angle for the current gene.

My motivation for this demo was to apply what I’ve been learning about genetic algorithms (in the context of reinforcement learning and optimizing/training deep learning models), but in a slightly less contrived application as most demos I’m seeing online. Typically, folks will demonstrate how to learn a single value (such as the pixels that compose an image or a cardinal direction to navigate a maze). The following example has two variables (angle and distance) and a minor ordering dependency. That is, if the first gene is bad, the second (and all subsequent ones) will likely not perform well.

Fitness Function

The fitness function for the entire instance is the sum of the Euclidean distance of each corresponding point to the base function.

How it works

To render a 2D function in the canvas below and start the simulation, click the Start button below to use the default sine wave or draw a pattern using your mouse/finger/stylus directly on the canvas.

In the rendering below, you’ll see the base function in green, and dark red lines representing some of the instances of the population. The fainter/thicker the line, the worse is its fitness. The thinnest, darkest line represents the best instance.

Next post

Hitomezashi Stitch Patterns in HTML Canvas

The other day I came across the concept of Hitomezashi stitch patterns from a Numberphile video on the subject. Before the video was over, I realized I had to code that up and see for myself how the probability for a point starting on/off would influence the pattern.

Read More →