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

如何将此程序转换为颜色更改？

---

很难回答一般的“我该怎么做”类型的问题，因为有很多不同的方法来做类似的事情。堆栈溢出的设计更多的是针对“我尝试了X，预期是Y，但得到了Z”类型的问题。话虽如此，我将尽力在一般意义上提供帮助

你需要把你的问题分解成更小的步骤。你应该一次只专注于一小步，而不是试图一下子实现你的最终目标

第1步：能否加载并显示黑白图像？别担心别的事。只需创建一个加载彩色图像并以黑白显示的简单草图。实现这一点的一种方法可能是使用函数

第2步：你能把黑白图像的某个部分显示出来，并在该部分显示原始颜色吗？现在还不用担心鼠标的位置。只需使用一个硬编码的位置，也许可以从一个矩形开始，使其更容易。您可以在此步骤中使用类或函数

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

---

你必须后退一步，真正理解你发布的示例在做什么。你不能仅仅是对代码进行黑客攻击，然后期望它工作。把问题分解成更小的部分，然后一次处理一个。如果你在其中一个特定的步骤上遇到困难，那么你可以问一个特定的问题并发表一篇文章，这样会更容易帮助你。祝你好运

再加上凯文出色的回答：先把它分解一下

“更改颜色”=或。 （虽然设置速度可能较慢，但从一开始就掌握窍门可能更直观）

“黑/白（灰度）”-a

color（）

具有相同的r、g、b值，基本上是灰度。您可以使用适当命名的 功能

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

这将需要大量的运动，使整个图像灰度

另一个选项是图像的一个副本，该图像将是灰度的，您可以对其应用。当你移动鼠标时，这个遮罩会越来越多地显示灰度图像。一个简单的方法，使这个面具动态是使用凯文已经提到。它基本上作为一个单独的层使用典型的处理绘图功能进行绘制。唯一需要注意的是，您需要将这些绘图函数调用放在

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

最酷的是，你可以使用其他形状的面具和软面具，使用的是什么语言？请回答您的问题并添加相关标签。非常感谢。是否还有另一个字段，我应该将此程序标记为加工草图？如果我不准确，请给我指路：）我看你已经找到了！：-）但我注意到还有一件事需要调整，我对你的问题又提交了一次编辑，这样现在图像会自动显示。