JS(p5.js)画布乘法错误并以怪异的分辨率绘制

时间:2018-06-23 22:02:23

标签: javascript p5.js

我在代码中遇到一个错误,该错误使显示倍增,并最终绘制了两次,但分辨率本身很奇怪。 After changing a global variable (total_sand) to a different integer, and changing it back, the display has actually tripled.

预期结果是它只能以全分辨率显示一次(在这种情况下为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();

}

0 个答案:

没有答案