不完整的 Sierpinski 三角形显示

Question

我正在按照教科书 The Nature of code 的示例 7.1 进行操作。（原代码写在Java，但由于处理库在功能上与p5.js完全相同，所以为了方便，我重写了Java脚本)

我相信我已经逐字复制了示例代码，但不知何故我得到了一个我没想到的结果。显示的 Sierpinski 三角形中有一个不完整的部分。

我想知道我的代码哪里出错了，或者我可能误解了什么导致了这种问题。

这是图片的代码

class CA {
  constructor(ca_width) {
    this.generation = 0;
    this.w = 5;
    this.cells = new Array(1050 / this.w);
    this.newcells = new Array(this.cells.length);
    this.ruleset = [0, 1, 0, 1, 1, 0, 1, 0]; // [1,1,0,1,1,1,1,0]//

    for (let i = 0; i < this.cells.length; i++) {
      this.cells[i] = 0;
    }

    this.cells[this.cells.length / 2] = 1;
  }


  generate() {
    let nextgen = new Array(this.cells.length);
    for (let i = 1; i < this.cells.length - 1; i++) {
      let left = this.cells[i - 1];
      let me = this.cells[i];
      let right = this.cells[i + 1];
      nextgen[i] = this.rules(left, me, right);
    }
    this.cells = nextgen;
    this.generation++;
  }

  rules(a, b, c) {
    let s = "" + a + b + c;
    let index = parseInt(s, 2);
    return this.ruleset[index];
  }

  display() {
    for (let i = 0; i < this.cells.length; i++) {
      if (this.cells[i] == 0)
        fill(255);
      else fill(0);
      stroke(0);
      rect(i * this.w, this.generation * this.w,
        this.w, this.w);
    }
  }
}

let cA;

function setup() {
  createCanvas(windowWidth, windowHeight);
  cA = new CA(1000);
}

function draw() {
  // createCanvas(windowWidth, 400);
  // background(150);

  cA.display();
  cA.generate();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

Answer 1

根据你计算下一代的逻辑，this.cells[0]和this.cells.at(-1)始终未定义，呈现为黑色。您可能希望将它们初始化为 0，并可能使用环绕逻辑来计算它们的值（即 cells[0] = rule(cells.at(-1), cells[0], cells[1])）。

我不知道你的 Java 代码是什么样的，但如果你使用的是 new int[] 类型，那么它会被清零并且可能会按预期工作，这与 JS 不同Array().

一般来说，JS中的Array()构造函数要谨慎使用。它使单元格处于未初始化状态（“空槽”），因此您通常希望链接 .fill(0) 或传播/map 使其成为一个可用的、意料之中的数组，您会期望这样的要发出的构造函数，就像在 Java.

中所做的那样

请记住，代码的本质是 available in a p5.js version, and there exist automatic translators from Processing to p5.js, like pde2js。请注意，我没有尝试过 pde2js 或其他翻译器，但它们似乎值得一看。

不完整的 Sierpinski 三角形显示

Incomplete Sierpinski's Triangle Displaying

javascript

cellular-automata

p5.js