今天我們要進行煙霧動畫最後的部分。

昨天 p5.js 實戰演練(七) –– 煙霧動畫實作(二) 提到我們必須解決 noise function 震幅隨著半徑越來越大的問題，這原因其實很好理解，我們用 n * radius 來構成最後的極座標半徑 r，n 的影響當然會隨著 radius 數值逐漸加大。

新增傳入參數 variance

解決方法是，我們讓 radius 的變化和變數 n 脫鉤，所以我們可以更改原本的函數參數，現在應該會有四個可控變因：

  • 半徑 radius (隨時間越來越大)
  • 擾動參數 variance (基本上不隨時間改變)
  • 線的個數 line_num (決定煙霧厚度)
  • 透明度 alpha (先淡入再淡出)
function circular_smoke(radius, variance, line_num, alpha) {
    noFill();
    strokeWeight(2);
    for (let i = 0; i  0) {
        if (smoke_args_list[smoke_args_list.length-1].alpha  0) {
        if (smoke_args_list[smoke_args_list.length-1].alpha = 1) {
						args.alpha[1] = 0; // 切換為淡出階段
					}
				} else {
					args.alpha[0] -= 0.002;
				}
    }
    while (smoke_args_list.length > 0) {
        if (smoke_args_list[smoke_args_list.length-1].alpha[0] < 0) { // 記得加上 [0]
            smoke_args_list.pop();
        } else {
            break;
        }
    }
    for (let args of smoke_args_list) {
        circular_smoke(
                args.radius,
                args.variance,
                args.line_num,
                args.alpha[0],
			    args.seed // 增加隨機參數 seed
        );
    }
}

Imgur

作品網址：
https://openprocessing.org/sketch/2315699

費盡千辛萬苦終於完成了，感謝大家費心閱讀，下個單元我們開始來講貝茲曲線。