处理：像素通过鼠标指针移动改变颜色

Question

如何将此程序转换为颜色变化？ https://processing.org/tutorials/pixels/

Answer 1

很难回答一般的 "how do I do this" 类型的问题，因为有很多不同的方法可以做这样的事情。 Stack Overflow 专为 "I tried X, expected Y, but got Z instead" 类型的问题而设计。话虽如此，我会尽力提供一般意义上的帮助。

您需要将问题分解成更小的步骤。你应该一次只专注于一小步，而不是试图一次完成你的大目标。

第 1 步： 你能加载和显示黑白图像吗？别担心其他任何事情。只需创建一个加载彩色图像并以黑白显示的简单草图。解决此问题的一种方法可能是使用 filter() 函数。

第 2 步： 你能截取黑白图像的某些部分并在该部分显示原始颜色吗？不要担心鼠标的位置。只需使用一个硬编码的位置，也许从一个矩形开始，这样会更容易。您可以在此步骤中使用 PGraphics class or the set() 函数。

第 3 步：在硬编码步骤生效后，您可以添加获取鼠标位置的逻辑。

您必须退后一步，真正理解您 post 所举的示例在做什么。您不能只是破解代码并期望它能工作。将问题分解成更小的部分，然后一次处理这些部分。如果您在其中一个特定步骤上遇到困难，那么您可以提出一个特定问题并 post 和 MCVE，这样会更容易为您提供帮助。祝你好运！

Answer 2

补充 Kevin 的出色回答：先将其分解。

"change colors" = set() or pixels[]。（虽然 set 可能会更慢，但开始和掌握窍门可能更直观）

"black/white (gray scale)" - 具有相同 r,g,b 值的 color() 本质上是灰度。您可以 get() 使用恰当命名的像素的亮度 brightness() 函数。 get() 将检索给定 x,y 坐标对的光标（例如 mouseX,mouseY）

这实现起来超级简单：

加载图像
获取光标坐标处的像素颜色
获取像素的亮度
根据相同坐标下的亮度设置灰度值

这是一个简短的片段：

PImage image;

void setup(){
  size(200,200);
  image = loadImage("https://processing.org/tutorials/pixels/imgs/tint1.jpg");
}
void draw(){
  //modify output - cheap grayscale by using the pixel brightness
  image.set(mouseX,mouseY,color(//make a gray scale colour...
                             brightness(//from the brightness...
                                 image.get(mouseX,mouseY)//of the pixel under cursor
                             )
                           ));
  //draw the result;
  image(image,0,0);
}

要使整个图像灰度化需要大量的运动。

另一种选择是图像的副本，正如 Kevin 已经提到的那样 filtered to be grayscale that you can apply a mask() to. As you move the mouse this mask would reveal the greyscale image more and more. An easy way to make this mask dynamic is to use PGraphics。它本质上是一个单独的层，可以使用典型的 Processing 绘图功能进行绘制。唯一的问题是您需要将这些绘图函数调用放在 beginDraw()/endDraw() 调用中。

这是一个评论演示：

PImage input;//original image
PImage output;//grayscale image

PGraphics mask;

void setup(){
  size(200,200);
  input = loadImage("https://processing.org/tutorials/pixels/imgs/tint1.jpg");
  //copy input pixels into output
  output = input.get();
  //make it grayascale
  output.filter(GRAY);
  //setup mask
  mask = createGraphics(width,height);
  mask.beginDraw();
  mask.background(0);//nothing black passes through the mask
  mask.noStroke();
  mask.fill(255);//everything white passes through the mask
  mask.endDraw();
}
void draw(){
  //draw color image
  image(input,0,0);
  //apply mask
  output.mask(mask);
  //draw masked output
  image(output,0,0);
}
//draw into the mask
void mouseDragged(){
  mask.beginDraw();
  mask.ellipse(mouseX,mouseY,20,20);
  mask.endDraw();
}

很酷的是你可以使用其他形状的蒙版和软蒙版 gradients

处理：像素通过鼠标指针移动改变颜色

Processing: Pixels changes colors by the mouse pointer moves over

processing

image-processing