About:

Welcome to Yokiebobs cellular automata playground! This project was a lot of fun to make. It uses the gpu via the new API webgpu to render and simulate cellular automata. (Including Conways game of life.) You can create your own rules, (there are 262144 possibilities!) and you can draw on the screen too, after creating the shape that you want to draw. Feel free to look through the code at your own risk!

How to:

Since this program is somewhat versatile, you may have to stumble around with the controls for a bit. To shorten that experience, read this!

Drawing:

To draw, first you need to create your shape. Go down until you see the black box inside the controls. Click and draw something, like a happy face or your favorite glider! After you are done drawing click on the screen. You should see your shape drawn in a rectangle at your mouse. If you don't want to have the black overwrite the screen, click on the DrawBlack button, which toggles that setting. If you drawing is bigger than the drawing screen then resize it, but if you change the width and height of the screen it will be cleared!If you are drawing a complicated puffer then make sure that the screen is big enough so you don't lose your progress. If you need to erase, right click. After clicking a few times you may want to drag it continuously. Hold the "d" key to do this.

Creating Rules:

After you have played around with the default rules, you may want to make your own "coolLife". To do this take a look at the check boxes. These show what the rules are, the top row is for the cell if it is alive, and the bottom row is for if the cell is dead. There are 9 check boxes in each row because there are 8 neighbor cells, and there is a possibility that all of the neighbors are off, making 9 total. For example, if the cell is alive and has 2 neighbor cells that are on then it will stay on. Try turning some of these checkmarks on and off, and then clicking updateRule. Once you get to one that you want to keep, click saveRule and give it a name! Click on the button that appears in the list with it's name to change the simulation back to that rule.

Keyboard shortcuts:

  1. d: Draw continuously
  2. p: Pause simulation, but you can still draw
  3. r: Fill with random
  4. c: Clear Screen

Credits:

Thanks to Xacer for the default "Xacer's smooth life", you can see his program here.
Thanks to all of the folks working on making webgpu implemented, as well as the educators who are making it possible to learn online.

All code is original and registered under the MIT license.




Enter tick time:



Enter Canvas Size



Saved Rules