问题描述
我在 Youtube 上学习了本教程,并且成功地为黑白图片添加了颜色。但是,我的目的是创建多色或渐变效果(如 here 或 here),而不是在移动光标时切换颜色。
我在处理方面非常新,我尝试使用变量,但没有成功。
这是草图的代码片段: `
PImage img;
void setup() {
size(598,336);
colorMode(HSB);
img = loadImage("picture-in-data-folder.jpg");
img.resize(598,336);
//ellipseMode(RADIUS);
frameRate(30);
}
void draw() {
background(255);
nostroke();
// fill(0);
float tiles = mouseX/10;
float tileSize = width/tiles;
// color section
fill(color(tiles,255,255));
tileSize++;
if (tiles > width / 2) {
tileSize = 0;
}
// end color section
translate(tileSize/2,tileSize/2);
for (int x = 0; x < tiles; x++) {
for (int y = 0; y < tiles; y++) {
color c = img.get(int(x*tileSize),int(y*tileSize));
float size = map(brightness(c),tileSize,0);
ellipse(x*tileSize,y*tileSize,size,size);
// image(img,mouseX,mouseY);
}
}
}
如果您有任何提示,或者您可以提供建议,我将不胜感激。
谢谢。
解决方法
简短回答:您需要在 fill()
循环中放置一个 for
命令。
长答案:
现在,您的代码正在执行以下操作:
- 基于
tiles
定义mouseX
- 将填充颜色设置为
(tiles,255,255)
- 画出所有的圆圈
我认为你想要它做的是这样的:
- 将填充颜色设置为
(21,255)
(或任何您想要的第一种颜色) - 绘制第一个圆
- 将填充颜色设置为渐变中的下一种颜色
- 画第二个圆
- 等
为了做到这一点,您需要将一个命令放入 for
循环中,以更改填充颜色。这是一种方法:
for (int x = 0; x < tiles; x++) {
for (int y = 0; y < tiles; y++) {
color c = img.get(int(x*tileSize),int(y*tileSize));
float size = map(brightness(c),tileSize,0);
fill(map(x,tiles,255),255);
ellipse(x*tileSize,y*tileSize,size,size);
}
}
我刚刚将填充命令添加为 x
的函数,但您可以随心所欲。为了使其成为渐变,它需要与 x
或 y
有所不同。