混乱游戏分形无法正确渲染

Question

我正在尝试编写代码，该代码将根据 chaos Game

尤其是i， '我试图调试此分形的有缺陷的生成/渲染：

​相关的JavaScript如下：

canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');

//constants
border = 10  //cardinal distance between vertices and nearest edge(s)

class Point{
  constructor(_x, _y){
    this.x = _x;
    this.y = _y;
  }
}

vertices = []
secondLastVertex = 0;
lastVertex = 0;

//vertices in clockwise order (for ease of checking adjacency)
vertices.push(new Point(canvas.width / 2, border));  //top
vertices.push(new Point(canvas.width - border, canvas.height * Math.tan(36 * Math.PI / 180) / 2));  //upper right
vertices.push(new Point(canvas.width * Math.cos(36 * Math.PI / 180), canvas.height - border));  //lower right
vertices.push(new Point(canvas.width * (1 - (Math.cos(36 * Math.PI / 180))), canvas.height - border));  //lower left
vertices.push(new Point(border, canvas.height * Math.tan(36 * Math.PI / 180) / 2));  //upper left

//move half distance towards random vertex but it can't neighbor the last one IF the last two were the same
function updatePoint(){
  //pick a random vertex
  v = Math.floor(Math.random() * vertices.length);

  if(lastVertex == secondLastVertex)
    //while randomly selected vertex is adjacent to the last approached vertex
    while((v == (lastVertex - 1) % 5) || (v == (lastVertex + 1) % 5))
      //pick another random vertex
      v = Math.floor(Math.random() * vertices.length);

  //cycle the last two vertices
  secondLastVertex = lastVertex;
  lastVertex = v;

  //move half way towards the chosen vertex
  point.x = (vertices[v].x + point.x) / 2;
  point.y = (vertices[v].y + point.y) / 2;
}

//starting point (doesn't matter where)
point = new Point(canvas.width / 2, canvas.height / 2);

for (var i = 0; i < 1000000; i++){
  //get point's next location
  updatePoint();
  
  //draw the point
  context.fillRect(Math.round(point.x), Math.round(point.y), 1, 1);
}

产生的渲染看起来如下：

到目前为止，我还没有确定导致渲染的原因是什么是如此倾斜和错误。一种可能性是，我已经误解了生成该分形的规则（即“如果最后两个顶点是相同的，则从当前位置将一半的距离移到了与最后一个顶点的随机顶点的一半，”）

另一个是另一个我在绘制分形的方式方面有一些错误。但是，使用规则/起始vertex修改的相同代码能够绘制诸如Sierpinkski三角/地毯甚至其他五角形分形之类的东西，显然很完美。尽管另一个五边形分形最终以一些怪异的偏斜和“每个自相似下结构的右下四分之一”的怪异。

我尝试对我解释规则的方式进行一些修改（例如，如果最后两个顶点相同，那么“下一个顶点不能相邻或等于先前的顶点”），但没有什么能帮助。我还尝试在绘制目标点之前不要将目标点的坐标四舍五入，但是尽管这略微改变了细节的特征/清晰度，但它并没有改变绘图的任何较大规模的特征。

Answer 1

正如 ggorlen 善意指出的那样，我的问题是我没有正确比较顶点的邻接关系。我错误地认为 Javascript 将 (-1 % 5) 之类的值评估为 4，而不是 -1。

为了解决这个问题，我在索引中添加 4，而不是减去 1，然后将其修改为 5（顶点数），

这完全修复了渲染。 （不仅在这种情况下，而且在其他情况下我一直在使用不同的分形进行测试）