圖像的組成元素

Jan 19 2018 DELIBERATE PRATICE

PIXELS ARRAY 素組

Tool PROCESSING PHOTOSHOP FCP X

序PREFACE

在如今各种修图app横行的时代，接触过稍微专业些的修图软件的朋友应该都知道什么是RGB曲线，它表示图像中存储的色彩信息。对图像处理稍微深入一点的朋友，可能会知道一个概念，叫‘灰度’，即Gray。那对摄影有更深入了解的朋友呢，就会知道著名的亚当斯区域曝光理论，他提出，将256阶的灰度信息划分为11各区域，0-3区为低调区域，4-6为中间调区域，7-10为高调区域。（跑偏了，拽回来）

其实呢，图像中分别存储着RGB信息和Gray信息，而像素，就是这些信息的载体！

像素是图像的组成元素，也是图像的最小单位。我们经常提到像素，却不知像素到底是什么样？它为何如此神秘？图像之所以是一张图像，是因为其中的像素以特定的序列进行排序，那如果？改变这些像素的顺序，会发生什么变化呢？

视频压缩太厉害了

（毁我视频）

观看效果不佳

可以复制以下链接到PC端观看~

https://v.qq.com/x/page/t0537f8gxs3.html?

在复习周的时候，我在‘坏打印机’的文章中看到了这个效果，当时就觉得非常酷炫，决定自己也要做出来。但是复习周忙着复习（其实也没有复习，经常跟舍友约看恐怖片），就搁置了。

如今有时间我就决定花几天时间搞定它。从一开始的时候毫无头绪，到最后可以依据像素做一些变形的效果，遇到/解决了不少问题，学了不少，这里做个小结。

像素排序。

这无疑是入手点，最基本也最关键。

每一张图像中的像素都以特定的序列排序，那么以gray数据的大小进行排序，就得到一个新的序列。根据这个新的序列，可以由一组一模一样的像素数据变换成截然不同的图像。

（Gray Info）

排序事小（其实也发生了小插曲），关键是像素的坐标信息如何获取，又如何存储。一开始我怎么想都想不明白，翻阅API也找不到，但后来写一个for循环就恍然大悟了。

存储问题也很困惑，既需要依据Gray对Pixels排序，也要保留Pixels的位置，翻阅了API，考虑了数组，但最后一拍脑袋，怎么不会想到对象呢？面向对象编程在关键时刻忘得一干二净？所以我定义了一个Pixel对象，用于存储像素的Gray以及坐标信息（x&y）。

像素运动

排序工作做好了之后，建立起‘点对点’的gray映射关系。但Pixels是如何从一个坐标点运动到另一个坐标点的呢？先後尝试了加速运动，匀速运动，但最终还是选定先加速后减速，Pixels的运动状态看起来会舒服一点。

绘制像素

从视频或是从gif动图上看，确实是看到了数十万以上的像素在同时运动。所以我一开始的构想是，移动原图像的像素点，最后没成功，才想到原来可以绘制像素点。

我们所看到的图像中的像素是一个极小的小方块，它有色彩信息也有亮度信息，那我便可以通过绘制方块以及赋予它亮度信息（黑白没有RGB）让它‘成为’一个像素。

根据上面的思路，还可以改变像素的形状，比如菱形、点、直线、曲线、数字等。

動畫效果ANIMATION

最后有一点感悟：

当我们以为我们正面临着困难的时候

恰恰是我们投入的时间不够多 而已

晚安~