生命游戏中的物体速度变慢--为什么？

Question

我正在以Coding Train的视频为起点，用不同的方式重现Game of Life。我试图添加的是 "颜色继承"。新生细胞的颜色会从邻近细胞的颜色中 "继承 "出来。

我做了两个版本。第一个版本有一个二维的单元格数组 每个单元格都是一个RGB值的数组。

grid[i][j] = [255,0,100]

一个for循环在网格数组中迭代，并在画布上的正确位置画出正确颜色的方框。然后它检查下一代单元格是活的还是死的。无论网格的大小，这都能正常工作，不会有任何减速。

https:/editor.p5js.orgumutreldemsketches1qCmEzHlY。

第二个版本用Cell对象填充网格数组的每个元素。这个对象接收它在网格上的坐标和它的大小。颜色是相对于它在网格上的位置给出的。

function Cell(x, y, size) {
this.x = x * size;
this.y = y * size;
this.size = size;

//...

this.r = x * 10;
this.g = y * 10;
this.b = x+y;

Cell对象有确定它有多少个活着的邻居，从邻居那里继承颜色等功能。这和第一个版本的过程是一样的。然后在draw()中，网格被循环了两次：一次用于确定每个单元格的下一个状态，另一次用于将单元格改变为新状态。

这个版本会出现大量的减速，尤其是在较高的分辨率下。https:/editor.p5js.orgumutreldemsketches2skO6-2Cm。

我想在此基础上增加更多的功能，比如统计每个单元格的年龄（对于它的存活时间，），使用为每个单元格制作一个对象对我来说更有意义。

以我对p5.js JavaScript一般有限的经验，我无法理解为什么会这样。两个版本的功能都是一样的（除了第二个版本多了一个循环），为什么第二个版本会对计算机造成这么大的负担？

Answer 1

在你的第二个例子（使用对象）中，你画了一个每一个方块，即使它是 "空的"。在第一个例子中，你只在单元格处于活动状态时才画一个方块，这样就不用在黑色背景上画黑色的方块，从而节省了计算。)

你可以简单地注释出 else 语句来节省同样的计算量。

this.show = function() {

    if (this.status == 1) {
      fill(color(this.r, this.g, this.b));
      stroke(0);
      square(this.x, this.y, this.size);
    }
    // else {
    //       fill(20);
    //       stroke(0);
    //       square(this.x, this.y, this.size);
    //   }
  }

这里 是一个修改过的版本，看起来工作速度相当快。