Introduction to Digital Images (13 mins)

在本节，我想讲一下计算机里是怎么处理数码图像的

这里有个例子 - 黄色花朵的图像

我们看到的是有机的圆形物体

在计算机里，它就成了多个小数值。这是怎样做到的呢

我们来看看左上角的这朵花

你看到一小片绿色区域，中间有个小东西

如果将它放大十倍，就成这样。你看到的图像

是由这些小正方形组成的，它们称为像素

每个像素都是正方形的，像素非常小

大概每英寸有100像素。每个像素只显示一个单色

像素是由每个单色的方块锁定

有趣的是像素看起来有点不自然，且轮廓分明

但由于像素非常小，你在原图看像素时，没有觉得不对劲

像素太小了，肉眼分辨不出来

你看不到那些分明的轮廓。放大看像素时，图像就是这样子

要考虑一个图像里有多少个像素的话，就是乘法的问题

要计算一个宽800像素和高600像素的图像有多少像素，就用乘法

将两者相乘，就是480000像素

你可能听过“百万像素”这个词

它在计算机和数码相机等很常见。百万像素就是一百万个像素

800x600的图像，480000。粗略讲，大约是一百万像素的一半

从现代标准来看，这个图像像素并不高

目前的数码相机甚至是手机

都会产生五百万像素、一千万像素或两千万像素的图像

好，我们来看看其中的原理

为了让图像轮廓分明，我做了这幅图

我可以将这个图像看做是像素组成的网格，每个像素都是一个正方形，显示一个单色

我们要有一个地址分析方案

来将每个像素与其他像素分辨出来

原理就是这里有一系列 x 值。0在最左端，往右的值不断增大

y 的方向有点特别

0在最顶端，最上面一行，y 值的顺序是从上往下

我们在计算机里就是这样使用数值的

我来做一些很简单的实例。如左上角的像素是00

或可以说 x 等于0，y 等于0

像素1在它右面，因此这个像素的位置是 x 等于0，y 等于0。

在讲到坐标时，通常是先说 x 值再说 y 值

这里就是 1, 0。这个像素可以说是 x = 4，y=2.

或者只说4，2

实际上，我们不会太纠结于用 x 和 y 的值来确定像素

你只需知道有这样一个网格就可以了

哪怕是一千万像素，每个特定的像素都有 x 值和 y 值来区别它和其他像素

问题是，有了这些像素

如何编译每个特定像素的颜色

要讲这一点，我要先讲讲简单的历史背景

在17世纪，牛顿做了一个有名的实验，我在这里复制这个实验

用棱镜，其实就是三角形的玻璃

白色阳光从左边照进来，棱镜将阳光分散成光谱

我将光谱投映在白纸上

这里显示出白光不是不可见的纯净物体。相反，它可以被分散成这些纯组成色

你看彩虹时，也是看到同样的事物

这些颜色其实是在连续谱里

不过牛顿分辨出这些颜色，并给它们命名

那个有名的顺序是从这边的红色开始，到橙色、黄色、绿色

最后是蓝色、靛青和最远处的紫色

在计算机里，我要把这些纯色看做是一个调色板

我们要使用的方案就是在这里挑出红绿蓝

将这些颜色作为组成色来构成我们想要的其他颜色

你可以这样想，左边有白光进来

这里有组成色出去

你也可以从相反的角度来想。假如我拿组成色从这边照进去

我就可以有白光出来。物理学跟这个不尽相同

但也可以提示我们如何在计算机里结合这些组成色

关于靛青有个有趣的故事

牛顿命名这些颜色时，蓝色和紫色之间我们有靛青

真的吗？我们要单独用一个词，不能就叫蓝色

这个故事之所以有意思

是它反映了17世纪的情况。牛顿信仰我们认为不科学的神秘论

那时已知的星球有七个

牛顿认为颜色的数量应该跟星球的数量一致

于是他就硬加上靛青，凑个数

好的，我要弄一个方案

将特定的颜色编译成一个叫 RGB 的颜色方案。RGB 代表红绿蓝

其中的原理，或者问题在于我要有一种方式

来编译网格里每一种颜色是什么

在 RGB 方案里，要用纯红光、纯绿光和纯蓝光

用不同的组合来混合这些颜色，使之能形成不同种类的颜色

我就不细讲这一点，这里有一个很好的示范

我要登录 RGB Explorer 这个网页，这样我就可以做示范

在左边，有三个滑动条

这一个控制红光，我们要给它们赋值

当红光滑动条移到全黑时，值为0

调高最高时，值为255。

在滑动条的下端，你可以看到滑动条上颜色的值。

这里有红色滑动条、产生绿光的绿色滑动条和产生蓝光的蓝色滑动条

RGB 方案使用的策略是

用三个按钮来改变红光、绿光和蓝光的亮度

这样，你就可以通过结合红、绿、蓝的恰当比例来产生任何颜色

很明显，如果我要产生红色，就调到最高

同样，如果要产生绿色，将绿色调到最高

掉到最高时，颜色非常亮

要深绿色的话，可以先调到绿色

再往回调，就是深绿色

在左边，数字0代表的是黑色

产生绿色时，往黑色那边调，就是深绿色。

如果要产生白色

我将红色调到最高

也把绿色和蓝色调到最高，就是白色了。所有值都是255，就是白色

将全部颜色都调到最低，全部都是0，就是黑色

我来展示一些颜色组合

我想最有趣的是红色加绿色。如果我将红色调到最高

将绿色也调到最高，就得到黄色

要黄色暗一点的话

将红色和绿色都往回调一点，往黑色那边调一点，就有暗黄色

如果继续，黄色就更暗了

要产生橙色的话，我想橙色有点像黄色

但不是红色和绿色的比例都差不多

红色要多一点，这里是红色和绿色

将红色多调一点，将绿色调少一点，就是橙色了

有点像锥形路边警告筒的样子，好看的橙色

这只是让你大致了解一下如果通过调整来产生许多好玩的颜色

我还想再试一下

是的，产生了浅绿色

我来给你看看如何产生淡黄色，这里红色和绿色都调到最高

就产生了很亮的黄色

淡黄色是比较分散、朦胧的颜色

产生淡黄色的作法是添加蓝色，我将蓝色调到180,185

如你所见，这还是黄色，不过是淡黄色，有点朦胧

我们可以这样要理解这一点

假如全部颜色都调到最大，就是白色

将蓝色调高，颜色稍稍变白，但不是纯白

红色和绿色比蓝色少一点，就是黄色

这些知识对这么课的作用是，我不要求你知道

你只要可以填三个数字产生某种颜色就行了

你明白有通过改变红、绿、蓝来产生颜色的基本方案就可以了

我还要调一个颜色给你看

我们有红、绿、黄，这很重要

我们来组成其他组合。蓝和绿可以组成蓝绿色

最后一个组合是红加蓝

红加蓝是紫，看起来确实是红和蓝的组合

好的，我们返回到我们的图像

我们知道一个概念，就是你可以将红光、绿光和蓝光混合在一起

就这个图像而言，我有其全部的像素

每一个像素都会有一种颜色

这种颜色是由红、绿、蓝的深浅决定的

或就数字而言，每个像素都有三个值。

可以说，红色是250，绿色是10，蓝色是240

我的意思是，这个像素是250、10、40

顺序是红色的值、绿色的值和蓝色的值，我在这里重新定义这张图

这里是我的像素网格，是构成图像的

有前面讲过的 x 和 y

每一个这些像素都会有自己的三个值

这个是6,2,57。6很低，绿色是250，很高，蓝色是7，很低

基本上是绿色，对吧？绿色的值很高

这个像素可能是241,252,23。红和绿的值都很高，蓝色的值很低

基本上就是黄色。

我调整滑动条时，我趋向于调到255或0

在现实世界中拍数码照片时，经常会有如237或26这样的中间值

这些数字混合起来产生某种颜色

这就是我们目前给图像下的临时定义

这里有一个像素的网格

每个像素显示一种颜色

每种颜色用三个数字来表示

回顾一下，我们从这张图像开始

我将它缩减成有多个数字组成的网格

在计算机科学里，这是一个很常见的主题

先从整个图像、整段音频或整部百科全书开始

作为人类，我们把这些事物视作一个有机的整体

在计算机里，所有数据都不可避免地有一个组织方案，将这些事物分解成多个小数字

这就是计算机的表现事物的形式

我们可以将它视作是数字运算。如果我要拍张图片，将它变亮一点

在计算机里，我们要将它转换成数字运算

例如，我要将一个图像调亮一点

啊，我们有红绿蓝的值

每个值都加10

在RGB Explorer里，我将每个值往右调，调亮一点

不管怎样，那是后面几部分的内容

在计算机里，事物是存储在多个小数值里

计算机领域就是这样

我们将会碰到很多这样的情况