,
150 | }
151 | ```
152 |
153 | To access the cell at a given row and column, we translate the row and column
154 | into an index into the cells vector, as described earlier:
155 |
156 | ```rust
157 | impl Universe {
158 | fn get_index(&self, row: u32, column: u32) -> usize {
159 | (row * self.width + column) as usize
160 | }
161 |
162 | // ...
163 | }
164 | ```
165 |
166 | In order to calculate the next state of a cell, we need to get a count of how
167 | many of its neighbors are alive. Let's write a `live_neighbor_count` method to
168 | do just that!
169 |
170 | ```rust
171 | impl Universe {
172 | // ...
173 |
174 | fn live_neighbor_count(&self, row: u32, column: u32) -> u8 {
175 | let mut count = 0;
176 | for delta_row in [self.height - 1, 0, 1].iter().cloned() {
177 | for delta_col in [self.width - 1, 0, 1].iter().cloned() {
178 | if delta_row == 0 && delta_col == 0 {
179 | continue;
180 | }
181 |
182 | let neighbor_row = (row + delta_row) % self.height;
183 | let neighbor_col = (column + delta_col) % self.width;
184 | let idx = self.get_index(neighbor_row, neighbor_col);
185 | count += self.cells[idx] as u8;
186 | }
187 | }
188 | count
189 | }
190 | }
191 | ```
192 |
193 | The `live_neighbor_count` method uses deltas and modulo to avoid special casing
194 | the edges of the universe with `if`s. When applying a delta of `-1`, we *add*
195 | `self.height - 1` and let the modulo do its thing, rather than attempting to
196 | subtract `1`. `row` and `column` can be `0`, and if we attempted to subtract `1`
197 | from them, there would be an unsigned integer underflow.
198 |
199 | Now we have everything we need to compute the next generation from the current
200 | one! Each of the Game's rules follows a straightforward translation into a
201 | condition on a `match` expression. Additionally, because we want JavaScript to
202 | control when ticks happen, we will put this method inside a `#[wasm_bindgen]`
203 | block, so that it gets exposed to JavaScript.
204 |
205 | ```rust
206 | /// Public methods, exported to JavaScript.
207 | #[wasm_bindgen]
208 | impl Universe {
209 | pub fn tick(&mut self) {
210 | let mut next = self.cells.clone();
211 |
212 | for row in 0..self.height {
213 | for col in 0..self.width {
214 | let idx = self.get_index(row, col);
215 | let cell = self.cells[idx];
216 | let live_neighbors = self.live_neighbor_count(row, col);
217 |
218 | let next_cell = match (cell, live_neighbors) {
219 | // Rule 1: Any live cell with fewer than two live neighbours
220 | // dies, as if caused by underpopulation.
221 | (Cell::Alive, x) if x < 2 => Cell::Dead,
222 | // Rule 2: Any live cell with two or three live neighbours
223 | // lives on to the next generation.
224 | (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
225 | // Rule 3: Any live cell with more than three live
226 | // neighbours dies, as if by overpopulation.
227 | (Cell::Alive, x) if x > 3 => Cell::Dead,
228 | // Rule 4: Any dead cell with exactly three live neighbours
229 | // becomes a live cell, as if by reproduction.
230 | (Cell::Dead, 3) => Cell::Alive,
231 | // All other cells remain in the same state.
232 | (otherwise, _) => otherwise,
233 | };
234 |
235 | next[idx] = next_cell;
236 | }
237 | }
238 |
239 | self.cells = next;
240 | }
241 |
242 | // ...
243 | }
244 | ```
245 |
246 | So far, the state of the universe is represented as a vector of cells. To make
247 | this human readable, let's implement a basic text renderer. The idea is to write
248 | the universe line by line as text, and for each cell that is alive, print the
249 | Unicode character `◼` ("black medium square"). For dead cells, we'll print `◻`
250 | (a "white medium square").
251 |
252 | By implementing the [`Display`] trait from Rust's standard library, we can add a
253 | way to format a structure in a user-facing manner. This will also automatically
254 | give us a [`to_string`] method.
255 |
256 | [`Display`]: https://doc.rust-lang.org/1.25.0/std/fmt/trait.Display.html
257 | [`to_string`]: https://doc.rust-lang.org/1.25.0/std/string/trait.ToString.html
258 |
259 | ```rust
260 | use std::fmt;
261 |
262 | impl fmt::Display for Universe {
263 | fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
264 | for line in self.cells.as_slice().chunks(self.width as usize) {
265 | for &cell in line {
266 | let symbol = if cell == Cell::Dead { '◻' } else { '◼' };
267 | write!(f, "{}", symbol)?;
268 | }
269 | write!(f, "\n")?;
270 | }
271 |
272 | Ok(())
273 | }
274 | }
275 | ```
276 |
277 | Finally, we define a constructor that initializes the universe with an
278 | interesting pattern of live and dead cells, as well as a `render` method:
279 |
280 | ```rust
281 | /// Public methods, exported to JavaScript.
282 | #[wasm_bindgen]
283 | impl Universe {
284 | // ...
285 |
286 | pub fn new() -> Universe {
287 | let width = 64;
288 | let height = 64;
289 |
290 | let cells = (0..width * height)
291 | .map(|i| {
292 | if i % 2 == 0 || i % 7 == 0 {
293 | Cell::Alive
294 | } else {
295 | Cell::Dead
296 | }
297 | })
298 | .collect();
299 |
300 | Universe {
301 | width,
302 | height,
303 | cells,
304 | }
305 | }
306 |
307 | pub fn render(&self) -> String {
308 | self.to_string()
309 | }
310 | }
311 | ```
312 |
313 | With that, the Rust half of our Game of Life implementation is complete!
314 |
315 | Recompile it to WebAssembly by running `wasm-pack build` within the
316 | `wasm-game-of-life` directory.
317 |
318 | ## Rendering with JavaScript
319 |
320 | First, let's add a `` element to `wasm-game-of-life/www/index.html` to
321 | render the universe into, just above the `
327 | |