Return to Video

Instagram的Kevin Systrom解释像素和滤镜工作原理

  • 0:01 - 0:04
    像素简介
  • 0:09 - 0:10
    （按快门声）赞！
  • 0:12 - 0:15
    我和Mike一起成立了Instagram
  • 0:15 - 0:19
    我们开始只是想用手机照片做些有新意的事儿
  • 0:19 - 0:22
    毕竟这是人们第一次那么在意口袋里的计算机
  • 0:23 - 0:27
    我们认为在未来五年照片分享可能是最大的机会
  • 0:27 - 0:32
    于是我们顺从内心，开始花时间来做这件事
  • 0:33 - 0:36
    有app或者想法去解决x, y, z还不够
  • 0:36 - 0:39
    更重要的是解决实际问题，供人们真正的使用
  • 0:40 - 0:42
    问题是：你要解决什么问题？
  • 0:45 - 0:51
    最初为了在屏幕上显示照片，人们需要对照片进行数据分解
  • 0:51 - 0:55
    1957年，一名计算机工程师Russell Kirsch
  • 0:55 - 0:57
    给他儿子拍了一张照片并扫描了下来
  • 0:57 - 1:01
    这是第一张数字图像：有颗粒感的黑白婴儿照
  • 1:01 - 1:03
    像素就这样诞生了
  • 1:03 - 1:07
    像素是个有趣的概念，因为他们不容易被看到
  • 1:08 - 1:14
    但实际上，如果你不断放大显示屏
  • 1:14 - 1:17
    就会发现显示屏是由非常小的光点组成
  • 1:17 - 1:23
    更有意思的是，每一个小光点是由更小的不同颜色光点构成
  • 1:23 - 1:24
    光点颜色有红，绿，蓝
  • 1:25 - 1:28
    从远处看，这些像素构成了图像
  • 1:28 - 1:31
    从前面看，他们只是能够亮暗的光点
  • 1:31 - 1:36
    正是他们构成了我们每天从电脑上看到的照片
  • 1:36 - 1:40
    你总能听到一个词：分辨率
  • 1:40 - 1:43
    计算机科学家和器材生产商都会提到它
  • 1:43 - 1:51
    分辨率是一个二维值，用于表示屏幕上像素数
  • 1:51 - 1:54
    当我还是个高中生的时候，分辨率只有640 x 480
  • 1:54 - 1:57
    今天分辨率则大了很多
  • 1:57 - 2:00
    除了分辨率以外，密度也很重要
  • 2:00 - 2:04
    比如智能手机，在有相同像素的前提下
  • 2:04 - 2:08
    像素密度更大的图像就更可以更细腻
  • 2:08 - 2:13
    那么，如何在一个文件里存储这些像素值呢？
  • 2:13 - 2:19
    其实你只是存储了许多红绿蓝的三元数组
  • 2:19 - 2:21
    他们则表示每一个像素
  • 2:22 - 2:26
    像素的数值范围是0-255
  • 2:27 - 2:31
    0非常暗，255非常亮
  • 2:31 - 2:35
    这个三元数值一起表示一个像素
  • 2:38 - 2:42
    一个图像文件，无论是JPEG，GIF 还是PNG
  • 2:42 - 2:43
    包含了百万级的红绿蓝三元值
  • 2:45 - 2:47
    那么计算机是如何存储这些数据的呢？
  • 2:47 - 2:50
    所有视觉和计算数据是用bit（比特）表征
  • 2:50 - 2:52
    每bit有两个状态：开和关
  • 2:52 - 2:57
    计算机使用对应的1或0二元值
  • 2:57 - 3:01
    所以图像是由一堆01数值构成的
  • 3:01 - 3:05
    为什么RGB数值的范围是0到255呢？
  • 3:05 - 3:09
    每一个颜色频道是由8bit构成
  • 3:09 - 3:13
    8bit构成一个1BYTE（字节）
  • 3:13 - 3:14
    如果你了解二元数值系统
  • 3:14 - 3:20
    那么8bit最大的数值是255，也就是一行全是1
  • 3:21 - 3:24
    最小的8bit数值是0，也就是一行全是0
  • 3:24 - 3:31
    因此0到255对应了每个颜色通道里256个灰度值
  • 3:33 - 3:37
    比如我们来表示青绿色的像素
  • 3:37 - 3:41
    在传统的十进制数值系统里，64有些红
  • 3:41 - 3:45
    224很绿，208比较蓝
  • 3:45 - 3:51
    但是计算机会青绿色存储成01000000
  • 3:51 - 3:54
    11100000
  • 3:54 - 3:57
    11010000
  • 3:57 - 4:01
    我们使用24个二进制值表示一个像素
  • 4:02 - 4:07
    计算机系统通常使用16进制，而不是二进制来表示颜色
  • 4:07 - 4:15
    所以我们只用6个十六进制表示同样的颜色:40 E0 D0
  • 4:15 - 4:16
    这就短多了
  • 4:16 - 4:23
    如果你想改变图像颜色，怎么办？
  • 4:23 - 4:31
    使用对应函数，输入为像素的红蓝绿数值
  • 4:31 - 4:36
    然后将其对应成新的红蓝绿数值
  • 4:36 - 4:39
    比如你想将图像变暗
  • 4:39 - 4:48
    一种方法是用输入的红绿蓝数值减去50
  • 4:50 - 4:55
    很明显，结果不能小于0，然后得到数值
  • 4:55 - 5:01
    如果输入是RGB，那么输出是R-50，G-50，B-50
  • 5:01 - 5:06
    你能看到输入图像是某个亮度，输出图像就变暗许多
  • 5:08 - 5:14
    许多人可能没有意识到，Instagram不止是做图像滤镜
  • 5:14 - 5:18
    或者仅仅把图片变酷
  • 5:19 - 5:21
    他的愿景更加重要
  • 5:21 - 5:23
    那就是如何将人们联系起来
  • 5:23 - 5:30
    他也不只是看朋友家人的照片，我们希望看到世界的变化
  • 5:30 - 5:34
    可能在海外，可能是社会活动
  • 5:34 - 5:37
    你可以通过视觉图片的方式获知这些信息
  • 5:37 - 5:44
    这才是我们快速成长并成为受欢迎媒介的原因
  • 5:44 - 5:46
    学习更多尽在studio.code.org
Title:
Instagram的Kevin Systrom解释像素和滤镜工作原理
Description:

听Instagram发起人解释图像是如何由二进制数值表示的，以及滤镜的工作原理。这个视频是Code.org视频系列讲座的一部分，是未来Computer Science Principles高中的课程。可以通过http://code.org/educate/csp了解更多课程信息。更多的Code.org教育视频尽在http://code.org/educate/videos。

鸣谢Kevin Systrom，Instagram以及Piper Hanson在http://piperhanson.com的摄影作品。
more » « less
Video Language:
English
Duration:
05:50

Chinese, Simplified subtitles

Revisions

Our website uses cookies for analysis purposes.