add time profiling and benchmarking

Author: solygambas

05-game-of-life/Cargo.toml

@@ -15,7 +15,7 @@ default = ["console_error_panic_hook"]
 
 [dependencies]
 wasm-bindgen = "0.2.63"
-js-sys = "0.3"
+# js-sys = "0.3"
 
 # The `console_error_panic_hook` crate provides better debugging of panics by
 # logging them with `console.error`. This is great for development, but requires
@@ -34,11 +34,11 @@ wee_alloc = { version = "0.4.5", optional = true }
 wasm-bindgen-test = "0.3.13"
 
 # logging
-# [dependencies.web-sys]
-# version = "0.3"
-# features = [
-#   "console",
-# ]
+[dependencies.web-sys]
+version = "0.3"
+features = [
+  "console",
+]
 
 [profile.release]
 # Tell `rustc` to optimize for small code size.

05-game-of-life/README.md

@@ -15,5 +15,6 @@ A zero-player game to learn how to use Rust, WebAssembly, and JavaScript togethe
 - testing the tick function and debugging.
 - pausing and resuming the game.
 - toggling a cell's state on click.
+- optimizing performances with time profiling and benchmarking.
 
 Based on [The Rust and WebAssembly Book](https://rustwasm.github.io/docs/book/) by The Rust and WebAssembly Working Group (2021).

05-game-of-life/after.txt

@@ -0,0 +1,11 @@
+
+running 0 tests
+
+test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s
+
+
+running 1 test
+test universe_ticks ... bench:     178,561 ns/iter (+/- 14,685)
+
+test result: ok. 0 passed; 0 failed; 0 ignored; 1 measured; 0 filtered out; finished in 3.32s
+

05-game-of-life/before.txt

@@ -0,0 +1,11 @@
+
+running 0 tests
+
+test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s
+
+
+running 1 test
+test universe_ticks ... bench:     748,300 ns/iter (+/- 50,043)
+
+test result: ok. 0 passed; 0 failed; 0 ignored; 1 measured; 0 filtered out; finished in 4.16s
+

05-game-of-life/benches/bench.rs

@@ -0,0 +1,18 @@
+// to use feature, you need to run: rustup default nightly
+// cargo bench | tee before.txt
+// cargo bench | tee after.txt
+// cargo benchcmp before.txt after.txt // x 4.19
+// rustup default stable
+#![feature(test)]
+
+extern crate game_of_life;
+extern crate test;
+
+#[bench]
+fn universe_ticks(b: &mut test::Bencher) {
+    let mut universe = game_of_life::Universe::new();
+
+    b.iter(|| {
+        universe.tick();
+    });
+}

05-game-of-life/src/lib.rs

@@ -2,16 +2,34 @@ mod utils;
 
 use std::fmt;
 use wasm_bindgen::prelude::*;
-extern crate js_sys;
-// extern crate web_sys;
+// extern crate js_sys;
+extern crate web_sys;
+use web_sys::console;
 
 // A macro to provide `println!(..)`-style syntax for `console.log` logging.
 // macro_rules! log {
 //     ($( $t:tt)* ) => {
-//         web_sys::console::log_1(&format!( $( $t )*).into());
+//         console::log_1(&format!( $( $t )*).into());
 //     };
 // }
 
+pub struct Timer<'a> {
+    name: &'a str,
+}
+
+impl<'a> Timer<'a> {
+    pub fn new(name: &'a str) -> Timer<'a> {
+        console::time_with_label(name);
+        Timer { name }
+    }
+}
+
+impl<'a> Drop for Timer<'a> {
+    fn drop(&mut self) {
+        console::time_end_with_label(self.name);
+    }
+}
+
 #[wasm_bindgen]
 #[repr(u8)]
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
@@ -42,18 +60,62 @@ impl Universe {
     }
 
     fn live_neighbor_count(&self, row: u32, column: u32) -> u8 {
+        // let mut count = 0;
+        // for delta_row in [self.height - 1, 0, 1].iter().cloned() {
+        //     for delta_col in [self.width - 1, 0, 1].iter().cloned() {
+        //         if delta_row == 0 && delta_col == 0 {
+        //             continue;
+        //         }
+        //         let neighbor_row = (row + delta_row) % self.height;
+        //         let neighbor_col = (column + delta_col) % self.width;
+        //         let idx = self.get_index(neighbor_row, neighbor_col);
+        //         count += self.cells[idx] as u8;
+        //     }
+        // }
+        // count
+
         let mut count = 0;
-        for delta_row in [self.height - 1, 0, 1].iter().cloned() {
-            for delta_col in [self.width - 1, 0, 1].iter().cloned() {
-                if delta_row == 0 && delta_col == 0 {
-                    continue;
-                }
-                let neighbor_row = (row + delta_row) % self.height;
-                let neighbor_col = (column + delta_col) % self.width;
-                let idx = self.get_index(neighbor_row, neighbor_col);
-                count += self.cells[idx] as u8;
-            }
-        }
+
+        let north = if row == 0 { self.height - 1 } else { row - 1 };
+
+        let south = if row == self.height - 1 { 0 } else { row + 1 };
+
+        let west = if column == 0 {
+            self.width - 1
+        } else {
+            column - 1
+        };
+
+        let east = if column == self.width - 1 {
+            0
+        } else {
+            column + 1
+        };
+
+        let nw = self.get_index(north, west);
+        count += self.cells[nw] as u8;
+
+        let n = self.get_index(north, column);
+        count += self.cells[n] as u8;
+
+        let ne = self.get_index(north, east);
+        count += self.cells[ne] as u8;
+
+        let w = self.get_index(row, west);
+        count += self.cells[w] as u8;
+
+        let e = self.get_index(row, east);
+        count += self.cells[e] as u8;
+
+        let sw = self.get_index(south, west);
+        count += self.cells[sw] as u8;
+
+        let s = self.get_index(south, column);
+        count += self.cells[s] as u8;
+
+        let se = self.get_index(south, east);
+        count += self.cells[se] as u8;
+
         count
     }
 
@@ -75,44 +137,53 @@ impl Universe {
 #[wasm_bindgen]
 impl Universe {
     pub fn tick(&mut self) {
-        let mut next = self.cells.clone();
-
-        for row in 0..self.height {
-            for col in 0..self.width {
-                let idx = self.get_index(row, col);
-                let cell = self.cells[idx];
-                let live_neighbors = self.live_neighbor_count(row, col);
-
-                // log!(
-                //     "cell[{}, {}] is initially {:?} and has {} live neighbors",
-                //     row,
-                //     col,
-                //     cell,
-                //     live_neighbors
-                // );
-
-                let next_cell = match (cell, live_neighbors) {
-                    // Rule 1: Any live cell with fewer than two live neighbours
-                    // dies, as if caused by underpopulation.
-                    (Cell::Alive, x) if x < 2 => Cell::Dead,
-                    // Rule 2: Any live cell with two or three live neighbours
-                    // lives on to the next generation.
-                    (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
-                    // Rule 3: Any live cell with more than three live
-                    // neighbours dies, as if by overpopulation.
-                    (Cell::Alive, x) if x > 3 => Cell::Dead,
-                    // Rule 4: Any dead cell with exactly three live neighbours
-                    // becomes a live cell, as if by reproduction.
-                    (Cell::Dead, 3) => Cell::Alive,
-                    // All other cells remain in the same state.
-                    (otherwise, _) => otherwise,
-                };
-
-                // log!("it becomes {:?}", next_cell);
-
-                next[idx] = next_cell;
+        let _timer = Timer::new("Universe::tick");
+        let mut next = {
+            let _timer = Timer::new("allocate next cells"); // allocate next cells: 0.046875 ms
+            self.cells.clone()
+        };
+
+        {
+            let _timer = Timer::new("new generation"); // new generation: 0.8623046875 ms
+                                                       // the vast majority of time is spent actually calculating the next generation of cells.
+            for row in 0..self.height {
+                for col in 0..self.width {
+                    let idx = self.get_index(row, col);
+                    let cell = self.cells[idx];
+                    let live_neighbors = self.live_neighbor_count(row, col);
+
+                    // log!(
+                    //     "cell[{}, {}] is initially {:?} and has {} live neighbors",
+                    //     row,
+                    //     col,
+                    //     cell,
+                    //     live_neighbors
+                    // );
+
+                    let next_cell = match (cell, live_neighbors) {
+                        // Rule 1: Any live cell with fewer than two live neighbours
+                        // dies, as if caused by underpopulation.
+                        (Cell::Alive, x) if x < 2 => Cell::Dead,
+                        // Rule 2: Any live cell with two or three live neighbours
+                        // lives on to the next generation.
+                        (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
+                        // Rule 3: Any live cell with more than three live
+                        // neighbours dies, as if by overpopulation.
+                        (Cell::Alive, x) if x > 3 => Cell::Dead,
+                        // Rule 4: Any dead cell with exactly three live neighbours
+                        // becomes a live cell, as if by reproduction.
+                        (Cell::Dead, 3) => Cell::Alive,
+                        // All other cells remain in the same state.
+                        (otherwise, _) => otherwise,
+                    };
+
+                    // log!("it becomes {:?}", next_cell);
+
+                    next[idx] = next_cell;
+                }
             }
         }
+        let _timer = Timer::new("free old cells"); // free old cells: 0.041015625 ms
         self.cells = next;
     }
 
@@ -122,8 +193,9 @@ impl Universe {
         let height = 64;
 
         let cells = (0..width * height)
-            .map(|_i| {
-                if js_sys::Math::random() < 0.5 {
+            .map(|i| {
+                // if js_sys::Math::random() < 0.5 {
+                if i % 2 == 0 || i % 7 == 0 {
                     Cell::Alive
                 } else {
                     Cell::Dead

05-game-of-life/www/index.html

@@ -15,6 +15,10 @@
         align-items: center;
         justify-content: center;
       }
+      #fps {
+        white-space: pre;
+        font-family: monospace;
+      }
     </style>
   </head>
   <body>
@@ -23,6 +27,7 @@
       javascript in your browser.</noscript
     >
     <button id="play-pause"></button>
+    <div id="fps"></div>
     <canvas id="game-of-life-canvas"></canvas>
     <script src="./bootstrap.js"></script>
   </body>