将矩阵数据转换为数组、js、奇数倍

Question

我正试图将两个数组上的迭代转换为组合数组大小的4倍，以生成一个图像，

example input => [[1][0]]
expected output=> [[255][255][255][255][0][0][0][255]]

((height*width+index(*4((我尝试过使用和不使用*4(是我所理解的将其转换为ImageData((.data的rgba的公式；

我只写最新的一行，将对ImageData.data进行切片/连接/切片，这样我每次绘制只写一行。

预期的视觉效果是一个二维元胞自动机规则的可视化，每次画一条线。

实际：奇怪的电路弯曲，跳动的模式。

draw(){
if(this.height<this.lineNum){ //lineNum is the current y draw line
this.image.data = this.image.data.slice(this.width*4).join(this.image.data.slice(0,this.width*4)); //cut the begining, put it at the end, then write over it so it moves
}
this.nodes.forEach((node,x)=>{ 
const state = node.lastState(); 
const index = (((Math.min(this.lineNum,this.height))*x + (node.index))*4);
this.image.data[index+0]=state?255:0;
this.image.data[index+1]=state?255:0;
this.image.data[index+2]=state?255:0;
this.image.data[index+3]=255;     
})
this.ctx.putImageData(this.image ,0,0);  
}

这是完整的代码，但我确信这个公式不知怎么错了。

上面的片段来自第61行的draw函数。

https://codepen.io/altruios/pen/QWEoYXz?editors=1010

编辑

const index = (((Math.min(node.state.length-1,this.height))*this.width + (node.index))*4);

产生更"稳定"但仍然不正确的东西。

所以我认为这个公式可能是正确的，并且存在一些状态更新逻辑没有正确发生。

Answer 1

奇怪的行为已经修复。事实证明，正是这个错误在编辑中得到了部分修复，但此外，在计算数组时，数组发生了突变，因此，修复方法是确保始终在精确的索引上处理状态，而不仅仅是最后一个索引。