PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

双奥临门，共襄盛举，不知道大家看了冬奥开幕式没有，最后圣火点燃的时候实在是太过于惊艳了！雪花汇聚成圣火的底座，令人拍案叫绝。雪花之所以美丽，是因为它符合我们朴素的几何学审美，而在几何学中，分形学又往往能创造出让人印象深刻的图案。

说到这，就不得不简单介绍一下分形了，分形是一门以非规则几何形态为研究对象的几何学，由曼德勃罗（B.B.Mandelbrot）等人创立并命名。

分形图从整体上看，是处处不规律的。但从局部观察，图形的规则性又是相同的，即具有自相似的性质。这不正与雪花的特点相符？

通常意义下，分形被定义为将一个确定的几何形状（元图像） 在其边上迭代地生成与元图像近似地的形状。这次就基于分行的原理，利用canvas画出一朵雪花吧。

基础数学篇

在画雪花前，先将问题简单化，最简单的雪花不就是一个六角形吗，因此我们可以先从最简单的六角雪花开始。

众所周知，Canvas 采用的坐标系默认是以画布左上角为坐标原点，x 轴向右，y 轴向下。画布的大小决定了坐标系x、y轴的最大值。

假设，我们要在宽 300 * 高 300 的一个 Canvas 画布上实现一个六角形。其中，六角形的边长是50。试想应该怎么做。

观察六角形的基本形状，找到12条边的规律是：相邻两条边为一组，第1条边画完后逆时针转60度，画完相同长度的第2条边，随后顺时针转120度，这样重复执行6次后，一个基础的六角形就画出来了。

假设路径是从P1点画到P2，再到P3、P4。已知P1、P2的坐标，那么我们还需要找到P3、P4的坐标是多少。这是一个简单的根据坐标与角度找下一个坐标的数学问题，我们可以通过简单的顶点换算将其绘制出来。

旋转与坐标点映射

先简单复习一下数学知识。已知P1、P2的坐标，P2P1的长度为r，将向量P1P2顺时针旋转α2角度后，计算P3的坐标值。

$\begin{cases} x_3 = x_2+rcos(α_2-α_1) \\ y_3=y_2-rsin(α_2-α_1)\\ cos(α_1) =\cfrac{x_2-x_1}{r} \\ sin(α_1) =\cfrac{y_2-y_1}{r} \end{cases} => \begin{cases} x_3 = x_2+(x_2-x_1)cos(α_2)+(y_2-y_1)sin (α_2)\\ y_3 = y_2-(x_2-x_1)sin(α_2)+(y_2-y_1)cos (α_2) \end{cases}$

同理可以得到逆时针旋转的计算公式。

$\begin{cases} x_3 = x_2+rcos(α_2+α_1) \\ y_3=y_2+rsin(α_2+α_1)\\ cos(α_1) =\cfrac{x_2-x_1}{r} \\ sin(α_1) =\cfrac{y_2-y_1}{r} \end{cases} => \begin{cases} x_3 = x_2+(x_2-x_1)cos(α_2)-(y_2-y_1)sin (α_2)\\ y_3 = y_2+(y_2-y_1)cos(α_2)+(x_2-x_1)sin (α_2) \end{cases}$

由以上推导同样可以得到旋转矩阵如下。

顺时针

\begin{bmatrix}cosβ&sinβ\\ -sinβ&cosβ\\ \end{bmatrix}

逆时针

\begin{bmatrix}cosβ&-sinβ\\ sinβ&cosβ\\ \end{bmatrix}

代码实现

绘制六角形。首先从第一个点P1(0,50)、P2(50,50)开始画，核心模块放入hexagon方法中，迭代6次。

var ctx = canvas.getContext("2d");

ctx.strikeStyle = "#000";

ctx.beginPath();

const y = 50;

ctx.moveTo(0, y);

hexagon(ctx, 0, y, 50, y, 0, 6);

hexagon方法的输入参数有(ctx, x1, y1, x2, y2, n, m)，分别表示canvas上下文ctx，P1、P2点的横纵坐标，n为迭代次数，m为总共迭代次数。最终代码与效果如下。

function hexagon(ctx, x1, y1, x2, y2, n, m) {

    ctx.clearRect(0, 0, 300, 300);

    // 顺时针 60度

    ctx.moveTo(x2, y2);

    const x3 = x2 + (x2 - x1) * Math.cos(Math.PI / 3) + 
        (y2 - y1) * Math.sin(Math.PI / 3);

    const y3 = y2 - (x2 - x1) * Math.sin(Math.PI / 3) +
        (y2 - y1) * Math.cos(Math.PI / 3);

    ctx.lineTo(x3, y3);

    // 逆时针 120度

    const x4 = x3 + (x3 - x2) * Math.cos((Math.PI * 2) / 3) -
        (y3 - y2) * Math.sin((Math.PI * 2) / 3);

    const y4 = y3 + (y3 - y2) * Math.cos((Math.PI * 2) / 3) +
        (x3 - x2) * Math.sin((Math.PI * 2) / 3);

    ctx.lineTo(x4, y4);

    ctx.stroke();

    n++;

    if (n === m) {
        return false;
    } else {
        hexagon(ctx, x3, y3, x4, y4, n, m);
    }

}

向量运算

从以上流程可以看出，通过坐标进行点的绘制是非常麻烦并且费时间的，加上 Canvas 2D 的坐标与常规数据坐标系上下颠倒，我们会花费大量时间在坐标点的计算上。

因此，为了代码的逻辑简单、易读，我们可以转变思路，将坐标点以向量的方式来理解。复习一下常用的向量运算有以下几种。

向量相加/减。向量点乘、叉乘。如图1所示，向量相加的含义是，路径沿v1、v2进行绘画，则P2坐标点为v1与v2两个向量相加，为[x1+x2, y1+y2]。点乘为a、b 向量点积的几何含义，是 a 向量乘以 b 向量在 a 向量上的投影分量，如图2所示。叉乘为两向量组成的面积，如图3所示。

代码实现

用形如 [x,y] 的数组方式描述向量。

class Vector extends Array {
    constructor(x = 1, y = 0) {
        super(x, y);
    }

    copy() {
        return new Vector(this.x, this.y);
    }
  }

向量相加减。

add(v) {
    this.x += v.x;
    this.y += v.y;
    return this;
}

sub(v) {
    this.x -= v.x;
    this.y -= v.y;
    return this;
}

向量叉乘点乘。

cross(v) {
    return this.x * v.y - v.x * this.y;
}
dot(v) {
    return this.x * v.x + v.y * this.y;
}

向量旋转。

rotate(rad) {
    const c = Math.cos(rad),
        s = Math.sin(rad);
    const [x, y] = this;
    this.x = x * c + y * -s;
    this.y = x * s + y * c;
    return this;
}

按照向量运算，画出一个六角雪花的代码可以改写成以下方式。首先将canvas坐标系进行上下翻转，形成我们习惯的坐标方式。

var ctx = canvas.getContext("2d");
    ctx.translate(0, canvas.height);
    ctx.scale(1, -1);

得到v0、v1的向量，进行逆时针和顺时针的旋转，得到的效果与之前的方式一致，但代码的可读性却增加了很多。

const v0 = new Vector(0, 250);

const v1 = new Vector(50, 250);

hexagon(ctx, v0, v1, 0, 6);

function hexagon(ctx, v0, v1, n, m) {

    const v2 = v1.copy().sub(v0);
    v2.rotate((60 * Math.PI) / 180).add(v1); *// 逆时针 60度*

    const v3 = v2.copy().sub(v1);
    v3.rotate((-120 * Math.PI) / 180).add(v2); *// 顺时针 120度*

    ctx.beginPath();

    ctx.moveTo(...v1);
    ctx.lineTo(...v2);
    ctx.lineTo(...v3);
    ctx.stroke();

    n++;

    if (n === m) {
        return false;
    } else {
        hexagon(ctx, v2, v3, n, m);
    }

}

实践篇

雪花的的逻辑规律其实也是递归与基础图形的结合，在实践篇中我们选择科赫雪花与六角形雪花进行实现。

科赫雪花

科赫雪花最早由数学家Helge von Koch提出，是分形几何中经典图像之一。它的生成基于科赫曲线，即单边的无限分形。

先看一下实现效果，它的基础图形是等边三角形。该图片的面积有限，但周长是无限的。每次迭代，线段的长度都会增加原长度的三分之一。

思路

科赫雪花由科赫曲线组成，它最基本的形状是一个三角形，将三角形的每条边等分成3份，中间那份线段先右转60度之后画出边长一样的线段后，再向左旋转120度画出等长。
在递归的模块里递归执行步骤1，直到达到设置的递归层级。图4 | 图5 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

代码实现

首先还是坐标变换，将坐标原点从左上角移动到左下角，并且让 y 轴翻转为向上。

 var ctx = canvas.getContext("2d");
      ctx.translate(0, canvas.height);
      ctx.scale(1, -1);

然后我们找到三角形的三个顶点，假设我们从v1(100,100)出发，三角形边长为100，则通过向量变换可以获取其余两个顶点v2、v3向量。

 var ctx = canvas.getContext("2d");

      const v1 = new Vector(100, 100);
      const v2 = new Vector(100, 0).add(v1);
      const v3 = new Vector(100, 0).rotate((60 * Math.PI) / 180).add(v1);

接着我们根据对三条边，也就是v1v2、v2v3、v3v2三向量分别进行递归操作。

      koch(ctx, v1, v2, 0, deep);
      koch(ctx, v2, v3, 0, deep);
      koch(ctx, v3, v1, 0, deep);

我们定义一个递归的核心模块：function koch(ctx, v1, v2, n, m) {}，

该函数有五个参数：ctx 是 Canvas2D 上下文。v1是一条边的起始向量，v2是终止向量，n为当前迭代层级，m为总共迭代次数。在模块中我们根据图5中描述，将一条边划分成四段，每段长度相同。得到v3、v4、v5。终止条件为迭代层级与规定好的次数相同，这时将v1~v5的折线路径连接起来。这样就形成了一个科赫雪花。代码如下。

function koch(ctx, v1, v2, n, m) {

    ctx.clearRect(0, 0, 300, 300); *//每次绘图前清除画板*

    const oneThirdVector = v2
        .copy()
        .sub(v1)
        .scale(1 / 3);

    const v3 = oneThirdVector.copy().add(v1);
    const v4 = oneThirdVector.copy().scale(2).add(v1);
    const v5 = v4.copy()
            .sub(v3)
            .rotate((-60 * Math.PI) / 180)
            .add(v3);

    n++;

    if (n === m) {

     // 绘图（连线） 当前层级与设定层级一致时候停止递归

        ctx.moveTo(...v1);
        ctx.lineTo(...v3);
        ctx.lineTo(...v5);
        ctx.lineTo(...v4);
        ctx.lineTo(...v2);
        ctx.stroke();
        return false;

    }

    // 递归调用绘图

    koch(ctx, v1, v3, n, m);
    koch(ctx, v3, v5, n, m);
    koch(ctx, v5, v4, n, m);
    koch(ctx, v4, v2, n, m);

}

六角形雪花

先看一下实现效果，它的基础图形是六角形。每迭代一次，都以每条线段的1/3作为边长，在每个角顶点处再画出下一个小六角形。重复这个步骤便可以得到一个六角形雪花分型图。

思路

首先根据基础篇中提到的六角形雪花的生成规律，每相邻两条边为一组，第1条边左转60度，第2条边右转120度，执行6次即可得到基础形状六角形。
在开始画线之前判断该次的边长是否小于规定的最小边长。如果不小于则将边长变为原变成的1/3，进行递归调用，若小于则开始绘制六角形。

代码实现

坐标变化和获取canvas 2D的上下文这里就不再累述。首先，我们从v0、v1出发进行画六边形的主函数中。

      const v0 = new Vector(50, 200);
      const v1 = new Vector(100, 200);
      hexagon(ctx, v0, v1);

我们定义一个递归的核心模块：function hexagon(ctx, v0, v1) {}，

该函数有五个参数：ctx 是 Canvas2D 上下文。v0v1是开始作画的起始向量，也就是给我们的作画一个开始的方向。hexagon中，我们计算出本次迭代的六角形边长hexagonLen，当不满足终止条件时候进行迭代。

  function hexagon(ctx, v0, v1) {
    const hexagonLen = v1.copy().sub(v0).vlength;
    if (hexagonLen > minLine) {
        // 进入迭代
    }
  }

这里我们将六角形分为6次循环。每次循环都是从vstart到vmiddle，再到vend。

// 迭代中 hexagon(ctx, v0, v1)
let vstart = v1.copy();
let vmiddle = v1.copy().sub(v0);
let vend = new Vector();
for (let i = 0; i < 6; i++) {
    // 六角形的6次循环
}

在循环体中，我们先获取该次迭代中vstart、vmiddle、vend的向量，以及下一次的边长。如果新的边长大于设置的最小边长minLine，则进行下一次的迭代，否则，便沿着这三个向量进行绘制。绘制完后，更新vstart、vmiddle。

  // 向量旋转

  vmiddle.rotate((60 * Math.PI) / 180).add(vstart);
  vend = vmiddle.copy().sub(vstart);
  vend.rotate((-120 * Math.PI) / 180).add(vmiddle);

  const thirdv = vend
          .copy()
          .sub(vmiddle)
          .scale(1 / 3)
          .add(vmiddle);

  const newHexagonLen = thirdv.copy().sub(vmiddle).vlength;

  if (newHexagonLen > minLine) {
      // 递归
      hexagon(ctx, vmiddle, thirdv);
  } else {
      // 绘图

      ctx.beginPath();
      ctx.moveTo(...vstart);
      ctx.lineTo(...vmiddle);
      ctx.lineTo(...vend);
      ctx.stroke();
  }
  vstart = vend.copy();
  vmiddle = vend.copy().sub(vmiddle);

这样，我们就实现了绘制六角雪花的方法。

总结

在绘制雪花的过程中，我们复习了以下几个知识点：首先，在 Canvas 中我们可以通过坐标系变换来满足实际需求，对坐标进行合理的变化可以让我们的绘图逻辑变得简单易懂。其次，向量在可视化中是非常方便且基础的工具，掌握和学会用向量的思维计算是学习可视化的必经之路。最后，以雪花图案为代表的分形图大多数都是通过元图像加迭代的方式实现的，练习分形图的绘制有助于我们掌握各式各样的递归操作，以及总结出此类图形的逻辑方法。

这个春节用一片雪花❄️来致敬冬奥会的开幕

前言

基础数学篇

旋转与坐标点映射

代码实现

向量运算

代码实现

实践篇

科赫雪花

思路

代码实现

六角形雪花

思路

代码实现

总结

参考文献