1
00:00:00,760 --> 00:00:06,265
在本节，我们要将之前讲过的代码概念

2
00:00:06,265 --> 00:00:11,908
和图像、像素和 RGB 值的概念结合起来

3
00:00:11,908 --> 00:00:16,985
本节的实例中，我们一次只研究一个像素

4
00:00:16,985 --> 00:00:21,509
下一节中，我们会将数量增大，一次研究上万个像素

5
00:00:21,509 --> 00:00:27,036
开始之前，我想要看看这个名为 x.png 的图像

6
00:00:27,036 --> 00:00:32,702
这个图像非常小，是10×10的图像，在这页的这个地方

7
00:00:32,702 --> 00:00:38,229
它是一个黑色的图像，上面有个白色的 x

8
00:00:38,229 --> 00:00:43,756
图像非常小，我们稍后会将它放大

9
00:00:43,756 --> 00:00:49,212
png 是一种图像格式，叫便携式网络图像格式

10
00:00:49,212 --> 00:00:54,967
jpeg 可能是你比较熟悉的一种图像格式，这两个都是图像格式

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

12
00:01:00,938 --> 00:01:05,675
这是第一个、非常简单的图像处理代码实例

13
00:01:05,675 --> 00:01:10,172
代码在这里，我讲一下每一行的内容

14
00:01:10,172 --> 00:01:14,489
第一行：image = new SimpleImage("x.png");

15
00:01:14,669 --> 00:01:19,344
这行代码的意思是右边的代码将 x.png 图像加载到存储器中

16
00:01:19,344 --> 00:01:23,698
我们以后会讨论什么是存储器

17
00:01:23,698 --> 00:01:27,890
图像载入计算机后，计算机就可以处理图像了

18
00:01:27,890 --> 00:01:32,516
加载图像后，这里的等号就是

19
00:01:32,516 --> 00:01:36,980
把图像存储在变量里，我将变量命名为 image.setZoom(20)

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

21
00:01:41,389 --> 00:01:46,016
它调用图像所带的 setZoom 函数，传递数字20

22
00:01:46,016 --> 00:01:51,960
这行代码的作用是设定选项，用于显示20倍的图像

23
00:01:51,960 --> 00:01:57,190
对于这么小的图像

24
00:01:57,190 --> 00:02:00,657
用这种方法来将它放大，我们就可以看得到

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

26
00:02:04,038 --> 00:02:07,418
跟输出字符串和数字一样

27
00:02:07,418 --> 00:02:12,326
我们来试一下。运行后，你看到这里显示 x.png 这个图像

28
00:02:12,326 --> 00:02:16,908
其实你可以数出来，1,2,3,4

29
00:02:16,908 --> 00:02:21,980
你可以将像素数出来，是10像素×10像素

30
00:02:22,163 --> 00:02:27,234
在这里显示的是20倍大

31
00:02:27,234 --> 00:02:31,634
将数字改成10，再次运行

32
00:02:31,634 --> 00:02:35,483
改成40，运行，图像就大了许多

33
00:02:35,483 --> 00:02:40,013
这只是代码的第一个实例

34
00:02:40,013 --> 00:02:44,882
继续往下学，我们就可以加载和处理图像

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

36
00:02:50,471 --> 00:02:55,247
我在程序中间加两行代码

37
00:02:55,247 --> 00:02:59,458
这一行是 pixel = image.getPixel(0,0)

38
00:02:59,458 --> 00:03:04,361
这行代码的作用是根据我们在这里指定的 x y 坐标

39
00:03:04,361 --> 00:03:09,515
在图像中获取某个像素点，0,0指向是左上角的像素点

40
00:03:09,515 --> 00:03:14,857
所以它获取左上角的像素点，并将其存储到变量

41
00:03:14,857 --> 00:03:20,224
这行是 pixel.setRed(255)

42
00:03:20,224 --> 00:03:25,722
这行代码调用 setRed 函数

43
00:03:25,722 --> 00:03:31,090
setRed的作用是获取括号里面的数值

44
00:03:31,090 --> 00:03:36,329
将该数值设为像素的红色值，运行一下，看结果如何

45
00:03:36,329 --> 00:03:41,504
结果是代码获取左上角这个原本是黑色的像素点

46
00:03:41,504 --> 00:03:46,421
要记得每个像素有三个值，红绿蓝

47
00:03:46,421 --> 00:03:51,597
这行代码访问红色值

48
00:03:51,597 --> 00:03:56,385
将其改成255，就是覆盖原来的数值

49
00:03:56,385 --> 00:04:01,625
所以我们看到这个像素点是红色的

50
00:04:01,625 --> 00:04:07,995
setRed 改变红色值,有类似的函数 setGreen 和 setBlue

51
00:04:07,995 --> 00:04:12,808
就有三个函数 setRed，setGreen 和setBlue

52
00:04:12,808 --> 00:04:17,620
有这些函数，就可以任意改变红绿蓝的值

53
00:04:17,620 --> 00:04:22,083
这里我提一下附加材料

54
00:04:22,083 --> 00:04:25,498
我刚介绍了三种函数

55
00:04:25,498 --> 00:04:29,328
Image functions reference （图像函数参考）是独立的页面，用一个表列出所有函数

56
00:04:29,328 --> 00:04:33,111
在以后的练习中，假如你要知道函数的作用，就可以作为参考

57
00:04:33,111 --> 00:04:36,526
但在我的讲课中，我就只用一部分函数

58
00:04:36,526 --> 00:04:40,240
下面我要演示这些函数的作用

59
00:04:40,240 --> 00:04:44,273
我们来看一些实例

60
00:04:44,273 --> 00:04:48,234
就是用函数执行一些任务

61
00:04:48,234 --> 00:04:52,118
实例的格式是这个小代码框里有一些初始代码

62
00:04:52,118 --> 00:04:55,856
下面的表格列出一些难题

63
00:04:55,856 --> 00:04:59,643
如设置绿色、黄色等，我们逐个来分析

64
00:04:59,643 --> 00:05:03,575
表格的右边都有一个小小的显示按钮

65
00:05:03,575 --> 00:05:07,702
你可以点击按钮，查看解答代码

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

67
00:05:11,731 --> 00:05:15,421
我们来试第一个

68
00:05:15,421 --> 00:05:19,282
我运行代码，看代码做什么

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

70
00:05:23,582 --> 00:05:28,589
看看第一个问题，将0,0像素点设为绿色

71
00:05:28,589 --> 00:05:33,543
这个表格是用英文的，它的意思是

72
00:05:33,543 --> 00:05:38,560
你要根据我们已经学过的步骤来达到某些效果

73
00:05:38,560 --> 00:05:43,641
就函数调用和数值而言，代码框里应该写些什么

74
00:05:43,641 --> 00:05:48,850
我们要进行什么运算来取得想要的效果

75
00:05:48,850 --> 00:05:53,981
基本上，你是把英语转换成计算机的语言

76
00:05:53,981 --> 00:05:58,792
这个例子是要设绿色，我要做的不是调用 serRed 函数

77
00:05:58,792 --> 00:06:03,903
而是将它改成调用 setGreen 函数。我们来试试看，是成功的

78
00:06:03,903 --> 00:06:09,466
有了绿色的像素点。试试下一个例子

79
00:06:09,466 --> 00:06:15,315
下一个例子说要将像素 (0,0) 设成黄色。

80
00:06:15,315 --> 00:06:20,664
要让像素变成黄色，我要将红色值和绿色值设成255

81
00:06:20,664 --> 00:06:25,942
黄色等于红色加绿色，我将红色和绿色都改变

82
00:06:25,942 --> 00:06:30,197
复制这行，然后贴到这里

83
00:06:30,197 --> 00:06:34,280
将这里改成红色。我的根据是一旦可以获取像素点

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

85
00:06:38,312 --> 00:06:42,242
接着我可以调用下一行的 setGreen 来改变绿色

86
00:06:42,242 --> 00:06:46,427
代码会完成每一步

87
00:06:46,427 --> 00:06:50,510
我们试试看。果然，是黄色

88
00:06:50,510 --> 00:06:54,439
这其实是回到以前的概念，这有一个像素点

89
00:06:54,439 --> 00:06:58,624
该像素点有三个值，我逐行写代码，在计算机里改变这些值

90
00:06:58,624 --> 00:07:04,407
我们试试下一个，将像素 1,0 改成黄色

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

92
00:07:10,242 --> 00:07:14,751
我还没有改这一行

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

94
00:07:19,630 --> 00:07:24,571
如果说1,0，就是获取x=1和y=0的像素

95
00:07:24,571 --> 00:07:29,265
习惯是先x后y

96
00:07:29,265 --> 00:07:34,206
运行来看看。我们看到的是往右移了一个

97
00:07:34,206 --> 00:07:39,024
所以我们可以在这里设定任何值

98
00:07:39,024 --> 00:07:43,254
譬如2,4，看看运行的结果，很显然像素在这里

99
00:07:43,407 --> 00:07:47,285
这回到我们几节前的内容

100
00:07:47,285 --> 00:07:51,673
这是x=0，这是x=1，这是x=2

101
00:07:51,673 --> 00:07:55,704
我们不去细看不同x和y值的结果了

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

103
00:08:00,462 --> 00:08:05,140
我们都可以用特定的x值和y值来设定每个像素点

104
00:08:05,140 --> 00:08:13,929
好，这里要将像素0,0设成白色，将这里改回像素0,0

105
00:08:13,929 --> 00:08:23,194
我要如何处理红绿蓝来产生白色呢

106
00:08:23,194 --> 00:08:30,069
答案是将三个值都设成255，请注意，不用重新输入像素

107
00:08:30,069 --> 00:08:35,036
我发现复制现有的像素，再进行修改，通常会容易一些

108
00:08:35,036 --> 00:08:39,194
我在这里设置第三个函数

109
00:08:39,367 --> 00:08:43,598
pixel.setBlue(255)，看看这三个的结果

110
00:08:43,598 --> 00:08:47,245
果然，设成了白色，我将三个值都设成了255

111
00:08:47,245 --> 00:08:51,258
这里还有一些问题，我就不解答了

112
00:08:51,258 --> 00:08:55,167
但如果你想的话，可以到这个页面

113
00:08:55,167 --> 00:08:59,284
试一下任何数值

114
00:08:59,284 --> 00:09:02,880
你理解了这些内容后，我们就可以做一些练习