////
      ////// ////               js_Life
    ///   ///  ///
   ///   ///  ///                   javascript Conway's game of life
  /////////////						
 ///   ///
///   ///                         Attilio Pavone <tilly@utillyty.eu>

What is this game about?

• Wikipedia (en)
• Wikipedia (it)
• Conwaylife.com wiki
• Scientific American 223 (October 1970)  (original publication)

Usage

• rows: grid height in terms of cells count per column.
  
  
• columns: grid width in terms of cells count per row.
  
  
• interval: life time-span of one generation in milliseconds; the smaller the time-span, the faster the game.
  
  
• S/B rule: contains the rules of Survival/Bird of a cell, based on the state of its 8 adjacent cells.
  The original game rule is:
  
  S/B = 23/3
  
  that means:
  - an 'on' cell will survive if it has 2 or 3 neighbour 'on' cells, otherwise it will be swithed 'off';
  - an 'off' cell will be switched 'on' only if it has 3 adjacent 'on' cells.
  
  A common variation called "Seeds" has this rule:
  
  S/B = /2
  
  For more details about rules see the: Rules page on the conwaylife.com site.
  
  
• wrap: the standard algorithm reads that the grid be infinitely wide. The real implementation has of course a limited range. To make it more funny (expecially for certain drifting pattern) you can switch "wrap" on: when a cell overflows a bound it goes on to the opposite side, as if the grid was a spheric projection.
  
  
• canvas: as most modern browsers support the <canvas> element to dial with graphics natively, this is the preferred method when it comes to draw the pattern. Anyway, if not supported, you can swich to the original html <img> implementation.

Pattern

You can edit any pattern from scratch by clicking on the grid field to switch on and off the state of any cell.

Otherwise, below the grid, there's the pattern text-area where you can edit, import and export any pattern by hand.
The presets list on the right contains some of the most common pattern: you can click on the pattern name to fill in the text-area, and then import it.

You can also copy-paste any life-1.06 format file to the text-area: here you can find an huge list of patterns and relative files to copy paste from (at the bottom of each page right side box, there is a "Pattern file" item with a "show" label to display the direct link to each file: choose the 1.06 format).

As most files contain negative coordinates that don't feet into the field grid, you can set the shift parameter to translate the [x y] origin.

The html button parse the content of the text-area as an html table with and convert it to the corresponding life-1.06 pattern: any cell with bgcolor other then white (html code: #ffffff) is considered alive. You can convert any image to an html table with GIMP, for example to convert an EU green-pass download the QR code as a png file from your health authority and open it with GIMP then:

• Tools->Transform Tools->Crop the white borders;
• Tools->Transform Tools->Scale to 97x97 pixels;
• File->Export As <filename>.html (on the save dialog uncheck all options and set all fields to blank or 0).

The share button creates an url with the current pattern settings and navigate to it: if everything is ok (some server blocks requests if url is too long) you can copy-paste the new url to share from the addres bar of your browser.

Here's some more odd patterns I've been playing around with:

• Persian carpets

Version

• 2021-12-25 (current)
  
  • added "html" import function
  
  
• 2017-01-24
  
  • made a standalone html version
  • added HTML5 "canvas" mode
  • some UI improvements, e.g. the "share" function
  
  
• 2012-10-15
  
  • first release

www.utillyty.eu