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

Question

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

Answer 1

添加到凯文的优秀答案：首先分解它。

“改变颜色”= set()或pixels[]。 （虽然集可以是较慢的，也可能是更直观的开始和获得的挂起）

“黑/白（灰度）” - 具有相同的R，G一个color()，B值基本上灰度。您可以使用恰当地命名为 brightness()函数的get()像素的亮度。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); 
} 

它将采取运动的很多事情，使整幅图像的灰度。

另一种选择是将图像的一个副本filtered设为灰度级，您可以将其应用于mask()。当您移动鼠标时，此遮罩会越来越多地显示灰度图像。一个简单的方法来使这个面具动态是使用PGraphics凯文已经提到。它基本上作为一个单独的层来使用典型的处理绘图功能。唯一的问题是你需要在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

Answer 2

很难回答一般的“我该怎么做”类型的问题，因为有很多不同的方法来做这样的事情。堆栈溢出的设计更多的是“我试过X，预计Y，但得到了Z”类型的问题。这就是说，我会尽力在一般意义上提供帮助。

您需要将问题分解为更小的步骤。你应该只关注一小步，而不是一次尝试完成一个大的最终目标。

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

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

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

你必须退后一步，真正理解你发布的例子在做什么。你不能破解代码并期望它能够工作。将问题分解成更小的部分，然后逐个处理这些部分。如果您遇到这些特定步骤之一，那么您可以提出具体问题并发布MCVE，并且帮助您会容易得多。祝你好运！