处理：鼠标指针移过像素点改变颜色答案

【问题标题】：Processing: Pixels changes colors by the mouse pointer moves over处理：鼠标指针移过像素点改变颜色
【发布时间】：2016-05-16 15:17:39
【问题描述】：

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

【问题讨论】：

那是什么语言？请edit您的问题并添加相关标签。谢谢！
我应该在另一个字段中将此程序标记为处理草图吗？如果我不准确，请告诉我方法:)
我看你已经找到了！ :-) 但我注意到还有一件事需要调整，我已经对您的问题提交了另一项编辑，以便现在自动显示图像。

标签： image-processing processing

【解决方案1】：

很难回答一般的“我该怎么做”类型的问题，因为有很多不同的方法可以做这样的事情。 Stack Overflow 更多地是为“我尝试过 X，预期 Y，但得到 Z”类型的问题而设计的。话虽如此，我会尽力提供一般意义上的帮助。

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

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

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

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

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

【讨论】：

【解决方案2】：

补充凯文的出色答案：首先分解它。

“改变颜色”=set() 或pixels[]。（虽然 set 可能会慢一些，但上手和掌握窍门可能更直观）

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

这实现起来超级简单：

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

这是一个快速的 sn-p：

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);
}

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

另一个选项是图像的副本，该图像已被 filtered 设置为灰度，您可以将 mask() 应用于该图像。当您移动鼠标时，此蒙版会越来越多地显示灰度图像。使这个掩码动态化的一种简单方法是使用PGraphics，正如 Kevin 已经提到的那样。它本质上作为一个单独的层使用典型的处理绘图功能进行绘制。唯一需要注意的是，您需要将这些绘图函数调用放在 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 使用其他形状的蒙版和软蒙版

【讨论】：