Hi all! Here is the latest Rust side project I’ve been working on for the past couple of weeks: Lifeee, an implementation of John Conway’s Game of Life.
It was the opportunity for me to continue my Rust learning journey, and I think I’m finally starting to feel a bit comfortable with the language, especially ownership :). I also wanted to discover what was possible when using Rust for frontend development, and I must say I was so impressed by Yew! I didn’t think it would be so nice to use, especially since I have quite some experience with React.
A big difference compared to the various implementations you can find (often in Rust and Yew tutorials) is that the grid is infinite. This means that you can drag it to move in all directions, but also zoom in and out. This was probably the most challenging part of my project and involved a lot of calculus and doodles in my notebook! Also, since I used a canvas to draw the grid (and not DOM elements), the simulation is pretty fast even when a lot of cells are displayed :D
What I learned during this project:
- Use Yew [1] for frontend development: not very different from writing React components, with the advantages of Rust as a plus!
- Serialize/deserialize data: the available Game of Life patterns are extracted from the official Lexicon [2]; I parsed the text version to generate a serialized version (separate library: [3]) that I then import and deserialize in the app.
- Build the web app using GitHub actions and deploy it using Netlify: pretty straightforward using Trunk [4] as a bundler (also used for development).
You can find the source code of the app on GitHub [5]. Please tell me what you think of it! ;)
Can someone tell me more about how the predefined Game of Life patterns came to be? It it fascinating to me that these have names that people remember. I know this subject is well researched, but are the researchers finding these things randomly or is there some kind of analytical approach to design patterns that are likely to have a desired result?
The earliest patterns were found by simply doodling on the Life board and seeing what happened. Then programs like lifesrc (https://www.conwaylife.com/wiki/Lifesrc) were used to bruteforce patterns with specified properties. There are also 'soup searches' in which trillions of random starting conditions are evolved to see what emerges (https://catagolue.hatsya.com/home). Finally, patterns found in these ways can be combined to engineer more complex patterns, including computers.
Nice work. Funny coincidence I was just going through https://rustwasm.github.io/docs/book/ today, so Rust, WebAssembly, and the Game of Life was already on my mind.
A feature suggestion, if I may. It's fun to play with the rules of the game itself. Would you consider adding a way to tweak the birth/death rules? For example, "B3/S23" denotes the normal rules of the game (a cell is born if it has 3 live neighbors, and remains alive if it has 2 or 3).
You can play with the rules in my version of Life here[1].
Simply fantastic. I love Conway's Game of Life. This page makes it easy to observe a huge variety of creative patterns.
The book "The Recursive Universe" by William Poundstone is a fun look into the Game of Life, pairing observations and thoughts about the game with real world physics and life.
This is cool. What I particularly like about it is the use of grey to show which tiles were previously occupied. One change you might want to consider is making left click free-form draw and then right click could drag the grid.
Adding boundary conditions can be very interesting also. Ive played with things like stitching the field into a torus or klein bottle. You can end up with unique repeating patterns not otherwise possible.
It was the opportunity for me to continue my Rust learning journey, and I think I’m finally starting to feel a bit comfortable with the language, especially ownership :). I also wanted to discover what was possible when using Rust for frontend development, and I must say I was so impressed by Yew! I didn’t think it would be so nice to use, especially since I have quite some experience with React.
A big difference compared to the various implementations you can find (often in Rust and Yew tutorials) is that the grid is infinite. This means that you can drag it to move in all directions, but also zoom in and out. This was probably the most challenging part of my project and involved a lot of calculus and doodles in my notebook! Also, since I used a canvas to draw the grid (and not DOM elements), the simulation is pretty fast even when a lot of cells are displayed :D
What I learned during this project:
- Use Yew [1] for frontend development: not very different from writing React components, with the advantages of Rust as a plus!
- Serialize/deserialize data: the available Game of Life patterns are extracted from the official Lexicon [2]; I parsed the text version to generate a serialized version (separate library: [3]) that I then import and deserialize in the app.
- Build the web app using GitHub actions and deploy it using Netlify: pretty straightforward using Trunk [4] as a bundler (also used for development).
You can find the source code of the app on GitHub [5]. Please tell me what you think of it! ;)
[1] https://yew.rs/ [2] https://bitstorm.org/gameoflife/lexicon/ [3] https://github.com/scastiel/lexicon-rs [4] https://trunkrs.dev/ [5] https://github.com/scastiel/lifeee-rs