You are browsing as a guest. Sign up (or log in) to start making projects!

Evolution Simulator

  • 5 Devlogs
  • 11 Total hours

An evolution simulator where you watch pixel creatures adapt to their environment over generations.

Ship #1

I have finally finished my evolution simulator! It is browser based and hosted on GitHub pages. I made it using Vanilla JavaScript, HTML, and CSS.

The main issue I encountered was major population spikes that I could not for the life of me figure out, but in the end it turned out I was just seriously overcomplicating things lol! I thought it was some kind of bug, but all I needed to do was increase the breeding cooldown.

I am very proud of this project, because the making of this was so smooth for one of my bigger projects! Sure there were bugs, but I was fairly easily able to fix most of them with some console logs and elbow grease. There were only a few that I needed some external help identifying, but ChatGPT quickly pointed out the faulty code. Once I knew where the problems were at I could fix them no problem. I'm also proud of how quickly I could whip up my HTML layout and CSS styling, and the movement animation and grid generation too. I thought they would be super hard to do, but then they worked, like, first try lol.

I feel like everything is pretty obvious, but just in case...
- The slider adjusts the speed of the simulation.
- To regenerate the environment and reset the simulation, refresh the page.

There are 5 important colors in the simulator:

- Red. This is for food sources.
- Light Blue. This is for water sources.
- Dark Blue. This is for male pixel creatures.
- Pink. This is for female pixel creatures.
- Green. This is for disease cells. (my beautiful plague children <3)

  • 5 devlogs
  • 11h
  • 5.97x multiplier
  • 66 Stardust
Try project → See source code →
Open comments for this post

40m logged

I added the speed adjustment slider! Now you don’t have to be bored to tears watching the little pixels crawl around the grid lol! It was harder than I thought it would be. Apparently setInterval does not update the timeout without a bunch of intervention.

Also, I got a picture with the disease pixels that I mentioned in my last devlog. Behold my green little plague children!

0
0
16
Open comments for this post

4h 34m 11s logged

I made a lot of changes and forgot to post devlogs…. I also realized that I have been forgetting to update the github repo as I work… oopsies! 😅

=======

This one’s gonna be a long one! I tried making it so only the males could look for mates or produce offspring (Fun Fact: I made it so the males were the one’s who had the babies, just like seahorses!), I added a large breed timeout so that they couldn’t just breed again and again right away, and lots and lots of other ways to reduce the population spikes, but none of them really worked. So instead I introduced a way to quickly kill of large groups so that they wouldn’t fill the whole grid. Disease!

=======

To kinda replicate what happens irl when populations of a species get too dense, I added a sickness that targets and kills any of the creatures it comes into contact with. I did not think to get a picture of them for some reason 🤦‍♀️ but they work very similar to the pixel creatures, except that there is no hunger or thirst factors, they are lime green, and I actually put the effort into giving them a function to assess the surrounding pixels and determine if there is something of interest in that area. If they find something they want to get closer to, namely creatures they want to contaminate, then they will start heading in that direction.

=======

The disease helped keep the population lower, but it still let the creatures reproduce too quickly so I also put a cap on how high the population will get before going temporarily infertile. They were still hitting the threshold for infertility very quickly and the population rarely if ever got low enough to fully eliminate the disease.

=======

I was kinda tired of wrestling with the crazy overbreeding bugs by now, so I moved on to some other bugs and fine tuning. I gave the creatures the ability to assess their surroundings, just like the disease cells, and get up close to food, water, and eligible mates instead of just completing their respective interactions from a long distance. In doing so I ended up scrapping my initial attempt at a “search” function so that I could optimize my code a bit. I screwed it up so bad that the creatures didn’t even spawn anymore! I tried fixing a few things, but could not for the life of me figure out how to fix the glaring frontend issues. I had ChatGPT take a look at my code, and it pointed out about a gazillion different errors it found. After fixing those up, I got the creatures back and my code working again. The population spikes were a bit better too because one of the errors it pointed out was that I was only checking whether the males’ breed timeout was finished, not the females’, so they could immediately breed with the next male they came across. Adding a cool down to the females helped a ton, plus I made the cooldown drop by 0.5 per second instead of 1 per second. I also added a visual representation of the stats into the HTML page so that users can see the population evolve instead of just taking my word for it lol. All I think it needs now is an option to speed up the simulation since it is pretty slow and can get very boring very quickly.

0
0
9
Open comments for this post

2h 50m 54s logged

Added a lot of features, discovered so many bugs ToT

I made food and water sources, represented by the big red and blue squares, which the creatures will search for if their hunger or thirst levels get too low. If either of those levels hit zero, the creature dies and gets removed from the board. This introduced some errors because I had to remove the creature from the dictionary holding it, leaving a gap in my numerically organized keys. I tried solving this by adding the deleted key to a list of open keys that will be reused when creating new creatures instead of just randomly generating a new one. I’m still not sure if it worked though, because…

The mating feature is so broken. I made it so that the creatures are either AFAB or AMAB, and they are color coded accordingly (pink for female, blue for male). I’m thinking about adding a third gender that can reproduce asexually, but that’s a task for future me lol. Right now they will immediately reproduce with any creature of the opposite gender within range if they’re above critical hunger and thirst levels. This is a problem because now they are making so many babies that they are freezing the window! I need to fix it so that I can properly debug the code and see if my fix for the death errors is actually working. Plus there is a whole wall of error messages in the console before it freezes up, so I need to decipher and fix those too. I’ve got my work cut out for me!

0
0
11
Open comments for this post

1h 55m 52s logged

Added basic pixel creatures! I made them bright pink now instead of just plain white, but also might change that in the future. I created a JS creature class (OOP is so much easier in JS than Python!) so that I could make lots of creatures with less code and I added movement logic. Right now they pick a random direction to go in, and I have them looped so that they will keep going in that direction for a few steps before picking a new one. This prevents them from just moving back and forth and it also makes it look better to have them make a little progress before turning around. I added edge and object detection logic so that they don’t go off the grid and they won’t walk on each other. Now I need to add hunger, thirst, and death detection along with sources of water and food.

0
0
10
Open comments for this post

1h 0m 36s logged

Started the project, already made a good amount of progress! I haven’t coded in a while so it took me a bit to remember some of the basic things, like using src in the HTML script tag instead of link or href lol (that one always trips me up if it’s been a while!). Other than small setbacks like that, it’s been almost concerningly bug free. I got my CSS settings to make a permanently dark mode grid layout, and I used JS to add 1600 div elements to a container div, creating a 40x40 grid of cells. The white cell is the beginnings of one of the pixel creatures. Right now it doesn’t do anything, but I’m about to start on the movement function to make it walk around the grid so it can eventually look for food, water, and other creature pixels. Wish me luck!

0
0
9

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…