javascript - 尝试在 Canvas 上创建随机像素时了解非随机输出

Question

我正在使用 processing.js。对于 draw() 中循环的每次迭代，我在 Canvas 上的任意位置定义一个随机中心点 (x, y)，然后定义一个介于 80 和 100 之间的随机宽度和高度。这定义了一个矩形。然后我遍历矩形内的每个点并确定是否绘制一个点。点被绘制的概率取决于它与中心的距离。我现在正试图理解为什么我如此频繁地看到从矩形的左上角到右下角的填充条纹。

类似于 this :

这是我的代码。

void setup() {
    size(500, 500); // size of canvas
    background(0); // black background
    noLoop();
}

void draw() {

    // clusters

    int x;
    int y; // center coordinates of clusters
    int halfWidth; 
    int halfHeight; // halves of width and height of clusters

    for (int i = 0; i < 3; i++) {
        x = int(random(500));
        y = int(random(500));
        halfWidth = int(random(40, 50));
        halfHeight = int(random(40, 50));
        for (int j = x - halfWidth; j < x + halfWidth; j++) {
            for (int k = y - halfHeight; k < y + halfHeight; k++) {
                if (int(random(1, dist(x, j, y, k))) == 1) {
                    stroke(color(int(random(0, 255)), int(random(0, 255)), int(random(0, 255))));
                    point(j, k);
                }
            }
        }   
    }   
}

Answer 1

这很愚蠢。 dist() 采用 dist(x1, y1, x2, y2) 而我采用 dist(x1, x2, y1, y2)。