< Return to Video

Puzzles (4 mins)

  • 0:01 - 0:06
    在这个短篇中我们会介绍一种谜题,该谜题将建立于
  • 0:06 - 0:11
    我们已经介绍的一些图像操作代码。所以这个谜题是这样的:这里有一幅
  • 0:11 - 0:16
    未知图像的图片。图片上的红、绿和蓝色数值
  • 0:16 - 0:21
    有些乱。所以我们需要编写代码,改变
  • 0:21 - 0:26
    红、绿、蓝色数值,从而展现图片原始的影像,就可以看到它到底是什么了。
  • 0:26 - 0:32
    这就是我将举的例子,所谓的“金子谜题”
  • 0:32 - 0:37
    我们知道图片里有着某种图像。而这张图片中,
  • 0:37 - 0:43
    第一,图片中绿色和蓝色
  • 0:43 - 0:49
    被赋予了一个从0到255的随机数值。而且事实上,如果你盯着图片看,
  • 0:49 - 0:53
    会发现是一种雪花斑点。你会发现
  • 0:53 - 0:57
    一些像素点有着非常高的绿色数值,而一些像素点有着非常高的蓝色数值,
  • 0:57 - 1:00
    它们看上去就是绿色或蓝色;而图片中同样散布着一些青绿色的像素;
  • 1:00 - 1:04
    它们的绿色和蓝色数值都非常高。这就是
  • 1:04 - 1:08
    这张图片一个程度上的混乱。另一个程度是,
  • 1:08 - 1:13
    我们希望重现的图像
  • 1:13 - 1:18
    是用红色展现的。事实上,它只有红色数值。所以现在看到的绿色和蓝色都是杂讯。
  • 1:18 - 1:23
    但这些数值被除以了10,因此它们看上去非常暗。所以我们现在看到的
  • 1:23 - 1:27
    模糊图像,是,呃,藏着一张很暗的红色图像。
  • 1:27 - 1:32
    这张红色图像被这些绿色和蓝色的随机雪花斑点所覆盖。
  • 1:32 - 1:38
    所以我们就看不到原始的图像了。所以我们要编写代码来修复这个问题。
  • 1:38 - 1:46
    我们现在来解决这个问题。与往常一样,我将从
  • 1:46 - 1:51
    空白的文字键入区域开始写代码。键入区下方有解答,
  • 1:51 - 1:55
    (只需点击)“显示解答”按钮。所以如果你想访问这个页面并自己尝试一下,这样做你就可以看到解答。
  • 1:55 - 1:59
    好,下面我想做的第一件事情,是看看如果我什么都不做就运行会怎么样:
  • 1:59 - 2:04
    现在这个循环是空白的;所以如果我运行这个程序,我们还是会得到未经改变的谜样图案。
  • 2:04 - 2:08
    好,所以我真正要做的第一件事是,我要键入
  • 2:08 - 2:12
    “pixel.setGreen(0)”
  • 2:12 - 2:17
    我要把绿色数值归零。就是说我要把绿色清除掉
  • 2:17 - 2:22
    然后就能看到结果了。唔,好,所以现在图像变得好一些了。现在我们还有
  • 2:22 - 2:29
    这些蓝色的雪花斑。我们至少已经把绿色雪花斑给清除掉了。所以现在我同样要清除蓝色雪花斑。
  • 2:29 - 2:36
    所以我会用,“pixel.setBlue(0)”,我们来试试。
  • 2:37 - 2:43
    好,唔,所以我已经把雪花斑点都清除掉了。但现在的问题是
  • 2:43 - 2:49
    这张红色的图片太暗了,所以我们无法看到。所以说这张图
  • 2:49 - 2:55
    实际上已经在那里了,但我们看不见。所以我需要按照比例还原(原始的红色数值),
  • 2:55 - 3:00
    对吧?图像已经在那里了,我只需让它变亮。所以我要用“pixel.setRed”来把
  • 3:00 - 3:05
    “pixel点getRed”放大5、10、或20倍。
  • 3:05 - 3:10
    所以我要,在这个例子中,说明里已经说了(图像中的原始数值)被除以
  • 3:10 - 3:15
    10倍。所以我要把红色放大10倍。
  • 3:15 - 3:20
    唔,好了。所以这就是我们得到的图像。显然,
  • 3:20 - 3:25
    这是一张在旧金山一侧看到的金门大桥图像。现在,
  • 3:25 - 3:31
    很容易看出这张图像还不太对。这是因为,
  • 3:31 - 3:36
    图像数据全部是红色,即使我们已经还原到原始图像,它看上去还是全红的。我的意思是,
  • 3:36 - 3:41
    实际上这是一张黑白图片
  • 3:41 - 3:45
    而一般黑白图片是以从黑到白的光谱显示的。在这个例子中,
  • 3:45 - 3:50
    图片则是以从黑到红的光谱显示的。所以我们现在得到的是正确的图片,但就是
  • 3:50 - 3:55
    加了一层红色。在这一小节里我们已经完成了需要做的操作。你知道,
  • 3:55 - 3:59
    你可以看出图片原始的影像。在后面的小节中我将说明怎样
  • 3:59 - 4:04
    怎样修改现在的结果,使图片看上去是合适的黑白图像。
Title:
Puzzles (4 mins)
Description:

Professor Nick Parlante exemplifies how to solve an image puzzle using JavaScript.

more » « less
Video Language:
English
marializhao edited Chinese, Simplified subtitles for Puzzles
marializhao added a translation

Chinese, Simplified subtitles

Revisions