-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
129 lines (108 loc) · 3.2 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// variables
const canvas = document.getElementById("gridCanvas")
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
canvas.background = '#129DC5';
const slider = document.getElementById("resolutionSlider")
const resOut = document.getElementById("resOut");
const rowOut = document.getElementById("rowOut");
const colOut = document.getElementById("colOut");
let resolution = 10;
let cols = canvas.width / resolution;
let rows = canvas.height / resolution;
resOut.innerHTML = resolution;
colOut.innerHTML = cols;
rowOut.innerHTML = rows;
let stopped = true;
//script
let grid = buildEmptyGrid();
render(grid);
//functions
function buildRandomGrid() {
return new Array(cols).fill(null)
.map(() => new Array(rows).fill(null)
.map(() => Math.floor(Math.random() * 2)));
}
function buildEmptyGrid() {
return new Array(cols).fill(null)
.map(() => new Array(rows).fill(0));
}
function render(grid) {
for(let col = 0; col < grid.length; col++) {
for(let row = 0; row < grid[col].length; row++) {
const cell = grid[col][row];
ctx.beginPath();
ctx.rect(row * resolution, col * resolution, resolution, resolution);
ctx.fillStyle = cell ? 'black' : canvas.background;
ctx.fill();
ctx.stroke();
}
}
}
function nextGen(grid) {
const nextGen = grid.map(arr => [...arr])
for(let col = 0; col < grid.length; col++) {
for (let row = 0; row < grid[col].length; row++) {
const cell = grid[col][row];
let numNeighbours = 0;
for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
if (i === 0 && j === 0) {
continue;
}
const x_cell = col + i;
const y_cell = row + j;
if (x_cell >= 0 && y_cell >= 0 && x_cell < cols && y_cell < rows) {
const currentNeighbour = grid[x_cell][y_cell];
numNeighbours += currentNeighbour;
}
}
}
if (cell === 0 && numNeighbours === 3) {
nextGen[col][row] = 1;
} else if(cell === 1 && numNeighbours <= 3 && numNeighbours >= 2) {
nextGen[col][row] = 1;
} else {
nextGen[col][row] = 0;
}
}
}
return nextGen;
}
function updateGrid() {
grid = nextGen(grid);
render(grid);
if(!stopped) {
requestAnimationFrame(updateGrid);
}
}
function startStop() {
if(!stopped) {
stopped = true;
} else {
stopped = false;
requestAnimationFrame(updateGrid);
}
}
function reset() {
grid = buildRandomGrid();
render(grid);
}
function random() {
grid = buildRandomGrid();
render(grid);
}
slider.oninput = function () {
resolution = this.value;
cols = canvas.width / resolution;
rows = canvas.height / resolution;
grid = buildRandomGrid();
render(grid);
if(!stopped) {
requestAnimationFrame(updateGrid);
}
resOut.innerHTML = resolution;
colOut.innerHTML = cols;
rowOut.innerHTML = rows;
}