![]() ![]() The frame rate reduced to a measley 0.7 fps and my laptop sounded like it was trying to take off. You can see it’s running pretty slowly! My poor browser was desperately trying to render more than 11,000 checkboxes in a 150x75 table each tick. Here it is running in the browser-I even made the checkboxes smaller so they looked more like cells: The HTML DOM acts as a live data structure, and rebuilding the DOM tree for every new generation proved costly. This implementation turned out to be pretty inefficient though, and performance was abismal. ![]() This closure function then updated the state of the cell that it corresponded to internally, which allowed the user changes to be included when computing the next generation. A nice feature of JS was being able to eloquently pass on the location of the checkbox that a user had clicked to a closure function. If the user checks or unchecks the checkboxes, their changes should be included when computing the next generation.Īs the exercise called for an HTML table, showing the next generation on the page involved first computing internally what the state of each cell should be and then replacing the checkboxes in the table on the page. Important: The number of alive neighbors is always based on the cells before the rule was applied.įor this exercise, I needed to display a table of checkbox fields on a webpage, with buttons to advance to the next generation and to run the game automatically. Any dead cell with three alive neighbors becomes an alive cell.Īt each tick, a new generation is created by counting the number of alive neighbors each cell has and applying the rules to every cell simulataneously in the grid.Any alive cell with less than two or more than three alive neighbors dies (isolation or overpopulation).Any alive cell with two or three alive neighbors survives.The rulesĬonway actually wrote four rules for Life, but they can be condensed into these three: ![]() Life is a zero-player game, which means that you can set the initial configuration and watch how it evolves over time-the game doesn’t need any further user input. Life is played on an infinitely large grid of square cells-each cell can be either alive or dead.Īn alive cell is shown by putting a marker on its square, like this:Įach cell has eight neighbours, which are the cells that are found horizontal, vertical, or diagonal to the cell: What is Life?Ĭonway’s Game of Life (or simply Life ) is a well-known cellular automaton created by mathematician John Conway. It’s a delightful, well written book that introduces the language and offers exercises at the end of each chapter-one of the more interesting exercises was implementing Conway’s Game of Life. I took a short detour from C++ to learn Javascript by working through the book Eloquent Javascript. Cellular Automata-a JavaScript implementation of Conway's Game of Life | TP Home Résumé About Blog Projects Cellular Automata-a JavaScript implementation of Conway's Game of Life 15 February 2021 ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |