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只会看到它看到的最后一种颜色。那不是你想要的。

相反，您可能希望获得“当前”螺旋位置“下方”的颜色。你根本不需要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）

1 个答案: