javascript - JS（p5.js）画布乘法错误并以奇怪的分辨率绘制

Question

我的代码中遇到了一个错误，它使显示加倍并最终绘制了两次，此外它本身的分辨率也很奇怪。在将全局变量 (total_sand) 更改为不同的整数并将其更改回来后，显示实际上增加了三倍。

预期的结果是它只以全分辨率显示一次（在本例中为 301x301 像素）。这个错误并没有立即发生，而且似乎是在某天更改代码时随机发生的。

total_sand = 100000;
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) {
                toppling = true;
                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() {

    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;
            } else if(sandpiles[x][y] == 2) {
                r = 0;
                g = 104;
                b = 255;
            } else if(sandpiles[x][y] == 3) {
                r = 122;
                g = 0;
                b = 229;
            } else {
                r = 255;
                g = 0;
                b = 0;
            }

            var index = (x + y * width)*4;
            pixels[index] = r;
            pixels[index+1] = g;
            pixels[index+2] = b;
            pixels[index+3] = 255; // alpha

        }
    }

    updatePixels();
}

function draw() {

    background(0);

    topple();

    update();

}

标签： javascriptp5.js