Suggestion on how to code the Conway's Game of Life

I tried to code the famous Game of Life on Bangle.js but I got stuck.

The first attempt was to use an array to do the math and then convert it into an image to print to the screen, but it seems that an array of 240*240 (57600) booleans doesn't fit in memory... to tell the truth only a 30*30 long array fits in (seems strange to me, 57600 boolean should be 7.125kB).

The second attempt was to manipulate pixels directly via g.setPixel and g.getPixel, but it turns out that g.getPixel doesn't work on Bangle.js.

I run out of ideas... any suggestion?

Sat 2020.04.18

@fbedussi what means was used to determine array size and free memory, along with how was the array defined? Please post code snippet.

Were you using a regular JS array? Regular JS arrays and booleans have a lot of space overhead - the most space efficient option would be to use an Uint8Array, and then access the individual bits of each byte using bitwise operations.

Actually, here's a simpler method: create a new graphics object that uses a 1-bit buffer, use getPixel and setPixel on that, and then draw it to the screen as an image.

// Create the buffer
let b = Graphics.createArrayBuffer(240, 240, 1, {msb: true});

// Get and set pixels
b.setPixel(x, y, 1);
let value = b.getPixel(x, y);

// Draw to screen
g.drawImage({width: 240, height: 240, bpp: 1, buffer: b.buffer});

Sounds like a great plan! Given the JS execution speed on Bangle.js I'd expect that to be super-slow, but you could use a lower size buffer and then use {scale:4} or something when drawing it

Here is a screenshot of a 16x16 version of Conway's Game of Life that I have just got to work with reasonable performance:

It uses two Uint8Arrays to store the state of the current and next generations. The real performance issue is computing the number of active cells in the 8 surrounding neighbours of a cell. I have used sentinel rows and columns in the arrays to avoid boundary checks and a flattened loop to compute the count. This together with using the Google optimiser in the WebIDE which inlines functions and turns conditional statements into expression etc together with keeping the critical routine in memory and tokenisation gives the sub 1 second generation time. You can try it at https://jeffmer.github.io/JeffsBangleApp­sDev/.
I will submit it to the official app loader when I have tidied it up.

I have used a graphics buffer and drawImage to display the cells as I wanted to be able to run widgets and to have the nicely delineated cells.

An interval timer is used to start a new generation computation every second. As you can see, the computation and display takes on average around 900ms leaving 100ms for widget update etc. This is usually OK, however, I would like to distribute this idle time more evenly during the generation computation to allow more responsive widgets. I could introduce a delay/reschedule call after computing very row, however, I am not sure how to do this - any suggestions?

That looks great! The rescheduling would be good... I guess just:

y=0;
function next() {
    for (let x = 1; x<17; ++x){
       ...
        }
    }
   y++;
   if (y>=17) {
      flip();
     // restart
      y=0;
      // flip generations
      var t = genA;
      genA = genB;
      genA = t;
   }
}

You could then just use setInterval on next with a ~50ms interval?

Thanks - that's perfect - I sometimes have difficulty getting used to the event-based programming paradigm. This version is much more responsive with respect to widgets and buttons as you can see from the screenshot below - the ANCS widget now gets time to connect properly. The app now computes a generation in 16 slots with each slot being 60ms which includes idle time in each slot. You can see the overall time is approx 960ms.

That's great! It'd be great it if you could submit a PR for it :)