-
这节课的主题是 for 循环
-
使用 for 循环，我们就可以用代码来做许多事情
-
这幅花朵的原图是457像素宽乘360像素高
-
将两者相乘，就得到164000像素
-
这张图挺小的，已经有这么多像素
-
我们之前写代码的方式是用 pixel.setRed(255) 这个代码行
-
来将一个像素点改成红色，用这样的方法来改变整张图片
-
是很不现实的。我的意思是，这么小的一张图就有超过10万个像素
-
我们需要有一个结构
-
写几行代码来反映我们要做的改变
-
然后让计算机自己不断重复地运行这些代码，改变图像的每一个像素点
-
因此，我们这堂课要讲的 for 循环就是要做到这一点
-
这样会大大增强我们使用代码的范围
-
我要先讲一下 for 循环的结构，先来看看这个结构有哪些组成部分
-
我来举个例子。这个蓝框里有一张 for 循环的图片
-
我待会会讲一下组成部分
-
开始 - 我用红笔画出来 - 这里开始 for 循环，所以有 for 这个单词
-
括号里是 pixel: image，后面是尖括号，开始另一行
-
这里的意思是这个句法要有括号、尖括号和其他内容
-
在我的例子和练习里，都是一样的
-
我们会提供这一行，让你写出下面的代码
-
这一行的意思是
-
图像里的每一个像素都要完成下面的代码
-
下面的代码就是用来规定完成的任务
-
这些行是 for 循环的主体
-
这几行就可以完成我们要做的事情
-
for 循环的运行方式是我们要改变这个花朵图像
-
这里有三行代码。要取整个图像的第一个像素
-
左上角的像素，因此它就取出第一个像素
-
for 循环就运行这三行代码，这里是 pixel.setRed(0)
-
pixel.setGreen(0)、pixel.setBlue(0)
-
这些代码都是针对第一个像素执行的
-
就是要将这个像素变成黑色，对吧？它将红、绿、蓝的值全部改成0
-
for 循环到这里底部的时候，发生一个有趣的事情，我用黑色的箭头显示出来
-
代码返回到这三行代码的顶端，取出第二个像素
-
对第二个像素运行这三行代码
-
对第二个像素运行完以后，再次返回到顶部
-
对第三个像素运行这三行代码。我们就是不断重复地运行代码
-
改变图像里的每一个像素
-
要注意的一点是代码主体的这三行是缩进的
-
尽管不是必须的，这是个常见的作法
-
就是要将主体代码和其他代码区别开来
-
image = new SimpleImage 这行代码只运行一次，print(image)代码也只运行一次
-
循环里的代码就有点特别
-
他们的性质是不断循环的运行。我们来试试看
-
我们来试这个实例，这里是可运行的代码，这里加载图像
-
有 for 循环，主体代码开始，这里是三行主体代码
-
这个括号有点小，不过这里有个右尖括号
-
和左尖括号对应，结束主体代码
-
运行来看看结果。你看到的是这个纯黑色的长方形
-
这不是很有用，但确实显示了 for 循环的功能
-
其中的原理是这幅花朵的原图
-
有各种红、绿、黄和其他颜色，代码的作用
-
是访问图像的每个像素点，执行这三行代码
-
这个程序就是取像素点，将红、绿和蓝全部设成0
-
结果就是将像素变成纯黑像素
-
你可以想象，这个过程就是将图像6的数据删掉
-
剩下来的就是这个纯黑的长方形
-
再多试一个例子，将每个像素的红色值和绿色值设为255，将蓝色值设为0
-
我要想想什么代码可以完成这一点
-
这里的思维方式是我们用英语说
-
我要这个效果，将红色值设成255或其他数值
-
在练习里，你的任务就是要将这句英语翻译成代码
-
这个例子说明这种模式
-
代码的主体要将红色值和绿色值改成255，将蓝色值改成0
-
头两行是 pixel.setRed(255) 和 pixel.setGreen(255)
-
第三行是 pixel.setBlue(0)。运行一下看看
-
结果是鲜黄色的长方形，和前面的例子差不多
-
我们的作法是改变这幅图里每个像素的绿色值和蓝色值
-
就得到鲜黄色
-
这两个例子有点不现实，是吧？我们只是删除所有数据
-
产生这个有色的长方形。我现在来试一个现实一点的例子
-
我们不删除花朵图像中的全部数据
-
我们来改变这些数据。这是花朵的原图
-
你知道，黄色等于红色加绿色
-
所以这里黄花的红色值和绿色值是很高的
-
在这个例子里，我要将整个图像的红色值改成0
-
想想要怎么做。第一个问题是，要用什么样的代码
-
在这个例子里，你看到的是主体代码只有 pixel.setRed(0) 一行代码
-
我以前的实例里，主体代码有三行
-
行数是任意的，可以是三行或六行
-
这个例子只有一行代码。这行代码用英语来表达
-
就是这个 for 循环用于图像里的每一个像素点，将其红色值改成0
-
我们来看看结果。运行一下，你看到的是
-
花朵变成这种奇怪的、放射的绿色花朵
-
如果将黄色花朵的组成部分分解来看
-
就是红色光和绿色光的结合
-
这行代码做的是将红色光的值调为0
-
就像我们将灯光调到0一样
-
所以图像只是有绿光组成
-
还有一点要注意，看看右下角的绿叶
-
它们没有什么不一样，所以这里可能大部分是绿光
-
红光的值大概是8或者10左右
-
如果将红色值改成0，从视觉上而言没有什么区别
-
我们再多试一个例子。在这个例子里
-
我要将花朵图像的绿色值和蓝色值设成0，蓝色值保持不变
-
代码是什么呢？要写两行主体代码
-
pixel.setGreen(0) 和 pixel.setBlue(0)，红色保持不变
-
运行一下，你看到的是红色的花朵
-
这称作图像的红色通道
-
这个图像是红光、绿光和蓝光的组合
-
我们刚才将绿光和蓝光设成0
-
就是将两个颜色的值调到最低
-
剩下来的就是一副红色光图
-
有些地方是鲜红色，有些地方是暗红色
-
左边这里是暗红色，没有太多红光
-
这里的绿叶没有很多红色
-
只是黄色花朵有显著的红色光
-
这只是看图像的一种方式
-
这里的蓝色通道和绿色通道其实是类似的
-
for 循环的功能非常强大
-
我们可以用它来写几行代码
-
让计算机运行一些大数据集
-
在这个例子中我们是处理图像。我要提一下的是
-
Java Script 语言的 for 循环不是这么简洁的
-
这在 JavaScript 语言里是没有的，我在这门课里加上，所以可以运行
-
如果你做其他的 JavaScript 题目时，就不会有这个功能
-
但大多数语言都有像这样的 for 循环
-
只是很奇怪 JavaScript 没有。所以这里的模式是我们要写代码
-
写一点点代码来表达我们想要做的事情
-
这体现了计算机是很强大的，但也很愚蠢
-
你写有意思的代码
-
我要这样那样该绿色
-
通过使用 for 循环，我们可以和计算机合作
-
计算机就会做很厉害的事情，运行代码10万次甚至是100万次
-
计算机这样运行
-
但其实也只是做非常机械的事情
-
这体现了计算机原理的总体主题
-
那就是计算机可以快速地处理机械的部分
-
人类要用创造性来控制如何让计算机运行
-
下一节 - 做完这样的练习以后 -
-
我会加一个功能
-
我们就可以开始做一些更有趣的事情
