图片点阵-思路分析

Posted by 小白一只 on February 3, 2016

图片点阵-思路分析

其实我也不知道这个东西用中文怎么描述，暂时描述为图片点阵

在某群看两张图片突然引起的我的兴趣 https://raw.githubusercontent.com/xiaobaiyizhi/xiaobaiyizhi.github.io/master/img/koalastothemax/img1.png

https://raw.githubusercontent.com/xiaobaiyizhi/xiaobaiyizhi.github.io/master/img/koalastothemax/img2.png

哈哈！就是这两张图中间部分0 0 自行脑补吧！

下面附上链接地址（有兴趣自己去玩吧！捂脸） http://xiaobaiyizhi.com/lsj?NDkxODRmNTRjNGIwMWY0MWQwYzNjYWYxMDRhM2E3MGIucG5n

工作原理是网页载入的时候只有一个圆，当鼠标经过的时候，一个圆会分裂成四个圆，每次鼠标经过圆，经过的圆都会进行一次分裂，一直分裂下去，直至分裂到最小圆。当圆分裂到足够小的时候。每个小圆就有点像图片里面的一个像素，可以来模拟一幅图片。

开始

https://raw.githubusercontent.com/xiaobaiyizhi/xiaobaiyizhi.github.io/master/img/koalastothemax/img3.png

开始分裂

https://raw.githubusercontent.com/xiaobaiyizhi/xiaobaiyizhi.github.io/master/img/koalastothemax/img4.png

分裂一定次数

https://raw.githubusercontent.com/xiaobaiyizhi/xiaobaiyizhi.github.io/master/img/koalastothemax/img1.png

实现方法

看起来高端大气上档次，其实想想背后的实现原理还是比较直观的。 实现算法可以在前端实现：

step1：浏览器从服务端请求获取一张普通图片。

step2：对获取的图片进行处理，例如这个是一个512x512的点阵，可以在前端进行调整，也可以在后端就行调整。（如何调整下一篇博文再详解）

step3 : 我们进行调整之后的图片应该是 512x512像素的，也就可以将每一个像素点的颜色赋值给点阵。

step4：点阵赋值完之后，只要将相邻四个像素的颜色值加起来然后取均值，就可以得到更高一层的像素点颜色。这样不断相加取均值，知道最后剩下一个像素，也就一个圆，这就是为什么要是512X512点阵 。

这篇只是粗略讲讲实现思路，有空再写具体实现过程！