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

Question

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

Answer 1

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

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

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

第2步：你能把黑白图像的某个子部分显示出来吗？现在还不用担心鼠标的位置。只需使用一个硬编码的位置，也许可以从一个矩形开始，这样更容易。您可以使用PGraphics类或set()函数执行此步骤。

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

你必须退一步，真正理解你发布的例子在做什么。你不能只靠破解代码就指望它能正常工作。把问题分解成更小的部分，然后一次处理一个。如果你在其中一个特定步骤上遇到困难，那么你可以问一个特定的问题并发布MCVE，这样会更容易帮助你。祝你好运

Answer 2

要补充Kevin的优秀答案，请先将其分解。

"change colors"=设置（）或像素[]。（尽管设置可能较慢，但从开始并掌握窍门可能更直观）

"黑/白（灰度）"-具有相同r、g、b值的color()本质上是灰度级。您可以使用适当命名的brightness（）函数。get()将检索给定x，y坐标对的光标（例如mouseX,mouseY）

这将非常简单地实现：

1. 加载图像
2. 获取光标坐标处的像素颜色
3. 获取像素的亮度
4. 基于相同坐标下的亮度设置灰度值

以下是一个快速片段：

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

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

另一个选项是一个已过滤为灰度的图像副本，您可以对其应用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();
}

最酷的是，您可以使用其他形状的遮罩和使用渐变