显示图像 (p5.js)
Revealing an image (p5.js)
我正在尝试制作一些图像通过螺旋路径逐渐显露出来的东西。我已经到了可以让它具有我正在使用的图像的颜色的地步,我可以让它呈螺旋状,但我不知道如何让它同时做到这两个。这是我正在使用的代码:
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;
}
如有任何帮助,我们将不胜感激。谢谢!
我推荐你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()
函数内。
我正在尝试制作一些图像通过螺旋路径逐渐显露出来的东西。我已经到了可以让它具有我正在使用的图像的颜色的地步,我可以让它呈螺旋状,但我不知道如何让它同时做到这两个。这是我正在使用的代码:
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;
}
如有任何帮助,我们将不胜感激。谢谢!
我推荐你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()
函数内。