Skip to content

Commit

Permalink
Refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zaydme
Zaydme committed Dec 7, 2020
1 parent 3b04e57 commit 4c7e676
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 70 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Conway-s-Game-of-Life-p5.js
Conway's Game of Life using p5.js
[Live preview](https://2ef9ac0c-58d5-4504-93ff-be202e07e031.htmlpasta.com/) (htmlpasta link)
[Live preview](https://zaydme.github.io/Conway-s-Game-of-Life-p5.js/)
![preview](preview.png)
41 changes: 30 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,36 @@
</head>
<body>
<div class="buttons">
<button onclick="noLoop();isLoop= false">pause</button>
<button onclick="loop();isLoop= true">resume</button>
<button onclick="noLoop();isLoop= true;redraw();isLoop= false">step+</button>
<button onclick="initialGen();redraw();loop();isLoop= true">random</button>
<button onclick="noLoop();isLoop= false;setStatus()">pause</button>
<button onclick="loop();isLoop= true;setStatus()">resume</button>
<button
onclick="noLoop();isLoop= true;redraw();isLoop= false;setStatus()"
>
step+
</button>
<button onclick="initialGen();redraw();loop();isLoop= true;setStatus()">
random
</button>
<span id="status"> </span>
</div>
<script src="sketch.js"></script>
</body>
<style>
.buttons {
margin-left: 20px;
position: absolute;
}
</style>
</html>
<style>
.buttons {
margin-left: 20px;
position: absolute;
}
</style>
<script>
document.body.style.margin = 0;
function setStatus() {
document.getElementById("status").innerHTML = isLoop
? "Running"
: "Paused";
document.getElementById("status").style.backgroundColor = isLoop
? "rgb(72, 250, 2)"
: "red";
}
setStatus();
</script>
</html>
136 changes: 78 additions & 58 deletions sketch.js
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,95 @@
document.body.style.margin = 0

const width = document.body.clientWidth
const height = document.body.clientHeight
let w = 15;
let columns = Math.floor(width / w);
let rows = Math.floor(height / w);
let cells = []
let isLoop = true

let initialPopulation = 0.07
const WIDTH = document.body.clientWidth;
const HEIGHT = document.body.clientHeight;
const COLUMN_WIDTH = 15;
const COLUMNS = Math.floor(WIDTH / COLUMN_WIDTH);
const ROWS = Math.floor(HEIGHT / COLUMN_WIDTH);
let cells = [];
let isLoop = true;

const INITIAL_POPULATION = 0.1;

function setup() {
createCanvas(width, height);
frameRate(8);
stroke(255);
strokeWeight(1);
initialGen()
createCanvas(WIDTH, HEIGHT);
frameRate(8);
stroke(255);
strokeWeight(1);
initialGen();
}

function draw() {
background(0);
for (let i = 0; i < columns; i++) {
for (let j = 0; j < rows; j++) {
if (cells[i][j][0] == 1 ) fill(0);
else fill(255);
stroke(0);
rect(i * w, j * w, w - 1, w - 1);
}
background(0);
for (let i = 0; i < COLUMNS; i++) {
for (let j = 0; j < ROWS; j++) {
if (cells[i][j][0]) fill(0);
else fill(255);
stroke(0);
rect(
i * COLUMN_WIDTH,
j * COLUMN_WIDTH,
COLUMN_WIDTH - 1,
COLUMN_WIDTH - 1,
);
}
}

if (isLoop) lifeisgoingon();
if (isLoop) lifeIsGoingOn();
}

function initialGen() {

for (let i=0;i<columns;i++) {
cells[i] = []
}
for (let i=0;i<columns;i++) {
for (let j= 0;j<rows;j++) {
cells[i][j] = []
cells[i][j][0] = Math.random() < initialPopulation
if (i == 0 || j == 0 || i == columns-1 || j == rows-1 ) cells[i][j][0] = 0;
cells[i][j][1] = 0
}
for (let i = 0; i < COLUMNS; i++) {
cells[i] = [];
}
for (let i = 0; i < COLUMNS; i++) {
for (let j = 0; j < ROWS; j++) {
cells[i][j] = [];
cells[i][j][0] = Math.random() < INITIAL_POPULATION;
if (i === 0 || j === 0 || i === COLUMNS - 1 || j === ROWS - 1) cells[i][j][0] = 0;
cells[i][j][1] = 0;
}
}
}

function lifeisgoingon(){
for (let i=0;i<columns;i++) {
for (let j= 0;j<rows;j++) {
if ( i != 0 && j != 0 && i != columns-1 && j != rows-1 ){
cells[i][j][1] = (cells[i-1][j][0] == 1) + (cells[i+1][j][0] == 1) + (cells[i][j-1][0] == 1) + (cells[i][j+1][0] == 1) + (cells[i+1][j+1][0] == 1) + (cells[i-1][j-1][0] == 1) + (cells[i+1][j-1][0] == 1) + (cells[i-1][j+1][0] == 1)
}
if (cells[i][j][1] < 2) cells[i][j][0] = 0
if (cells[i][j][1] > 3) cells[i][j][0] = 0
if (cells[i][j][0] == 1 && (cells[i][j][1] == 3 || cells[i][j][1] == 2)) cells[i][j][0] = 1
if (cells[i][j][0] == 0 && cells[i][j][1] == 3 ) cells[i][j][0] = 1
}
function lifeIsGoingOn() {
for (let i = 0; i < COLUMNS; i++) {
for (let j = 0; j < ROWS; j++) {
if (i !== 0 && j !== 0 && i !== COLUMNS - 1 && j !== ROWS - 1) {
/*
cells[i][j][0] is the living status (Boolean)
cells[i][j][1] is the neighbors count
*/
cells[i][j][1] = (cells[i - 1][j][0])
+ (cells[i + 1][j][0])
+ (cells[i][j - 1][0])
+ (cells[i][j + 1][0])
+ (cells[i + 1][j + 1][0])
+ (cells[i - 1][j - 1][0])
+ (cells[i + 1][j - 1][0])
+ (cells[i - 1][j + 1][0]);
}
}
}
for (let i = 0; i < COLUMNS; i++) {
for (let j = 0; j < ROWS; j++) {
if (cells[i][j][1] < 2 || cells[i][j][1] > 3) cells[i][j][0] = false;
if (cells[i][j][0] && (cells[i][j][1] === 3 || cells[i][j][1] === 2)) cells[i][j][0] = true;
if (!cells[i][j][0] && cells[i][j][1] === 3) cells[i][j][0] = true;
}
}
}

function mouseClicked() {
ellipse(mouseX, mouseY, 5, 5);
const Mcolumns = Math.floor(mouseX / COLUMN_WIDTH);
const Mrows = Math.floor(mouseY / COLUMN_WIDTH);
cells[Mcolumns][Mrows][0] = !cells[Mcolumns][Mrows][0];
if (cells[Mcolumns][Mrows][0]) fill(0);
else fill(255);
stroke(0);
rect(
Mcolumns * COLUMN_WIDTH,
Mrows * COLUMN_WIDTH,
COLUMN_WIDTH - 1,
COLUMN_WIDTH - 1,
);
if (!isLoop) redraw();
}
function mouseDragged() {
ellipse(mouseX, mouseY, 5, 5);
let Mcolumns = Math.floor(mouseX / w);
let Mrows = Math.floor(mouseY / w);
cells[Mcolumns][Mrows][0] = !cells[Mcolumns][Mrows][0]
if (cells[Mcolumns][Mrows][0] == 1 ) fill(0);
else fill(255);
stroke(0);
rect(Mcolumns * w, Mrows * w, w - 1, w - 1);
if(!isLoop) redraw()
}

0 comments on commit 4c7e676

Please sign in to comment.