如何在处理中创建多色光栅化图片

如何解决如何在处理中创建多色光栅化图片

我在 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 有所不同。