Homework 2
Generate your ideal planet:
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"