处理是一个强大的工具，它允许通过代码创造艺术。它是用于处理图形的Java库和集成开发环境（IDE）的组合，后者允许您轻松地编写和运行代码。

有许多图形和动画初学者的项目，使用处理，但它也能够操纵现场视频。

今天，您将使用处理视频库**由鼠标控制的不同效果的实时视频幻灯片。除了翻转实时视频外，您还将学习如何调整其大小和颜色，以及如何使其跟随鼠标光标。

项目设置

要开始，请下载处理并打开一个空白草图。本教程基于Windows系统，但它应该可以在任何带有网络摄像头的计算机上使用。

您可能需要安装处理视频库，可在“草图”&gt；“导入库”&gt；“添加库”下访问。在搜索框中搜索视频，然后从Processing Foundation安装库。

一旦安装，您就可以开始了。如果要跳过编码，可以下载完整的草图。不过，最好是自己动手做！

使用带处理的网络摄像头

让我们从导入库开始，并创建一个设置函数。在空白处理草图中输入以下内容：

import processing.video.*;Capture cam;void setup(){ size(640,480); cam = new Capture(this, 640, 480); cam.start();}

导入视频库后，创建一个名为cam的捕获实例来存储来自网络摄像头的数据。在setup中，size函数设置一个640x480像素大小的窗口。

下一行为这个草图指定了一个新的Capture实例，这个实例的大小与窗口的大小相同，然后再告诉相机打开凸轮启动().

如果你现在还不明白其中的每一部分，别担心。简而言之，我们已经告诉处理**一个窗口，找到我们的相机，然后打开它！为了显示它，我们需要一个绘图函数。在上面的代码下面，在花括号外输入。

void draw(){ if (cam.available()){ cam.read(); } image(cam,0,0); }

draw函数在每一帧都被调用。这意味着，如果相机有可用的数据，您可以每秒多次从中读取数据。

然后，该数据在窗口左上角的位置0，0处显示为图像。

保存草图，然后按屏幕顶部的“播放”按钮。

成功！cam存储的数据每帧都被正确地打印到屏幕上。如果有问题，请彻底检查代码。Java需要每个括号和分号都放在正确的位置！处理过程也可能需要几秒钟才能访问网络摄像头，因此如果您认为它不起作用，请在启动脚本后等待几秒钟。

翻转图片

现在你已经有了一个实时的摄像头图像，让我们来操纵它。在draw函数中，将image（cam，0,0）；替换为这两行代码。

scale(-1,1);image(cam,-width,0);

保存并重新运行草图。你能看出区别吗？通过使用负比例值，所有x值（水平像素）现在都反转。因此，我们需要使用窗口宽度的负值来正确定位图像。

翻转图像只需要几个小的改变。

scale(-1,-1);image(cam,-width,-height);

这一次，x和y值都会翻转，从而将实时相机图像翻转过来。到目前为止，您已经编码了一个普通图像、一个水平翻转的图像和一个垂直翻转的图像。让我们想个办法在他们之间循环。

使其循环

我们不必每次都重写代码，而是可以用数字来循环。在代码顶部创建一个名为switcher的新整数。

import processing.video.*;int switcher = 0;Capture cam;

我们可以使用switcher的值来确定相机图像的变化。草图开始时，将其值设置为0。现在我们可以用逻辑来改变图像的变化。将绘制方法更新为如下所示：

void draw(){ if (cam.available()){ cam.read(); } if(switcher==0){ image(cam,0,0); } else if(switcher == 1){ scale(-1,1); image(cam,-width,0); } else if(switcher == 2){ scale(-1,-1); image(cam,-width,-height); } else{ println("Switcher = 0 again"); switcher = 0; }}

现在，根据switcher的值，代码的所有三个变体都将触发。如果它与If或If else语句之一不匹配，else子句将重置为0。逻辑是一个重要的初学者学习技能，你可以找到他们和一个优秀的YouTube编程教程更多！

使用鼠标

处理具有访问鼠标的内置方法。要检测用户何时单击鼠标，请在脚本底部添加mousePressed函数。

void mousePressed(){ switcher++;}

处理侦听任何鼠标单击，并在检测到鼠标单击时中断程序以执行此方法。每次调用该方法时，switcher的值都会增大1。保存并运行脚本。

现在，当你按下鼠标按钮时，它会在不同方向的视频中循环播放，然后返回到原来的视频。到目前为止，你刚刚翻转了视频，现在让我们做一些更有趣的事情。

添加更多效果

现在，您将编写一个类似于著名的安迪·沃霍尔艺术作品的四色实时图像效果代码。添加更多效果就像在逻辑中添加另一个子句一样简单。在最后一个else if语句和else语句之间将此添加到脚本中。

else if(switcher == 3){ tint(256, 0, 0); image(cam, 0, 0, width/2, height/2); tint(0, 256, 0); image(cam, width/2, 0, width/2, height/2); tint(0, 0, 256); image(cam, 0, height/2, width/2, height/2); tint(256, 0, 256); image(cam, width/2, height/2, width/2, height/2);}

此代码使用图像函数在屏幕的每个角落创建四个单独的相机图像，并使它们大小都减半。

着色功能为每个相机图像添加颜色。括号中的数字是红色、绿色和蓝色（RGB）值。用所选颜色对以下所有代码着色。

保存并播放以查看结果。尝试更改每个着色函数中的RGB编号以更改颜色！

让它跟着老鼠

最后，让我们使用处理库中的有用函数使实时图像跟随鼠标位置。把这个加在逻辑的其他部分之上。

else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2);}

在这里，您正在将相机中的图像定位到mouseX和mouseY。这些是内置的处理值，返回鼠标指向的像素。

就这样！五种不同的现场视频通过代码。但是，当您运行代码时，您会注意到几个问题。

完成代码

到目前为止，您所创建的代码是有效的，但是您会注意到两个问题。首先，一旦四色变化显示出来，之后的一切都是紫色的。其次，当你用鼠标移动视频时，它会留下痕迹。您可以通过在draw函数的顶部添加几行来修复它。

void draw(){ tint(256,256,256); background(0); //draw function continues normally here!

在每一帧的开始处，这个代码将色调重置为白色，并添加一个黑色的背景色来阻止视频留下痕迹。现在当你测试这个程序时，一切都很正常！

网络游戏效果：来自代码的艺术

处理是非常强大的，你可以用它做很多事情。这是一个很好的平台，使艺术与代码，但它同样适用于控制机器人！

如果你不喜欢Java，那么有一个基于处理的JavaScript库叫做p5.js。它是基于浏览器的，甚至初学者也可以使用它来创建奇妙的反应动画！

图片来源：Sydaèu Producti***/Depositphotos