显示图像 (p5.js)

Question

我正在尝试制作一些图像通过螺旋路径逐渐显露出来的东西。我已经到了可以让它具有我正在使用的图像的颜色的地步，我可以让它呈螺旋状，但我不知道如何让它同时做到这两个。这是我正在使用的代码：

var img;
var ct = 0;
var pixColor;
function preload() {
    img = loadImage("test_image.png")
}

function draw() {
    //this makes it use the colors of the image
    for (var x = 0; x <= width; x++) {
        for (var y = 0; y <= height; y++) {
            pixColor = img.get(x,y);
        }
    }
    fill(pixColor[0],pixColor[1],pixColor(2));
    //this makes the image spiral
    ellipse(125+cos(ct)*frameCount/10,175+sin(ct)*frameCount/10,5)
    ct+=0.1;
}

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

我推荐你break your problem down into smaller pieces。从仅显示螺旋路径的草图开始。让它完美地工作。然后重新开始绘制新草图，该草图仅显示硬编码点值处或鼠标所在位置的图像。在考虑组合它们之前让它们完美运行。

但是看看你的代码，这部分没有多大意义：

for (var x = 0; x <= width; x++) {
    for (var y = 0; y <= height; y++) {
        pixColor = img.get(x,y);
    }
}
fill(pixColor[0],pixColor[1],pixColor[2]);

此处您使用嵌套的 for 循环来获取每个像素的颜色。但是在 for 循环完成之前，您实际上不会对该颜色做任何事情。换句话说，pixColor 只会有它看到的最后一种颜色。这不是你想要的。

相反，您可能想要获得 "under" 当前螺旋位置的颜色。您根本不需要 for 循环。

var x = 125 + cos(ct) * frameCount / 10;
var y= 175 + sin(ct) * frameCount / 10;
pixColor = img.get(x, y);
ellipse(x, y, 5);

另请注意，由于您每帧都调用 background()，因此您只会看到一个圆圈。如果这不是您想要的（如果您希望螺旋线在绘制时保留在屏幕上），请考虑将对 background() 的调用移动到 setup() 函数内。

显示图像 (p5.js)

Revealing an image (p5.js)

image

colors

p5.js

spiral