【第1018期】绘制随机不规则三角彩条——小谈EvanYou个人主页的实现

前言

8月6号早读文章由@野草分享。

正文从这开始～

缘起

最近感觉自己搭的一个项目资料汇总的项目，主页真的是一点美感都没有，非常简单粗暴。就想来点改版，让主页显得高大上一点。改版前的效果是这样的：

寻思着怎么改版，刚开始想就简单加个背景图，换掉table显示方式吧。就在网上搜索背景图，搜着搜着就鬼使神差地来到了Evan You的个人主页。这不是我第一次看到他的主页，但正是这个契机让我想要不就copy这种风格吧。

初印象

当我第一次看到这个主页的时候，我觉得很惊艳。主页图案的组成元素只有一种：富有魅力的三角网格。整个页面简单却不单调，华丽而不喧闹。图案的配色也很亮，非常好看。总之，我非常喜欢这个页面的设计，耐看。贴几张图来：

想看现场效果，可以点击Evan You主页。

思考

看到好看的作品，当然会去思考实现的原理。不难想到，这可以用Canvas画出来的。画有填充颜色的三角形，也是件不难的事情，一查Api就行了。问题在于，如何形成一条这种随机无规则而连续的三角形cluster。仔细观察可以发现，每次三角形的左侧起点是一致的，而走势却是随机，但基本集中在中间部分。颜色条的种类也是有限的。

然后呢？很遗憾，我就没有继续仔细思考下去了。

看了下源码，只有区区几十行的代码。我直接把它copy过来，竟然马上生效了。我就直接push了代码。。。

源码解读

好吧，我直接就看他代码了。

这里最关键的两个点，绘制三角形的算法和颜色的取值算法。

贴源码：

<canvas></canvas>
<script>
    document.addEventListener('touchmove', function (e) {
        e.preventDefault()
    })
    var c = document.getElementsByTagName('canvas')[0],
        x = c.getContext('2d'),
        pr = window.devicePixelRatio || 1,
        w = window.innerWidth,
        h = window.innerHeight,
        f = 90,
        q,
        m = Math,
        r = 0,
        u = m.PI*2,
        v = m.cos,
        z = m.random
    c.width = w*pr
    c.height = h*pr
    x.scale(pr, pr)
    x.globalAlpha = 0.6
    function i(){
        x.clearRect(0,0,w,h)
        q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}]
        while(q[1].x<w+f) d(q[0], q[1])
    }
    function d(i,j){   
        x.beginPath()
        x.moveTo(i.x, i.y)
        x.lineTo(j.x, j.y)
        var k = j.x + (z()*2-0.25)*f,
            n = y(j.y)
        x.lineTo(k, n)
        x.closePath()
        r-=u/-50
        x.fillStyle = '#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16)
        x.fill()
        q[0] = q[1]
        q[1] = {x:k,y:n}
    }
    function y(p){
        var t = p + (z()*2-1.1)*f
        return (t>h||t<0) ? y(p) : t
    }
    document.onclick = i
    document.ontouchstart = i
    i()
</script>




    

读了一下，发现实现原理挺简单，真希望我当初能仔细思考一下，兴许能自己思考出来。

三角形绘制

三角形绘制算法步骤如下：

设置左起第一个三角形的两个点坐标为：q0 (0,h*.7+f), q1(0,h*.7-f)，h为窗口高度，f为初始距离90

若q1.x < w+f，取三角形的第三点为q2 (q1.x + (Math.random()*2 - 0.25)*f,q1.y + (Math.random()*2 - 1.1)*f)，q2.y如果超过了窗口大小则重新取，直到满足条件为止；否则，结束绘制

绘制三角形

设置q0 = q1, q1 = q2，重复上述步骤

算法分析：

主要是第4步使得每个相连的三角形都有一条共同的边，所以相连

最初两个点的y值，以及第三点的取法都是经验值

q1到q2的x方向增幅为(Math.random()*2 - 0.25)*f，Math.random()*2 - 0.25等于[-0.25, 1.75)，也就是说三角形的整体走势在x方向上是向右的，偶尔会向左，大小在[0, 1.75*f)的范围间随机

q1到q2的y方向增幅为(Math.random()*2 - 1.1)*f，(Math.random()*2 - 1.1)等于[-1.1, 0.9)，也就是说三角形的整体走势在y方向上更多的概率是向上走的，大小在[0, 1.1*f)范围间随机。设置为1.1，我觉得本意是让三角形条能更多地经过内容区。设置为1.3的话，太靠上，不可；设置为1的话，由于左边起点为0.7*h，内容区在0.5左右，总体还是太靠下了。尝试了下1.2的效果也还可以

取色算法

颜色的取值也是重头戏，看下他是如何取到这么漂亮的颜色的。关键的一条颜色赋值代码如下：

'#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16)

其中v = Math.cos，u = 2*Math.PI; r = 0，r = r + Math.PI/25

有个转化，(R,G,B)转成十六进制的颜色值可以用(R << 16 | G << 8 | B).toString(16)。也就是说，上面的颜色取值相当于：

R = cos(r)*127+128;
G = cos(r+2*PI/3)*127+128;  
B = cos(r+4*PI/3)*127+128);

那么r的取值范围是什么呢？按着每次迭代Math.PI/25的增幅，这决定于屏幕能绘制多少个三角形。上面分析过，三角形在x方向上的增幅为[-0.25*f, 1.75*f)，那么平均的增幅为0.75*f即67.5。假设取一般台式机屏幕的宽度为1440，那么平均可以绘制1440/67.5（20.5）个三角形。 所以，r的取值范围为[0, Math.PI*4/5)。每点击一次屏幕，继续绘制下一组三角形，r继续增加。由于余弦函数是周期函数，彩条的颜色也会周期性地出现重复。直接画出图像：

这样就很直观得看到三色的走势，仔细观察页面上的进度条，真的会出现周期性的颜色。

突然，我明白了为什么颜色这么设置了。当然这不是唯一的取色方法。

总结

总的来说，这是个很小的但充满智慧的项目。

说点我对这段代码代码的感受，格式规范，风格一致。统一没有分号，前面一次性定义好所有的变量，而且变量名字很简短。连函数名也只有一个字母。我觉得对于这么简单的程序没有问题，看起来像是打包后的代码。但是，复杂的程序命名这么简单会让人有点迷糊。

另外，这次改版我有个深刻的感受。由于页面的内容是可配置的，所以DOM内容是不确定的。之前比较懒，直接在JS里面创建DOM，然后改版再改版，又要重写真是烦不胜烦。然后，正在研究EvanYou个人主页的我，突然想到为何不尝试一下Vue呢？不是说它是渐进式框架吗？在Html引用一下，直接就可以用了！！！果然好用！

上一下改版后的效果：

作者：@野草

原文：https://zhuanlan.zhihu.com/p/28257724