科赫曲线及其编程绘制(javascript) | 玄数

2017-02-28

科赫雪花 Koch snowflake
把等边三角形的每一边三等分,以中间的一段为边长,向外作等边三角形,并将中间的这一段移去。不断的重复此步骤,便可得到一个美丽的雪花曲线图案。此图案有个几何名称:科赫曲线Koch curve / Koch snowflake。

这么可爱的曲线怎么用程序绘制出来呢?现介绍javascripte在Html5 Cavas上的编程。

科赫曲线 koch curve

如图可见,科赫曲线是对称图形,它的根基是一个正三角形,而正三角形的每边都可由邻边的反向延长线旋转120o得来。设绘制每边的函数为leg(n),

先画底边 leg(n),接下的两边是context旋转120o后再绘制,执行两次:

context.rotate(120 * Math.PI / 180);
leg(n);

 

而每边的leg(n)是边长为原来的1/3的基础上,context又是旋转不同的角度,n不断-1直到0迭代而来的。

当n=0时,是一条线段;

当n=1时,绘制4条边,形如\/,context.rotate(?);

当n>=2时,分别在原来的 , \, /, 基础上再次绘制\/

此方法的便捷之处在于不需要求出具体的点的坐标。

 

完整代码如下:

function init()
{
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        n = 4,
        x = 100,
        y = 200,
        sideLength = 160,
        degree = Math.PI / 180;

    context.strokeStyle = 'black';
    snowflake(n, x, y, sideLength);
    context.stroke();

    function snowflake(n, x, y, sideLength)
    {
        context.save();
        context.translate(x, y);
        context.moveTo(0, 0);
        leg(n);
        context.rotate(-120 * degree);
        leg(n);
        context.rotate(-120 * degree);
        leg(n);
        context.closePath();
        context.restore();

        function leg(n)
        {
            context.save();
            if(n == 0){
                context.lineTo(sideLength, 0);
            }
            else {                  
                context.scale(1/3, 1/3);
                leg(n - 1);
                context.rotate(60 * degree);
                leg(n - 1);
                context.rotate(-120 * degree);
                leg(n - 1);
                context.rotate(60 * degree);
                leg(n - 1);
            }
            context.restore();
            context.translate(sideLength, 0);
        }
    }
}

科赫曲线及其编程绘制(javascript)