WEBVTT

00:00:00.760 --> 00:00:06.265
在本节，我们要将之前讲过的代码概念

00:00:06.265 --> 00:00:11.908
和图像、像素和 RGB 值的概念结合起来

00:00:11.908 --> 00:00:16.985
本节的实例中，我们一次只研究一个像素

00:00:16.985 --> 00:00:21.509
下一节中，我们会将数量增大，一次研究上万个像素

00:00:21.509 --> 00:00:27.036
开始之前，我想要看看这个名为 x.png 的图像

00:00:27.036 --> 00:00:32.702
这个图像非常小，是10×10的图像，在这页的这个地方

00:00:32.702 --> 00:00:38.229
它是一个黑色的图像，上面有个白色的 x

00:00:38.229 --> 00:00:43.756
图像非常小，我们稍后会将它放大

00:00:43.756 --> 00:00:49.212
png 是一种图像格式，叫便携式网络图像格式

00:00:49.212 --> 00:00:54.967
jpeg 可能是你比较熟悉的一种图像格式，这两个都是图像格式

00:00:54.967 --> 00:01:00.938
我要看的是这里，这里有一些代码，加载并显示 x.png 图像

00:01:00.938 --> 00:01:05.675
这是第一个、非常简单的图像处理代码实例

00:01:05.675 --> 00:01:10.172
代码在这里，我讲一下每一行的内容

00:01:10.172 --> 00:01:14.489
第一行：image = new SimpleImage("x.png");

00:01:14.669 --> 00:01:19.344
这行代码的意思是右边的代码将 x.png 图像加载到存储器中

00:01:19.344 --> 00:01:23.698
我们以后会讨论什么是存储器

00:01:23.698 --> 00:01:27.890
图像载入计算机后，计算机就可以处理图像了

00:01:27.890 --> 00:01:32.516
加载图像后，这里的等号就是

00:01:32.516 --> 00:01:36.980
把图像存储在变量里，我将变量命名为 image.setZoom(20)

00:01:36.980 --> 00:01:41.389
这个变量和我们前面讲的变量是一样的
第二行：image.setZoom(20)

00:01:41.389 --> 00:01:46.016
它调用图像所带的 setZoom 函数，传递数字20

00:01:46.016 --> 00:01:51.960
这行代码的作用是设定选项，用于显示20倍的图像

00:01:51.960 --> 00:01:57.190
对于这么小的图像

00:01:57.190 --> 00:02:00.657
用这种方法来将它放大，我们就可以看得到

00:02:00.657 --> 00:02:04.038
最后，print(image)和以前讲的非常相似，就是在右边输出图像

00:02:04.038 --> 00:02:07.418
跟输出字符串和数字一样

00:02:07.418 --> 00:02:12.326
我们来试一下。运行后，你看到这里显示 x.png 这个图像

00:02:12.326 --> 00:02:16.908
其实你可以数出来，1,2,3,4

00:02:16.908 --> 00:02:21.980
你可以将像素数出来，是10像素×10像素

00:02:22.163 --> 00:02:27.234
在这里显示的是20倍大

00:02:27.234 --> 00:02:31.634
将数字改成10，再次运行

00:02:31.634 --> 00:02:35.483
改成40，运行，图像就大了许多

00:02:35.483 --> 00:02:40.013
这只是代码的第一个实例

00:02:40.013 --> 00:02:44.882
继续往下学，我们就可以加载和处理图像

00:02:44.882 --> 00:02:50.471
再来做一点更有趣的事情。我要扩展代码，从而可以处理单个像素

00:02:50.471 --> 00:02:55.247
我在程序中间加两行代码

00:02:55.247 --> 00:02:59.458
这一行是 pixel = image.getPixel(0,0)

00:02:59.458 --> 00:03:04.361
这行代码的作用是根据我们在这里指定的 x y 坐标

00:03:04.361 --> 00:03:09.515
在图像中获取某个像素点，0,0指向是左上角的像素点

00:03:09.515 --> 00:03:14.857
所以它获取左上角的像素点，并将其存储到变量

00:03:14.857 --> 00:03:20.224
这行是 pixel.setRed(255)

00:03:20.224 --> 00:03:25.722
这行代码调用 setRed 函数

00:03:25.722 --> 00:03:31.090
setRed的作用是获取括号里面的数值

00:03:31.090 --> 00:03:36.329
将该数值设为像素的红色值，运行一下，看结果如何

00:03:36.329 --> 00:03:41.504
结果是代码获取左上角这个原本是黑色的像素点

00:03:41.504 --> 00:03:46.421
要记得每个像素有三个值，红绿蓝

00:03:46.421 --> 00:03:51.597
这行代码访问红色值

00:03:51.597 --> 00:03:56.385
将其改成255，就是覆盖原来的数值

00:03:56.385 --> 00:04:01.625
所以我们看到这个像素点是红色的

00:04:01.625 --> 00:04:07.995
setRed 改变红色值,有类似的函数 setGreen 和 setBlue

00:04:07.995 --> 00:04:12.808
就有三个函数 setRed，setGreen 和setBlue

00:04:12.808 --> 00:04:17.620
有这些函数，就可以任意改变红绿蓝的值

00:04:17.620 --> 00:04:22.083
这里我提一下附加材料

00:04:22.083 --> 00:04:25.498
我刚介绍了三种函数

00:04:25.498 --> 00:04:29.328
Image functions reference （图像函数参考）是独立的页面，用一个表列出所有函数

00:04:29.328 --> 00:04:33.111
在以后的练习中，假如你要知道函数的作用，就可以作为参考

00:04:33.111 --> 00:04:36.526
但在我的讲课中，我就只用一部分函数

00:04:36.526 --> 00:04:40.240
下面我要演示这些函数的作用

00:04:40.240 --> 00:04:44.273
我们来看一些实例

00:04:44.273 --> 00:04:48.234
就是用函数执行一些任务

00:04:48.234 --> 00:04:52.118
实例的格式是这个小代码框里有一些初始代码

00:04:52.118 --> 00:04:55.856
下面的表格列出一些难题

00:04:55.856 --> 00:04:59.643
如设置绿色、黄色等，我们逐个来分析

00:04:59.643 --> 00:05:03.575
表格的右边都有一个小小的显示按钮

00:05:03.575 --> 00:05:07.702
你可以点击按钮，查看解答代码

00:05:07.702 --> 00:05:11.731
稍后你可以自己访问这页，亲自试一下我演示过的实验，或做点修改

00:05:11.731 --> 00:05:15.421
我们来试第一个

00:05:15.421 --> 00:05:19.282
我运行代码，看代码做什么

00:05:19.282 --> 00:05:23.582
现在，代码只是获取0,0像素点，改成红色，是之前讲过的

00:05:23.582 --> 00:05:28.589
看看第一个问题，将0,0像素点设为绿色

00:05:28.589 --> 00:05:33.543
这个表格是用英文的，它的意思是

00:05:33.543 --> 00:05:38.560
你要根据我们已经学过的步骤来达到某些效果

00:05:38.560 --> 00:05:43.641
就函数调用和数值而言，代码框里应该写些什么

00:05:43.641 --> 00:05:48.850
我们要进行什么运算来取得想要的效果

00:05:48.850 --> 00:05:53.981
基本上，你是把英语转换成计算机的语言

00:05:53.981 --> 00:05:58.792
这个例子是要设绿色，我要做的不是调用 serRed 函数

00:05:58.792 --> 00:06:03.903
而是将它改成调用 setGreen 函数。我们来试试看，是成功的

00:06:03.903 --> 00:06:09.466
有了绿色的像素点。试试下一个例子

00:06:09.466 --> 00:06:15.315
下一个例子说要将像素 (0,0) 设成黄色。

00:06:15.315 --> 00:06:20.664
要让像素变成黄色，我要将红色值和绿色值设成255

00:06:20.664 --> 00:06:25.942
黄色等于红色加绿色，我将红色和绿色都改变

00:06:25.942 --> 00:06:30.197
复制这行，然后贴到这里

00:06:30.197 --> 00:06:34.280
将这里改成红色。我的根据是一旦可以获取像素点

00:06:34.280 --> 00:06:38.312
我就可以对像素点做几样事情。因此，在第一行，我调用了 setRed，改变红色值

00:06:38.312 --> 00:06:42.242
接着我可以调用下一行的 setGreen 来改变绿色

00:06:42.242 --> 00:06:46.427
代码会完成每一步

00:06:46.427 --> 00:06:50.510
我们试试看。果然，是黄色

00:06:50.510 --> 00:06:54.439
这其实是回到以前的概念，这有一个像素点

00:06:54.439 --> 00:06:58.624
该像素点有三个值，我逐行写代码，在计算机里改变这些值

00:06:58.624 --> 00:07:04.407
我们试试下一个，将像素 1,0 改成黄色

00:07:04.407 --> 00:07:10.242
这个像素在哪里呢？回到这一行，pixel = image.getPixel(0,0)

00:07:10.242 --> 00:07:14.751
我还没有改这一行

00:07:14.751 --> 00:07:19.630
不管这里设的是什么值，如0,0，都只是用来识别不同像素而已

00:07:19.630 --> 00:07:24.571
如果说1,0，就是获取x=1和y=0的像素

00:07:24.571 --> 00:07:29.265
习惯是先x后y

00:07:29.265 --> 00:07:34.206
运行来看看。我们看到的是往右移了一个

00:07:34.206 --> 00:07:39.024
所以我们可以在这里设定任何值

00:07:39.024 --> 00:07:43.254
譬如2,4，看看运行的结果，很显然像素在这里

00:07:43.407 --> 00:07:47.285
这回到我们几节前的内容

00:07:47.285 --> 00:07:51.673
这是x=0，这是x=1，这是x=2

00:07:51.673 --> 00:07:55.704
我们不去细看不同x和y值的结果了

00:07:55.704 --> 00:08:00.462
我们只要知道以下这点就可以了，即使有一百万个像素点

00:08:00.462 --> 00:08:05.140
我们都可以用特定的x值和y值来设定每个像素点

00:08:05.140 --> 00:08:13.929
好，这里要将像素0,0设成白色，将这里改回像素0,0

00:08:13.929 --> 00:08:23.194
我要如何处理红绿蓝来产生白色呢

00:08:23.194 --> 00:08:30.069
答案是将三个值都设成255，请注意，不用重新输入像素

00:08:30.069 --> 00:08:35.036
我发现复制现有的像素，再进行修改，通常会容易一些

00:08:35.036 --> 00:08:39.194
我在这里设置第三个函数

00:08:39.367 --> 00:08:43.598
pixel.setBlue(255)，看看这三个的结果

00:08:43.598 --> 00:08:47.245
果然，设成了白色，我将三个值都设成了255

00:08:47.245 --> 00:08:51.258
这里还有一些问题，我就不解答了

00:08:51.258 --> 00:08:55.167
但如果你想的话，可以到这个页面

00:08:55.167 --> 00:08:59.284
试一下任何数值

00:08:59.284 --> 00:09:02.880
你理解了这些内容后，我们就可以做一些练习