系列文章
[Day 11] p5.js 基礎教學(五) –– p5.js 的顏色系統
我們在前面的章節探討許多關於圓周運動的視覺藝術技巧，但始終只是黑白的動畫，我們還沒為這些動畫加上絢麗的顏色，所以這一章節我們要來講一下 p5.js 的顏色系統，...
[Day 12] p5.js 基礎教學(六) –– random 函數
現在我們來學如何使用隨機函數，最後幫我們作品的每個 circle 隨機填上不一樣的顏色。 random() 語法解說 random() 如果我們只接使用無參...
[Day 13] p5.js 基礎教學(七) –– 繪製不規則形狀
之前的章節我們一直在探討如何疊加圓周運動來實現各種視覺藝術效果，接下來我們會繼續探索 p5.js 其他新的可能。 今天開始我們要學習如何用 p5.js 繪製繪製...
[Day 14] p5.js 實戰演練(四) –– 結晶動畫實作(一)
之前我有一個作品 結晶(Crystallization)，就是以前一單元 p5.js 基礎教學(七) –– 繪製不規則形狀 學習到的 vertex、beginS...
[Day 15] p5.js 實戰演練(五) –– 結晶動畫實作(二)
接續上一個單元 p5.js 實戰演練(四) –– 結晶動畫實作(一) 的實作，我們現在想讓這個動畫維持「環狀」的輪廓，也就是說要調整變數 d 的隨機取值範圍，d...
[Day16] p5.js 基礎教學(八) –– noise 函數
這次的基礎教學要介紹的是 noise 函數，和 random 函數功能相似，都是輸出一個隨機值，但和 random 不同的是，noise 可以輸出「平滑」的隨機...
[Day 17] p5.js 實戰演練(六) –– 煙霧動畫實作(一)
這次的文章是新的創作應用單元，我們要來實作環狀煙霧的效果： 主要用的是上一個單元 p5.js 基礎教學(八) –– noise 函數 使用的函數： noi...
[Day 18] p5.js 實戰演練(七) –– 煙霧動畫實作(二)
上一個單元 p5.js 實戰演練(六) –– 煙霧動畫實作(一) 我們留了一個回家作業給大家，看要怎麼使用 smoothstep 函數來進行緞帶頭尾的接合。 先...
[Day 19] p5.js 實戰演練(八) –– 煙霧動畫實作(三)
今天我們要進行煙霧動畫最後的部分。 昨天 p5.js 實戰演練(七) –– 煙霧動畫實作(二) 提到我們必須解決 noise function 震幅隨著半徑越來...
[Day 20]p5.js 基礎教學(九) –– 貝茲曲線
這次的基礎教學我們要介紹貝茲曲線，這是一種用數學函數所描述的曲線形式，廣泛應用到計算機圖學以及字型設計上，他好處是可以藉由少少的座標點來精確描述複雜的曲線圖形。...