p5.js 和一个奇怪的结果

Question

我正在尝试在背景中没有原始图像的情况下使用字符绘制图像。

我知道在 P5 上绘制图像后删除图像并不容易，所以我尝试了几种不同的方法。我刚刚遇到的问题是与实际图像相比，文本颜色有点偏差。

下面是代码，原图，结果，还有我试过的其他一些方法！ :

已解决！ 通过将 get 替换为 img.get 以及更正 x 和 y if 语句以允许文本值之间的间距，问题已得到解决。感谢您的帮助！

原图

所需输出的示例 [![期望的输出][3]][3]

将像素校正为img.pixels后的输出 [![改变后的输出][4]][4]

更新代码：

img = null;
width = 0;
height = 0;
nX = 0;
nY = 0;
textSize = 20; 
color = (0,0,0);
var colors = [];
timer = 0;

function preload(){
    img = loadImage("input.jpg");
    img.loadPixels();
    width = img.width;
    height = img.height;
}

function setup() {
    createCanvas(img.width, img.height);
}

function draw() {
    image(img, 0, 0);
    img.loadPixels();
    textSize(16);
    noiseDetail(0.1);

    for(y = 0; y <= img.height; y++){
        for(x = 0; x <= img.width; x++){
            nX = noise(x);
            nY = noise(y);
            if(x%20==0&&y%20==0){
                color = img.get(x,y);
                fill(color);
                text(color[0],nX+x,nY+y);
            }
        }
    }
}

我尝试过的方法：

迭代并添加到数组但遇到另一个错误
只是简单地覆盖了图像，但背景图像仍然具有很强的存在感
每个值的颜色、x 和 y 值的数组，清除然后尝试获取这些值未成功，但是当我这样做时，值超过了图片的后半部分，从右上到左下角落，尽管在图像中不是黑色，但还是黑色的。

非常感谢帮助编辑本文的人post。

Answer 1

停止将图像绘制到屏幕上。

不使用pixels数组获取屏幕颜色，而是使用img.pixels直接引用图像颜色。这样您就不必将图像绘制到屏幕上。

p5.js 和一个奇怪的结果

p5.js and an odd result

javascript

p5.js