Planet Genetics

Try It Yourself!

Generate your ideal planet:

Process Documentation

I took the genetic algorithm code from https://github.com/algodeck/genetic-algorithm-factory?tab=readme-ov-file and altered it to draw planets instead of faces.

I started by creating an HTML page format for the 'cards' (each citizen's object, a box for an image and a label with the fitness level) to be set in. I learned from the last embedded code project I did in Homework 1 that I should include a reset button that acts the same as refreshing the entire page to run an entirely new file generation.

I then imported the code. I used the ga.js and index.js files from the repository, and incorporated them both into my HTML file.

Next, I started writing the code to randomly generate values for each variable and draw the planets and moons in each card. I replaced the six face elements with six of my own:

    const variables = [

        'planetColor',

        'planetSize',

        'planetRings',

        'moonNum',

        'moonSize',

        'moonDistance',

    ];

I learned a lot about different types of vector graphics, SVG elements and HTML Canvas, and how to use each of them. I ended up using canvas elements/graphics to draw the shapes for this program, since that's what I'm most used to. I used Claude AI to help with writing code for more complicated graphics past the planet circles (rings, stars, orbit paths).

The genetic algorithm was surprisingly well-behaved with new visuals and elements being applied to it. I expected to have to do a lot of debugging with it, but once I got both imported algorithm files incorporated into mine, there really wasn't much to do!

With more time, I would like to add text pop-ups to the program that tell the user when a mutation has happened, because I think that could be cool to see. For example: "Mutation: planet color"

Design Process