Это зря - так вы смешиваете код, выполняющий разные задачи
возникнет необходимость реализовать отображение только одного поколения из двух или трёх ... группировка клеток, выполняемая вместе с расчётом новых состояний отрицательно скажется
почему memory, а не matrix?
количество доступных состояний у вас ограничено всего лишь двумя?
._1 {background-color: #879195;}this.groups[this.matrix[y][x]].push(x, y); вынес в цикл, который в calc.
var Machine = {
matrix: null, // матрица
memory: null, // предыдущее состояние
handler: null, // функция вычисления состояния
size: { x: 400, y: 400 }, // размер поля
init: function (matrix, handler) {
var canvas = document.querySelector('#canvas');
canvas.setAttribute('width', this.size.x);
canvas.setAttribute('height', this.size.y);
this.ctx = canvas.getContext('2d');
this.matrix = matrix;
this.handler = handler;
this.coefX = this.size.x / this.matrix[0].length;
this.coefY = this.size.y / this.matrix.length;
this.calc();
},
// Вычислить новое состояние
calc: function () {
var res = [],
lenX = this.matrix[0].length,
lenY = this.matrix.length;
for (var y = 0; y < lenY; y++) {
var py = y === 0 ? lenY -1 : y -1, // prev y
ny = y === lenY -1 ? 0 : y +1; // next y
res[y] = [];
for (var x = 0; x < lenX; x++) {
var px = x === 0 ? lenX -1 : x -1, // prev x
nx = x === lenX -1 ? 0 : x +1; // next x
// возвращаемый функцией результат присваивается текущей клетке
res[y][x] = this.handler(this.matrix, py, px, y, x, ny, nx);
}
}
this.memory = this.matrix.slice(); // cохранить старую версию
this.matrix = res; // обновить матрицу
this.render();
},
// Отрисовка матрицы
render: function () {
for (var y = 0, lenY = this.matrix.length; y < lenY; y++) {
for (var x = 0, lenX = this.matrix[y].length; x < lenX; x++) {
if (this.matrix[y][x] === this.memory[y][x]) continue;
this.ctx.fillStyle = this.matrix[y][x] === 0 ? '#0d2a37': '#CCC';
this.ctx.fillRect(x * this.coefX, y * this.coefY, this.coefX, this.coefY);
}
}
},
};
не будет ли быстрее преобразовывать матрицу в строку через arr.toString()...
Не будет.
function renderMatrix(matrix, selector) {
var wrap = document.querySelector(selector);
var str = '';
wrap.innerHTML = '';
for (var y = 0; y < matrix.length; y++) str += matrix[y].toString() + 'n';
wrap.innerHTML += str
.replace(/(\d)\,?/g, '<div class="_$1">$1</div>')
.replace(/n/g, '<br>');
}<scope>source.php</scope> 
<snippet>
<content><![CDATA[
<?php foreach(\$${1:} as \$${2:this}): ?>
\$${0:this}
<?php endforeach; ?>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>fe</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.php</scope>
</snippet>