如何一次更新画布?以及沙堆的效率

Question

我目前正在使用javascript和p5.js库编写代码，用于"沙堆"。沙堆是离散 2D 空间中的数学结构，其中"沙子"(整数(放置在一个点上，并将"倾倒"到相邻的单元格上。我对编码相对较新，所以我不知道最有效的方法。

目前，我正在使用通过创建全局沙堆数组制作的 2D 数组，并在我的设置函数中使该数组中的每个元素成为自己的数组，从而允许我有一个覆盖画布的 x 和 y 索引。

当我去显示每个像素的值("沙子量"(时，我的问题就来了 - 每个像素都被单独查看并替换为某种颜色的"点"，具体取决于它的值

function update() {
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (sandpiles[x][y] == int(0)) {
stroke(255, 255, 0);
} else if(sandpiles[x][y] == 1) {
stroke(0, 185, 63);
} else if(sandpiles[x][y] == 2) {
stroke(0, 104, 255);
} else if(sandpiles[x][y] == 3) {
stroke(122, 0, 229);
} else {
stroke(255, 0, 0);
}
point(x, y);
}
}

沙堆作为一种构造，对它们具有非常好的对称性，我想知道是否可以在绘制像素时停止屏幕，以便可以立即看到调用的每个"状态"，而不是单个像素。另外，我知道可能有一种方法可以用javascript本身来做到这一点，它会更好地工作，所以如果有人可以指导我js以更优雅的方式处理每个像素的功能，我将不胜感激。此外，由于我每次绘制画布都要检查每个像素两次(一次推翻，一次更新(，有没有办法提高搜索效率，还是必须包含特定的搜索算法？谢谢。

编辑：下面是整个代码 - 我删除了一些可选参数，所以它更容易阅读，我希望我做对了。

total_sand = 10000;
sandpiles = [];
var next_sandpiles;
function setup() {
createCanvas(301, 301);
for (var x = 0; x < width; x++) {
sandpiles[x] = [];
for (var y = 0; y < height; y++) {
sandpiles[x][y] = 0;
}
}
next_sandpiles = sandpiles;
//STARTING CONDITIONS
if (width % 2 == 0) {
sandpiles[width/2][height/2] = total_sand;
} else {
sandpiles[(width-1)/2][(height-1)/2] = total_sand;
}

}
function topple() {
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (sandpiles[x][y] > 3) {
next_sandpiles[x][y] = next_sandpiles[x][y] - 4;
if (x > 0) {
next_sandpiles[x-1][y]++;
}
if (x < width - 1) {
next_sandpiles[x+1][y]++;
}
if (y > 0) {
next_sandpiles[x][y-1]++;
}
if (y < height - 1) {
next_sandpiles[x][y+1]++;
}
}
}
}
sandpiles = next_sandpiles;
}
function update() {
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (sandpiles[x][y] == int(0)) {
stroke(255, 255, 0); // colour 0
} else if(sandpiles[x][y] == 1) {
stroke(0, 185, 63); // colour 1
} else if(sandpiles[x][y] == 2) {
stroke(0, 104, 255); // colour 2
} else if(sandpiles[x][y] == 3) {
stroke(122, 0, 229); // colour 3
} else {
stroke(255, 0, 0); // colour 4
}
point(x, y);
}
}
}
function draw() {
// while (toppling) {
//  topple();
// }
topple();
update();
// noLoop();    
}

Answer 1

您应该将loadPixels()和updatePixels()与pixels数组一起使用：

function update() {
loadPixels();
var r;
var g;
var b;
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (sandpiles[x][y] == int(0)) {
r = 255;
g = 255;
b = 0;
} else if(sandpiles[x][y] == 1) {
r = 0;
g = 185;
b = 63;
} // add as many colors as you please
var index = (x + y * width)*4;
pixels[index] = r;
pixels[index+1] = g;
pixels[index+2] = b;
pixels[index+3] = 255; // alpha
}
}
updatePixels();
}