Difference between revisions of "Conway's Game of Life"

  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 }

 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>