图像马赛克算法

今天来介绍下图像马赛克的算法原理。首先我们先来看一张原图和一张由它处理得到的马赛克的图：

原图
效果图
通过观察我们可以发现，马赛克效果就是将原图进行了一定形状的分割。在每个分割出来的形状中用同一个颜色填充得到。而这个颜色一般取分割得到形状的中心点像素的颜色。既然已经知道了原理，我们就来分析下实现马赛克算法的步骤。下面以正六边形为例。
我们先来看一下正六边形马赛克的结构：
正六边形网格图
我们要做的就是将一张图分割成上图所示的蜂窝状，并且用正六边形的中心点像素值来填充整个六边形。
分割的方法我们可以参照下面这张图：
画布分割示意图
如上图所示，我们假设蓝色方框就是我们的画布，我们可以把它分割成长宽比为 大小的矩形阵。我们把所有的矩形阵点用坐标来索引。如图所示，画布的左上点为（0，0）起始点。画布的最右下点是（width，height）。在这里为了方便说明，我们的示意图假设正好画布长宽正好都能整除每个小矩形框的长宽（实际应用中能不能整除都可以work）。我们上面画出了第一个矩形框四个点的坐标。有了这套坐标，我们画布上的每一点我们都可以对应找到它落在哪个矩形框内。当我们找到某个特定点属于的那个矩形框后，我们的工作就是判断它属于哪个六边形。那么我们就可以用那个六边形中点的像素值来代替该点的像素值。用这样的方法，只要我们遍历画布上的每个点，马赛克效果就完成了。所以现在核心问题就是定位画布上某个点属于哪个六边形。
因为我们已经知道了某个点是属于哪个矩形框（对应于矩形框的左上点）。通过观察我们可以得知，如果我们我们的点属于某个矩形框，且该矩形框左上点的点横纵坐标都为偶数或都为奇数的话。则我们的正六边形中心位于该点所在矩形框的左上点或者右下点。反之，如果横纵坐标是一奇一偶的话。则我们的六边形中心位于该点所在矩形框的左下点或右上点。
因此要判断画布上的某个点属于哪个正六边形，直接通过该点和所在矩形框的可能属于的那两个正六边形中点进行距离计算。离得比较近的那个中心点就是的像素值就是该点的像素值。
下面附上片段着色器代码（其中offset用来控制六边形边长的长度）：

#ifdef OPENGL_ES
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
#endif


varying vec2 v_texCoord;
uniform sampler2D texture;
uniform vec2 textureSize;
 
uniform float offset;

#define texcoordOut v_texCoord
 
 void main()
{
    const float TR = 0.866; // root(3)/2
    const float PI6 = 0.5236; // Pi/6
    
    float x = texcoordOut.x * textureSize.x;
    float y = texcoordOut.y * textureSize.y;
    
    int wx = int(x/(1.5*offset));
    int wy = int(y/(TR*offset));
    
    vec2 v1 = vec2(0.0, 0.0);
    vec2 v2 = vec2(0.0, 0.0);
    vec2 vn = vec2(0.0, 0.0);

     if(wx/2 * 2 == wx)
    {
        if(wy/2 * 2 == wy)
        {
            v1 = vec2(offset * 1.5 * float(wx), offset * TR * float(wy)); // 左上点
            v2 = vec2(offset * 1.5 * (float(wx) + 1.0), offset * TR * (float(wy) + 1.0)); // 右下点
        }
        else
        {
            v1 = vec2(offset * 1.5 * float(wx), offset * TR * ( float(wy) + 1.0 )); // 左下点
            v2 = vec2(offset * 1.5 * (float(wx) + 1.0), offset * TR * float(wy)); // 右上点
        }
    }
    else
    {
        if(wy/2 * 2 == wy)
        {
            v1 = vec2(offset * 1.5 * float(wx), offset * TR * (float(wy) + 1.0)); // 左下点
            v2 = vec2(offset * 1.5 * (float(wx) + 1.0), offset * TR * float(wy)); // 右上点
        }
        else
        {
            v1 = vec2(offset * 1.5 * float(wx), offset * TR * float(wy) ); // 左上点
            v2 = vec2(offset * 1.5 * (float(wx) + 1.0), offset * TR * (float(wy) + 1.0)); // 右下点
        }
    }

    // 计算实际点离左右两个六边形中点的距离 
    float s1 = sqrt( pow(v1.x-x, 2.0) + pow(v1.y-y, 2.0) );
    float s2 = sqrt( pow(v2.x-x, 2.0) + pow(v2.y-y, 2.0) );
    
    if(s1 < s2) vn = v1;
    else vn = v2;

    vn = vn / textureSize;
    gl_FragColor = texture2D(texture, vn);
}