Conway's Game of Life
From Department of Theoretical and Applied Mechanics
Virtual laboratory > Conway's Game of Life
Here is the program, presenting the game of Life by John Conway. You can draw the cells on the field with a mouse.
Download the program code: CelAut_v2_release.zip
The Text of the program is written in JavaScript (developed by Tsvetkov Denis):
File "CelAut_v2_release.js"
1 function MainChain(canvas) {
2
3 // Preliminary installations
4 var context = canvas.getContext("2d"); // context for drawing
5 document.oncontextmenu=function(e){return false}; // blocking of a context menu
6
7 // *** calculation parameteres ***
8
9 var fps = 5; // frames per second
10
11 // running of the profgam
12
13 var w = canvas.width; // window width
14 var h = canvas.height; // window hight
15 var n = 50; // quantity of cages on horizontal axis
16 var m = 50; // quantity of cages across on vertical axis
17 var cellW = w/n; // cage width
18 var cellH = h/m; // cage hight
19
20 var pause = true;
21 var intervalID; // for management of operation of the automatic machine
22
23 // Conway's life: [B = 000100000, L = 001100000]
24 var B = "000100000"; // birth code
25 var L = "001100000"; // survival code
26
27 // Mouse parameters
28
29 var mouseX; var mouseY; // cursor coordinates of a mouse
30
31 canvas.onmousedown = function(e){ // function when pressing a key of a mouse
32 var life;
33 if (e.which == 1) life = true; // the cage is born by pressing the left key of a mouse
34 else if (e.which == 3) life = false; // the cage is dead by pressing the left key of a mouse
35 else return;
36
37 setCell(e, life);
38 canvas.onmousemove = function(e) {setCell(e, life);}; // shift cursor
39 };
40
41 document.onmouseup = function(e){
42 canvas.onmousemove = null;
43 };
44
45 function refreshMouseCoords(e){ // procedure updates coordinates in the mouseX and mouseY variables
46 var rect = canvas.getBoundingClientRect();
47 mouseX = e.clientX - rect.left;
48 mouseY = e.clientY - rect.top;
49 }
50
51 // working with massive
52
53 var cells; // massive of cages
54 var cellsBuf = []; // the buffer for calculation of the following step
55 for (var i = 0; i < n; i++) cellsBuf[i] = [];
56 function generateRandomField(n, m) { // each cage is filled with casual value is live/is dead
57 cells = [];
58 for (var i = 0; i < n; i++) {
59 cells[i] = [];
60 for (var j = 0; j < m; j++) {
61 cells[i][j] = (Math.random() >= 0.5);
62 }
63 }
64 }
65
66 function setCell(e, life){ // to give to a cage a certain state from pressing of a key of a mouse
67 refreshMouseCoords(e); // update coordinates in the mouseX and mouseY variables
68 if (mouseX < 0 || mouseX >= w || mouseY < 0 || mouseY >= h) return; // check for wrong coordinates
69 var i = Math.floor(mouseX/cellW); // cage on horizontal axis
70 var j = Math.floor(mouseY/cellH); // cage on vertical axis
71 if (cells[i][j] != life) {
72 cells[i][j] = life;
73 draw();
74 }
75 }
76
77 MainChain.prototype.clear = function(){
78 for (var i = 0; i < n; i++)
79 for (var j = 0; j < m; j++)
80 cells[i][j] = false;
81 draw();
82 stopSystem();
83 };
84
85 // for management of operation of the automatic machine
86
87 function step() {
88 tick();
89 draw();
90 }
91
92 MainChain.prototype.changePauseState = function() { // pause
93 if (!pause) stopSystem();
94 else startSystem()
95 };
96
97 MainChain.prototype.nextStep = function(){ // next step
98 stopSystem();
99 step();
100 };
101
102 function startSystem() {
103 pause = false;
104 intervalID = setInterval(step, 1000/fps);
105 document.getElementById('pause').value = "Stop";
106 }
107
108 function stopSystem() {
109 pause = true;
110 clearInterval(intervalID);
111 document.getElementById('pause').value = "Next step";
112 }
113
114 // calculation part of the programm
115
116 // the functions providing frequency of system
117 function next(i, n) {if (i == (n-1)) return 0; else return i+1;}
118 function prev(i, n) {if (i == 0) return n-1; else return i-1;}
119
120 function tick(){
121 // copyingа cells to cellsBuf
122 for (var i0 = 0; i0 < n; i0++)
123 for (var j0 = 0; j0 < m; j0++)
124 cellsBuf[i0][j0] = cells[i0][j0];
125
126 for (var i = 0; i < n; i++) {
127 for (var j = 0; j < m; j++) {
128
129 // calculation of amount of living cells around the considered cage
130 var near = 0;
131 if (cellsBuf[prev(i, n)] [prev(j, m)]) near++;
132 if (cellsBuf[prev(i, n)] [j]) near++;
133 if (cellsBuf[prev(i, n)] [next(j, m)]) near++;
134 if (cellsBuf[i] [prev(j, m)]) near++;
135 if (cellsBuf[i] [next(j, m)]) near++;
136 if (cellsBuf[next(i, n)] [prev(j, m)]) near++;
137 if (cellsBuf[next(i, n)] [j]) near++;
138 if (cellsBuf[next(i, n)] [next(j, m)]) near++;
139
140 if (cellsBuf[i][j]) // cell is alive
141 cells[i][j] = (L[near] == '1'); // check of a condition of a survival on a binomial of L
142 else // cell is dead
143 cells[i][j] = (B[near] == '1'); // check of a condition of the birth on B binomial
144
145 }
146 }
147 }
148
149 // drawing
150
151 function draw(){
152 context.clearRect(0, 0, w, h); // clear the screen
153 for (var i = 0; i < n; i++){
154 for (var j = 0; j < m; j++){
155 if (cells[i][j]){
156 context.beginPath();
157 context.rect(i*cellW, j*cellH, cellW, cellH);
158 context.closePath();
159 context.fill();
160 }
161 }
162 }
163 }
164
165 // Run system
166 generateRandomField(n, m); // generate field
167 startSystem();
168
169 }
Файл "CelAut_v2_release.html"
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Cellular automaton</title>
5 <script src="CelAut_v2_release.js"></script>
6 </head>
7 <body>
8 <canvas id="canvasCelAut" width="600" height="600" style="border:1px solid #000000;"></canvas><br>
9 <input id="pause" type="button" name="" style="width: 100px" onclick="app.changePauseState();return false;"/>
10 <input type="button" name="" onclick="app.nextStep();return false;" value="Next step"/>
11 <input type="button" name="" onclick="app.clear();return false;" value="Clear the field"/>
12 <script type="text/javascript">var app = new MainChain(document.getElementById('canvasCelAut'));</script>
13 </body>
14 </html>
Here you can find the previous versions of the program.
