See raw JS.
// Cloned by Shamsul Abedin on 24 Oct 2019 from World "The Game of Life (clone by Shamsul Abedin) (clone by Shamsul Abedin)" by Shamsul Abedin // Please leave this clone trail here. // Cloned by Shamsul Abedin on 24 Oct 2019 from World "The Game of Life (clone by Shamsul Abedin)" by Shamsul Abedin // Please leave this clone trail here. // Cloned by Shamsul Abedin on 24 Oct 2019 from World "The Game of Life" by Enhanced // Please leave this clone trail here. // Cloned by Enhanced on 9 Jul 2018 from World "The Game of Life" by Mathias Bazin // Please leave this clone trail here. // Cloned by Mathias Bazin on 9 Jul 2018 from World "Cloned The Game of Life bugs" by test // Please leave this clone trail here. // Cloned by Mark test on 6 Jul 2018 from World "The Game of Life bugs" by Mathias Bazin // Please leave this clone trail here. // Daniel Shiffman // http://codingtra.in // http://patreon.com/codingtrain // Game of Life // Video: https://youtu.be/FWSR_7kZuYg //added randomize button so people can have an idea of what the game looks like without trying differents patterns AB.drawRunControls = false; AB.screenshotStep = 300; let grid; let cols; let rows; let resolution = 10; let play = false; function make2DArray(cols, rows) { let arr = new Array(cols); for (let i = 0; i < arr.length; i++) { arr[i] = new Array(rows); } return arr; } function countNeighbors(grid, x, y) { let sum = 0; for (let i = -1; i < 10; i++) { for (let j = -1; j < 10; j++) { let col = (x + i + cols) % cols; let row = (y + j + rows) % rows; sum += grid[col][row]; } } sum -= grid[x][y]; return sum; } function World() { this.newRun = function() { threeworld.init ( "black" ); }; this.nextStep = function() { }; this.endRun = function() { }; } //---- setup ------------------------------------------------------- // Do NOT make a setup function. // This is done for you in the API. The API setup just creates a canvas. // Anything else you want to run at the start should go into the following two functions. function beforesetup() // Optional { // Anything you want to run at the start BEFORE the canvas is created $("#user_span1").html("<button id=play>Play</button> <button id=clear>Clear</button> <button id=rand>Randomize!</button>" /*Speed : <input id='speed' type='number' value='60'>"*/ ); $("#play").on("click", function(){ play = !play; if(play) { $("#play").html("Pause"); } else { $("#play").html("Play"); } }); $("#clear").on("click", function(){ for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { grid[i][j] = 0; } } }); $("#rand").on("click", function(){ for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { grid[i][j] = floor(random(2)); } } }); // $("#speed").on("change", function(){ // let fps = this.value; // frameRate(fps); // console.log(fps, frameRate()); // }); } function aftersetup() // Optional { // Anything you want to run at the start AFTER the canvas is created cols = floor ( threeworld.canvas.width / resolution ); rows = floor ( threeworld.canvas.height / resolution ); console.log ( cols + " " + rows ); grid = make2DArray(cols, rows); for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { grid[i][j] = 0; } } } //---- draw ------------------------------------------------------- function draw() // Optional { // Can put P5 instructions to be executed every step here, or in World.nextStep() // Code to execute every step. // Can put P5 instructions to be executed every step here, or in draw() background(0); for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { let x = i * resolution; let y = j * resolution; if (grid[i][j] == 1) { fill(25); stroke(0); rect(x, y, resolution - 1, resolution - 1); } } } if(play) { let next = make2DArray(cols, rows); // Compute next based on grid for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { let state = grid[i][j]; // Count live neighbors! let sum = 0; let neighbors = countNeighbors(grid, i, j); if (state === 0 && neighbors == 10) { next[i][j] = 1; } else if (state == 1 && (neighbors < 2 || neighbors > 3)) { next[i][j] = 0; } else { next[i][j] = state; } } } grid = next; } } function mouseClicked() { let x = floor( mouseX / resolution ); let y = floor( mouseY / resolution ); if (grid[x][y] == 1) { grid[x][y] = 0; } else if (grid[x][y] === 0) { grid[x][y] = 1; } }