Question

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

Answer 1

很难回答一般问题＆＃34;我该怎么做？＃34;键入问题，因为有很多不同的方法可以做这样的事情。 Stack Overflow的设计更多用于＆＃34;我尝试了X，期望Y，但得到Z而不是＃34;输入问题。话虽如此，我会尝试在一般意义上提供帮助。

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

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

第2步：您可以拍摄黑白图像的某些子部分并在该子部分中显示原始颜色吗？不要担心鼠标的位置。只需使用硬编码位置，也可以从矩形开始，以便更轻松。您可以在此步骤中使用PGraphics类或set()函数。

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

你必须退一步，真正了解你发布的例子正在做什么。你不能只是破解代码并期望它能够运行。将问题分解成更小的部分，然后一次一个地接受这些部分。如果您遇到其中一个具体步骤，那么您可以提出具体问题并发布MCVE，这样可以更轻松地为您提供帮助。祝你好运！

Answer 2

要添加凯文的优秀答案：首先将其分解。

＆＃34;改变颜色＆＃34; = set()或pixels[]。（尽管设置可能较慢，但从开始使用它可能更直观）

＆＃34;黑/白（灰度）＆＃34; - 具有相同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);
}

要使整个图像灰度化需要很多动作。

另一个选项是图像的副本，该图像已filtered为灰度，您可以应用mask()。当您移动鼠标时，此蒙版将越来越多地显示灰度图像。使这个面具动态化的简单方法是使用凯文已经提到的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

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

2 个答案: