这是我最後的波纹了。

其实我一直想试着讲一次这句话(X)

首先来丢一张案例完成後的图片~

大家应该多少有看过这种类型的图样，最常见的应该就是在游戏的3D场景上~

事实上有很多电脑动画中的海面、高山 都是透过这样的方法来产生3D模型的。

其实对於已经大致理解噪声概念的我们来说，这个案例并不是很难，原理上大概就是

• 透过程序去产生网格，然後把网格的格眼座标(线条交错的地方)记录到一个阵列中

• 透过透视投影运算，还有柏林噪声函数来把座标转换过一遍

• 把转换过的点连起来

那麽我们就马上来看看实作的部分吧~

codepen : https://codepen.io/mizok_contest/pen/PoKPjew

首先前半段的Perlin's noise，这个函式其实是我从别的地方找来，然後稍加整理过的。

主要的核心则是Grid这个类，Grid在被实例化後会先来到init方法，而init之後会来到核心的initVertices方法，这个方法就是用来生成格眼座标阵列用的～

而有了格眼座标阵列，我们就可以把点跟点之间连起来~ over~

initVertices() {
    for (let x = 0; x <= this.w; x++) {
      for (let y = 0; y <= this.h; y++) {
        this.vertices.push([
          -0.5 * this.w * this.space + x * this.space,
          y * this.space + this.z
        ]);
      }
    }
    this.vertices = this.vertices.map((o, i) => {
      let x = o[0];
      let y = this.y;
      let z = o[1];
      //先用柏林噪声取得这个座标下的浮点数
      // 这边的0.01&0.1 是用来调节崎岖程度的系数(可以试着调整看看)
      let perlin = perlinNoise(x * 0.01, y * 0.01, z * 0.1);
      // 接着再用投影公式去把正确的投影点位算出来
      return this.project(
      // 这边这个perlin * 3 的3也是是用来调节崎岖程度的系数
        o[0], this.y + this.cvs.height * perlin * 3, o[1]
      )
    });
  }

完赛後记

当初之所以参赛，其实是想陪朋友一起参加。

但是写着写着就突然发现我真的很喜欢写这个题目（如果不要有每天的完稿压力的话那就更好了QQ，每天7点多下班回家赶稿的生活真的累)

而且赛程中也发生了蛮多让人印象深刻的事情（例如把系列文贴到社群上宣传的时候意外的被业界的名人tag了XD）

我觉得这次的参加经验对我来说收获良多～可以的话明年大概也会参赛!

小弟就在这边先下台一鞠躬 ^ ^