這是我最後的波紋了。

其實我一直想試著講一次這句話(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）

我覺得這次的參加經驗對我來說收穫良多～可以的話明年大概也會參賽!

小弟就在這邊先下台一鞠躬 ^ ^