-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvasLife-1.html
145 lines (134 loc) · 5.98 KB
/
canvasLife-1.html
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html lang="de" id="*">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvasLife</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border : 2px solid #81d742; background-color : white;">Ihr Browser ist veraltet. Bitte installieren Sie eine aktuelle Version des Browsers.</canvas>
<script>
var gridHeight = document.getElementById("myCanvas").height;
var gridWidth = document.getElementById("myCanvas").width;
var theGrid = createArray(gridWidth);
var mirrorGrid = createArray(gridWidth);
var drawColor = "#81d742";
fillRandom(); //create the starting state for the grid by filling it with random cells
tick(); //call main loop
//functions
function tick()
{ //main loop
drawGrid();
updateGrid();
requestAnimationFrame(tick);
}
function createArray(rows)
{ //creates a 2 dimensional array of required height
var arr = [];
for (var i = 0; i < rows; i++)
{
arr[i] = [];
}
return arr;
}
function fillRandom()
{ //fill the grid randomly
for (var j = 0; j < gridHeight; j++)
{ //iterate through rows
for (var k = 0; k < gridWidth; k++)
{ //iterate through columns
var rawRandom = Math.random(); //get a raw random number
var improvedNum = (rawRandom * 2); //convert it to an int
var randomBinary = Math.floor(improvedNum);
if (randomBinary === 1)
{
theGrid[j][k] = 1;
} else {
theGrid[j][k] = 0;
}
}
}
}
function drawGrid()
{ //draw the contents of the grid onto a canvas
var c = document.getElementById("myCanvas");
if (c.getContext)
{
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height); //this should clear the canvas ahead of each redraw
for (var j = 1; j < gridHeight; j++)
{ //iterate through rows
for (var k = 1; k < gridWidth; k++)
{ //iterate through columns
if (theGrid[j][k] === 1)
{
//ctx.fillStyle = document.getElementById("*").style.lightingColor;
ctx.fillStyle = drawColor;
ctx.fillRect(j, k, 1, 1);
}
}
}
}
}
function updateGrid()
{ //perform one iteration of grid update
for (var j = 1; j < gridHeight - 1; j++)
{ //iterate through rows
for (var k = 1; k < gridWidth - 1; k++)
{ //iterate through columns
var totalCells = 0;
//add up the total values for the surrounding cells
totalCells += theGrid[j - 1][k - 1]; //top left
totalCells += theGrid[j - 1][k]; //top center
totalCells += theGrid[j - 1][k + 1]; //top right
totalCells += theGrid[j][k - 1]; //middle left
totalCells += theGrid[j][k + 1]; //middle right
totalCells += theGrid[j + 1][k - 1]; //bottom left
totalCells += theGrid[j + 1][k]; //bottom center
totalCells += theGrid[j + 1][k + 1]; //bottom right
//apply the rules to each cell
if (theGrid[j][k] === 0)
{
switch (totalCells)
{
case 3:
mirrorGrid[j][k] = 1; //if cell is dead and has 3 neighbours, switch it on
break;
default:
mirrorGrid[j][k] = 0; //otherwise leave it dead
}
} else if (theGrid[j][k] === 1) { //apply rules to living cell
switch (totalCells)
{
case 0:
case 1:
mirrorGrid[j][k] = 0; //die of lonelines
break;
case 2:
case 3:
mirrorGrid[j][k] = 1; //carry on living
break;
case 4:
case 5:
case 6:
case 7:
case 8:
mirrorGrid[j][k] = 0; //die of overcrowding
break;
default:
mirrorGrid[j][k] = 0; //
}
}
}
}
for (var j = 0; j < gridHeight; j++)
{ //iterate through rows
for (var k = 0; k < gridWidth; k++)
{ //iterate through columns
theGrid[j][k] = mirrorGrid[j][k];
}
}
}
</script>
</body>
</html>