使用多边形绘制图像

介绍

早在8年前，也就是2008年，Roger Johansson使用C#做了一个利用遗传算法使用不同的多边形绘制图像的程序EvoLisa（嗯，让我想想我当时在干什么。。。），这里是展示。

达尔文的像

代码是如何工作的

为了方便理解代码是如何工作的，现在假如你正在徒步通往真理的殿堂，你所能借助的唯一的工具就是一个能告诉你现在你接近真理殿堂距离的仪器，而你又是处于迷茫的状态，完全不知道应该往那边走，那么现在应该怎么办？
不妨先大胆的迈出一步，这时候再看看自己的距离是不是变小了？如果是，那说明自己至少大致走对了方向；如果发现距离并没有减小呐？那就退回来，换个方向再试一下，总有一个方向会是对的。每到达一个新的位置，就重复上面的过程，虽然过程中会有不断的失败，但是通过大量的努力（选择），就可以不断地接近目的地。

作者Roger Johansson在源代码中也是使用了这种思想，通过不断的尝试，不断的保留更优解（到达一个新的位置），这样使得最后使用多边形层叠出来的图像跟原始图像尽可能的接近。这里是源代码（云梯自备）,以及CSDN下载执行文件，源代码

代码实现逻辑：

每幅图像是由一定数量的多边形叠加而成；
每个多边形是由顶点和色彩组成
由于每个多边形的顶点和色彩的不同导致层叠出的图像也就不同，所以成等点和色彩为每幅图像的基因，

1. 对基因进行变异：
   
   1. 对所有的多边形按照一定的几率进行增加，删除，或者移动上下的位置（层叠的次序）
   2. 对每一个多边形按照一定的概率``增加，减少它的顶点数目
   3. 对每一个多边形按照一定的概率移动顶点的位置
   4. 对每一个多边形按照一定的概率改变其rgba的数值
2. 将所有的多边形在画布上绘制出，并获取像素信息
3. 将绘制出的图形和原图形的所有相应位置上像素差值的平方之和作为适应度，越小表示两个图像越接近，效果越好
4. 如果适应度减小，则保留当前多边形组合的基因;否则，放弃此次变异，回滚到上一次变异的结果。
5. 如果对生成图像的效果不满意，重复步骤1

JS代码实现

自己使用js代码实现了一遍，最后的效果如下：

Chrome

GEM.邓紫棋

对于简单的图像，程序能在很短的时间内使用多边形绘制出一个比较像的图像，但是对于复杂的，那只能是等一会了，一般要好几个小时。

其实自己实现了一遍代码，最后发现其中最难的，或者说获得时间最多的并不是理解其中的原理以及敲代码，而是能够使用适当的参数保证程序能够尽快的得出自己满意的结果，我大部分时间都在调参数了o(╥﹏╥)o

代码地址github

由于Chrome浏览器的同源策略问题，所以代码要在火狐浏览器中才能够顺利运行