Question

这是我第一次尝试使用javascript，我正在尝试使用以下规则生成随机图像：

位图中每个像素的颜色是逐行随机生成的。选择颜色是为了不偏离其左侧像素的颜色太远，并且结果与其上方像素的颜色平均。

然而，我发现这种平均值逐渐使rgb值膨胀，并且像素开始非常接近白色。我在http://geoburst.ca/eggs/testcase.html提取了一个测试用例和 http://geoburst.ca/eggs/testcase.js 代码的内容如下：

var i,dir,j,id=ctx.createImageData(cwidth,cheight);
for(i = 4; i < id.width*id.height*4;i+=4){
//alpha
id.data[i+3]=255;
for(j=0;j<3;j++){//for each colour r,g,b
    //I have to tell it to go darker more often, but then it still becomes lighter.
    //randomly choose the direction to move
    if(Math.random() <= 0.5){dir = -1;} else{ dir = 1;}
    //apply that move (I think the min max might be redundant)
    id.data[i+j]= Math.max(0, Math.min( 255, id.data[i+j-4] + 7*dir ) );
    //take the average of this value with the pixel above it
    //in the previous row if there is one.
    if(i>id.width*4) id.data[i+j] = (id.data[i+j]+id.data[i+j-id.width*4+4])/2
}
}

数组id.data []是位图的r，g，b，alpha，逐行。如果你注释掉内循环的最后一行

    //if(i>id.width*4) id.data[i+j] = (id.data[i+j]+id.data[i+j-id.width*4+4])/2

闪电问题消失了。它可以通过增加0.5来减少变暗，而不是通过增加0.5来减少变亮，例如减少到0.517

    if(Math.random() <= 0.517){dir = -1;} else{ dir = 1;}

但是这种手动修复并不完美。

为什么图像会向底部变亮，我该如何解决这个问题？

（旁白：你有没有看过以前以这种方式生成的图像？在哪里？）

Answer 1

Canvas imageData是一个整数的类型数组，所以你的所有平均值（两个整数，以.0或.5结尾）都被舍入为整数（加0或.5），导致总体价值随着时间的推移而浮动。

我在平均值中添加了“模糊”：

if(i>id.width*4) id.data[i+j] = (
    (id.data[i+j]+id.data[i+j-id.width*4+4])/2
    + Math.random() - .5
    )

并得到了我认为你正在寻找的结果。漂亮！

生成某种类型的随机图像的舍入

1 个答案: