Oh!Coder

Coding Life

有趣的Processing-图片

| Comments

Hi,大家好!这一次,我们将一起学习Processing中如何对图片进行操作。总的来说呢,这次我们将学习的内容分为三部分。第一部分,是图片的加载。第二部分,是图片的显示。第三部分,是利用Processing为我们提供的方法,对图片做出简单的滤镜效果。

好!接下来,就让我们进入正题。

加载图片

大家是否还记得,我们在学习Processing字体那部分的时候,曾经学习过如何加载字体文件,以此达到可以系统外的字体类型。在学习那部分的时候,我们曾提到过,字体文件的存放路径,不知大家是否还有印象。若已经记不太清,也不用担心,这里我们将借着学习加载图片的机会,和大家一起重新回顾一下那部分内容。

加载图片和加载外部字体类型文件,默认情况下,它们都会存放在统一目录。下面介绍加载图片文件的方法,同样也适用于加载外部字体文件。首先,让我们启动Processing的PDE,并新建一个项目窗口,如下图所示。

processing-new-window

图片来源:Processing新项目窗口

创建完成之后,下一步,我们将向Processing添加图片。下面的演示,以Mac OS X操作系统下的版本为例。首先选中Processing的PDE的项目窗口,在顶部菜单栏中查找Sketch菜单选项,找到后选中,弹出下拉菜单,然后点击菜单中的Add File...选项,如下图所示。

processing-fun-image-add-file

图片来源:Processing的PDE中Sketch菜单项

此时会弹出一个新的窗口,然后选中你想要添加的图片文件,选中之后,点击窗口下方的Open按钮,此时图片添加成功。完成之后,添加好的图片被保存到项目目录下的一个名为data的文件夹下。如果想快速打开项目文件目录,可以再次点击顶部的Sketch菜单项,在弹出的下拉菜单中,点击Show Sketch Folder,可以直接打开项目目录。对于尚未保存过的项目,默认情况下,项目本身的目录,会被保存到一个临时目录下。

上述步骤完成后,图片会被复制到项目目录下的data目录。这里对于字体文件的加载,步骤和存储目录和图片文件是一样的。好!既然图片已经加载完成,接下来让我们看看,如何显示图片。

显示图片

既然图片文件已经顺利保存到了项目的目录下。下面,让我们看看,如何用程序进行加载,并将其显示在窗口中。具体,我们还是用例子来演示。

首先将如下代码添入新建的项目窗口中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup(){
  // 设置窗口大小
  size(600, 600);
  // 加载图片
  // 此处图片名称为spring.png
  PImage img = loadImage("spring.png");
  // 显示图片
  // 左边开始,第一个参数为PImage类型变量,
  // 第二个,第三个参数分别为图片左上角的x,y坐标值
  image(img, 50, 50);
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
  // 此处无代码。开森不?
}

上述代码中,注意图片名称要改为你自己的图片名称,此处示范的图片文件名为spring.png。注意,图片的文件名要用引号引起来,因为这是字符串。除此之外,还要注意此处的文件名要加上文件类型的后缀,例如此处为.png

processing-window-menu

图片来源:Processing新项目窗口中的菜单栏

完成之后,点击项目窗口上,菜单栏中的三角形按钮,如上图所示,编译并运行示例程序。如果一切顺利,显示结果类似于下图。

processing-fun-image-1

图片来源:Processing程序执行结果

示例中,出现了三个新面孔,一个是PImage,另一个是loadImage()以及image()。其中,PImage是Processing类库提供给我们的图片类型,是Processing帮我们事先定义好的图片类型。loadImage()方法的功能就是加载图片,加载的默认目录是项目目录下的data目录,如果将文件放到data目录下的子目录中,比如submenu,那这里调用spring.png文件的代码,则应该变为loadImage("submenu/spring.png"),此外还要注意文件名要加文件类型后缀。image()方法的功能,就是显示加载进来的图片了,image()方法有三个参数,我们已在示例中做了解释。

其实,除了显示外部导入的图片,我们还可以自己用程序创建一个图片,然后用image()方法显示出来。下面,我们将学习如何显示自定义图片。学习的方式,我们还是以示例来说明。

新建一个项目窗口,填入如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup(){
  // 设置窗口大小
  size(600, 600);
  // 创建PImage变量。此处为创建自定义图片
  // createImage()方法,左边开始,
  // 第一,第二个参数定义图片的宽度和高度,
  // 第三个参数指定图片为RGB颜色类型,此处RGB是
  // Processing提供的一个常量。
  PImage img = createImage(500, 500, RGB);
  // 显示自定义图片。
  // 左边开始,第一个参数为PImage变量,
  // 第二,第三个参数为图片左上角起始坐标x,y
  // 第四,第五个参数为指定图片的宽度和高度
  image(img, 50, 50, 500, 500);
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
  // 此处无代码
}

点击项目窗口中菜单栏的三角按钮,编译并运行示例代码。效果图大致如下:

processing-fun-image-2

图片来源:Processing程序执行结果

此示例,相较于上述显示外部图片示例而言,有两处不一样的地方,第一处是loadImage()方法替换成了createImage()方法,第二处是image()方法的调用参数,由之前的三个,变成了现在的五个。createImage()方法,作用是创建一个自定义的PImage类型的变量,三个参数分别是指定图片的宽高以及RGB颜色类型。image()方法又多出来两个参数,分别指定了所显示图片的宽度和高度。此示例中,由于我们没有向图片中设置像素颜色,所以图片默认为黑色。

关于显示图片,主要就是上述两种形式。接下来,让我们看看今天要学的最后一部分,图片过滤器。

图片过滤器

很多时候,我们想对图片添加一些效果,比如图片的透明度,亮暗,等。为此,Processing为我们提供了一个简洁的方法,能够让我们实现一些类似于滤镜的效果。具体我们还是通过示例进行学习。

首先,让我们还是新建一个项目窗口。向窗口中,添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup(){
  // 设置窗口大小
  size(500, 375);
  // 加载图片spring.png
  PImage img = loadImage("spring.png");
  // 设置图片的透明度为100
  tint(100);
  // 显示图片img
  image(img, 0, 0);
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
  // 此处无代码
}

点击项目窗口中菜单栏上的三角形按钮,编译并运行此程序。如果一切正常,示例运行结果大致如下图所示。

processing-fun-image-3

图片来源:Processing程序执行结果

上面的示例中,出现了一个新面孔,方法名为tint()。在此示例中,方法tint()只传入了一个参数,此处传入的一个参数,功能是调节图片的明暗度,其取值范围是0~255。0为最暗,呈黑色,255为最亮,呈图片原色。此示例可以看做是调节图片亮暗的典型例子。

其他地方不变,如果将代码tint(100);改成tint(255, 0, 0, 100),然后编译并运行上述代码,我们会得到类似如下图所示的运行结果。

processing-fun-image-4

图片来源:Processing程序执行结果

这里,其他地方不变,我们为tint()方法传入了四个参数,从左边算起,前三个参数,分别代表了RGB的R、G、B值,也就是红、绿、蓝三色值,最后一个参数代表了A值,也即是Alpha透明值。当透明值为0时,图片完全透明。相反,当透明值为255时,图片完全不透明。这四个参数的数值范围均为0~255。

如果方法tint()传入了三个参数,比如tint(255, 0, 0),则这三个参数代表了RGB的R、G、B值,也就是红、绿、蓝三色值,少了Alpha透明值。

通过tint()方法,简单的调节R、G、B、A值,可以快速实现滤镜的效果。

总结

关于图片,我们这次初步学习了三个方面,分别是图片的加载,图片的显示以及利用tint()方法,实现简单的滤镜效果。嗯,图片加载那部分,注意加载到Processing的PDE后,图片保存的路径。图片显示部分,主要依靠image()方法。当然,这两部分都涉及到了PImage类型。

下期预告

这次,我们对图片学习了一些基本的内容。图片毕竟是由像素点组成的,那我们如何对图片中的像素进行操作呢?嗯,我们下次将深入学习这部分内容。

Comments