CelAut v2
Материал из Department of Theoretical and Applied Mechanics
Версия от 08:42, 11 марта 2015; Денис (обсуждение | вклад)
Виртуальная лаборатория > Игра "Жизнь" > Клеточный автомат - версии > CelAut v2
Скачать программу: CelAut_v2_release.zip
Текст программы на языке JavaScript (разработчик Цветков Денис):
Файл "CelAut_v2_release.js"
1 function MainChain(canvas) {
2
3 // Предварительные установки
4
5 var context = canvas.getContext("2d"); // на context происходит рисование
6 document.oncontextmenu=function(e){return false}; // блокировка контекстного меню
7
8 // *** Задание вычислительных параметров ***
9
10 var fps = 5; // frames per second - число кадров в секунду
11
12 // Выполнение программы
13
14 var w = canvas.width; // ширина окна
15 var h = canvas.height; // высота окна
16 var n = 50; // количество клеток по горизонтали (желательно, делитель ширины окна)
17 var m = 50; // количество клеток по горизонтали (желательно, делитель высоты окна)
18 var cellW = w/n; // ширина клетки
19 var cellH = h/m; // высота клетки
20
21 var pause = true;
22 var intervalID; // для управления работой автомата
23
24 // "Жизнь" Конвея: [B = 000100000, L = 001100000]
25 var B = "000100000"; // геном рождения
26 var L = "001100000"; // геном выживания
27
28 // Работа с мышью
29
30 var mouseX; var mouseY; // координаты курсора мыши
31
32 canvas.onmousedown = function(e){ // функция при нажатии клавиши мыши
33 var life;
34 if (e.which == 1) life = true; // при нажатии левой клавиши мыши клетка рождается
35 else if (e.which == 3) life = false; // при нажатии правой клавиши мыши клетка умирает
36 else return;
37
38 setCell(e, life);
39 canvas.onmousemove = function(e) {setCell(e, life);}; // функция, выполняющаяся при перемещении курсора мыши
40 };
41
42 document.onmouseup = function(e){ // функция при отпускании клавиши мыши
43 canvas.onmousemove = null; // когда клавиша отпущена - функции перемещения нету
44 };
45
46 function refreshMouseCoords(e){ // процедура обновляет координаты в переменных mouseX и mouseY
47 var rect = canvas.getBoundingClientRect();
48 mouseX = e.clientX - rect.left;
49 mouseY = e.clientY - rect.top;
50 }
51
52 // Работа с массивом
53
54 var cells; // массив клеток
55 var cellsBuf = []; // буфер для расчета следующего шага
56 for (var i = 0; i < n; i++) cellsBuf[i] = [];
57 function generateRandomField(n, m) { // каждая клетка заполняется случайным значением жива/мертва
58 cells = [];
59 for (var i = 0; i < n; i++) {
60 cells[i] = [];
61 for (var j = 0; j < m; j++) {
62 cells[i][j] = (Math.random() >= 0.5);
63 }
64 }
65 }
66
67 function setCell(e, life){ // придать клетке определенное состояние с нажатия клавиши мыши
68 refreshMouseCoords(e); // обновить координаты в переменных mouseX, mouseY
69 if (mouseX < 0 || mouseX >= w || mouseY < 0 || mouseY >= h) return; // проверка на ошибочные координаты
70 var i = Math.floor(mouseX/cellW); // получаем ячейку по горизонтали
71 var j = Math.floor(mouseY/cellH); // получаем ячейку по вертикали
72 if (cells[i][j] != life) {
73 cells[i][j] = life;
74 draw();
75 }
76 }
77
78 MainChain.prototype.clear = function(){
79 for (var i = 0; i < n; i++)
80 for (var j = 0; j < m; j++)
81 cells[i][j] = false;
82 draw();
83 stopSystem();
84 };
85
86 // Управление работой автомата
87
88 function step() {
89 tick();
90 draw();
91 }
92
93 MainChain.prototype.changePauseState = function() { // кнопка паузы
94 if (!pause) stopSystem();
95 else startSystem()
96 };
97
98 MainChain.prototype.nextStep = function(){ // кнопка "Следующий шаг"
99 stopSystem();
100 step();
101 };
102
103 function startSystem() {
104 pause = false;
105 intervalID = setInterval(step, 1000/fps);
106 document.getElementById('pause').value = "Остановить";
107 }
108
109 function stopSystem() {
110 pause = true;
111 clearInterval(intervalID);
112 document.getElementById('pause').value = "Запустить";
113 }
114
115 // Расчетная часть программы
116
117 // функции, обеспечивающие периодичность системы
118 function next(i, n) {if (i == (n-1)) return 0; else return i+1;}
119 function prev(i, n) {if (i == 0) return n-1; else return i-1;}
120
121 function tick(){ // то, что происходит каждый шаг времени
122 // копирование массива cells в cellsBuf
123 for (var i0 = 0; i0 < n; i0++)
124 for (var j0 = 0; j0 < m; j0++)
125 cellsBuf[i0][j0] = cells[i0][j0];
126
127 for (var i = 0; i < n; i++) {
128 for (var j = 0; j < m; j++) {
129
130 // подсчет количества живых клеток вокруг рассматриваемой клетки
131 var near = 0;
132 if (cellsBuf[prev(i, n)] [prev(j, m)]) near++;
133 if (cellsBuf[prev(i, n)] [j]) near++;
134 if (cellsBuf[prev(i, n)] [next(j, m)]) near++;
135 if (cellsBuf[i] [prev(j, m)]) near++;
136 if (cellsBuf[i] [next(j, m)]) near++;
137 if (cellsBuf[next(i, n)] [prev(j, m)]) near++;
138 if (cellsBuf[next(i, n)] [j]) near++;
139 if (cellsBuf[next(i, n)] [next(j, m)]) near++;
140
141 if (cellsBuf[i][j]) // рассматриваемая клетка жива
142 cells[i][j] = (L[near] == '1'); // проверка условия выживания по биному L
143 else // рассматриваемая клетка мертва
144 cells[i][j] = (B[near] == '1'); // проверка условия рождения по биному B
145
146 }
147 }
148 }
149
150 // Рисование
151
152 function draw(){
153 context.clearRect(0, 0, w, h); // очистить экран
154 for (var i = 0; i < n; i++){
155 for (var j = 0; j < m; j++){
156 if (cells[i][j]){
157 context.beginPath();
158 context.rect(i*cellW, j*cellH, cellW, cellH);
159 context.closePath();
160 context.fill();
161 }
162 }
163 }
164 }
165
166 // Запуск системы
167 generateRandomField(n, m); // сгенероровать поле
168 startSystem();
169
170 }
Файл "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="Следующий шаг"/>
11 <input type="button" name="" onclick="app.clear();return false;" value="Очистить поле"/>
12 <script type="text/javascript">var app = new MainChain(document.getElementById('canvasCelAut'));</script>
13 </body>
14 </html>