吳哲宇

2021/07/29

2,385

吳哲宇老師的p5.js創作教學：電波電路(Wave Circuit)超詳盡步驟解析！

想知道 p5.js 如何實際應用嗎？搭配吳哲宇老師的直播與步驟教學，就能輕鬆做出逼哩逼哩送訊號的電路喔！

點選右上角「橘色小書籤」，就可以收藏文章隨時隨地閱讀嘍！

本文為 200510 Wave Circuit 電波電路直播筆記。若你對物件導向有興趣，歡迎邊看影片詳細內容，搭配筆記進行學習。
還是新手嗎？想要快速上手p5.js，歡迎閱讀《p5.js 快速上手：互動網頁教學》

這次的直播要來製作具有逼哩逼哩效果的電路，在創作過程中會各自去調整以下三部分，有可能調整了線條後，再去修改背景，而後又再回去修改線條，透過來來回回的在細節上修正來完成最終的作品。這三部分內容分別是：

背景的格線
連接的線條
細節上的裝飾

你會需要使用的 API

push() / pop() 保存與還原畫布的狀態
用 loadPixels() 來製作材質
使用 Array.from() 來設定線條的基本屬性
使用 forEach() 來決定線條要如何呈現

line-short

p5.js創作教學，開始上課嘍！

1. 建立網格點點

一開始我們這邊先用雙層的 for 迴圈來建立垂直與水平間隔上都是 50 的格線。

2. 隨機連彩色的線

colors 設定：在顏色上，雖然可以直接使用指定內建的顏色來使用，但這邊我們使用外部的選色工具來協助。首先先連到 coolors 這個配色的網站，當開始使用的時候，可以發現上面的網址列會呈現像是https://coolors.co/ed6a5a-f4f1bb-9bc1bc-5ca4a9-e6ebe0 ，仔細發現這串網址後面的字串就是顏色的代碼，這時只要將後面的顏色字串複製下來，接著經過字串的處理後就可以變成讓使用的顏色了。
標點建立與連線，分為二個部分：
- 首先是先 Array.from 來建立 50 個隨機的位置點的陣列，如果我們將它列印出來的話，會產生出像是 [start: {x: 13, y:8}, end {x: 3, y:5}] 的陣列
- 接下來用 forEach 來將 links 這個陣列的每一個元素來去提取出來。不過這裡有一個小問題，就是現在 links 所存的數字是表示方格上的第幾個點，而非實際的位子，所以這邊要使用 getPos() 來將位子的點轉換成實際的位子。舉個例子來說，像是原本點是 (3,5)，而這個點在畫布上的實際位子是 (150, 250)。在位子轉換後，就使用 line(st.x, st.y,ed.x, ed.y) 將線條連接起來。

這邊可以建議大家稍微停下來思考一下透過 Array.from() 來建立陣列的細節以及 links.forEach() 提取陣列來做操作的架構，因為在後續我們會增加一些屬性，像是波的波型，亦或是波的振幅都是一樣透過在 Array.from() 中進行屬性的設定，接著在 links.forEach() 中進行實際的繪製。對了，這裡除了畫線條之外，也在後面加上一個黑色的方塊，來讓我們很像電路板的作品跟最後面的背景來做區別。

3. 將線條加上光暈/特定點放大

目前線條看上去有點太硬了，感覺死板板的，所以這裡透過加上模糊的效果來讓整體上看起來柔和一些，使用 drawingContext 來去設定線條模糊的顏色 (當然是跟實體直線的線條顏色一樣) 以及模糊的程度。設定完後就把它加在繪製線條的位子之前。

除了調整線條外，我們也調整一下背後的點點。如果點點在垂直以及水平的方向都是五的倍數的話，就將那個點設定的更加明顯一些，這樣子背景看上去就稍微比較有韻律感了。

4. 移動的 Siri 波型

這裡要持續的去改變線條，將原本的直線變成波型，同時讓它動起來，看起來更活潑一些。

在波的繪製上，首先要先找出兩個重要的數字來協助我們，一個是距離，另一個則是角度。在距離上是使用 dist() 來取得，而角度稍微比較複雜一些些，必須要先將終點減去起點得到向量後，再用 heading() 來取得角度。這裡有個要注意的是，heading() 它的單位是 radians 弧度，並非一般我們認知的 360度 / 90 度的單位。

有了距離以及角度後，就可以開始畫波浪囉。一開始先將畫筆移動到起始點的位子，並根據所得出的角度旋轉面向終點的位子，接著就開始透過 for 迴圈一小段一小段來畫出現線條了。這裡有個地方要注意的是，由於每次畫線條的時候，都會透過 translate(st.x, st.y) 去移動畫筆，而間接影響到畫布的設定，所以這邊要記得用 push() / pop () 給包起來。

接著要使靜態的東西動起來，最常使用的小技巧就是 – 加入 frameCount ，因為它是系統上會隨著改變的系統變數，但是全部都只加上 frameCount 的話，這樣就會全部都線條一起同個頻率一起扭動，這樣的畫面有點不太自然，所以加上了 freq 屬性，並且放到 vertex() ，這樣線條就會隨著自己的頻率各自搖擺囉。

再來就是要浪波看起來就像是 Siri 般，兩邊頭尾的地方相對於中間的地方振福較小，所以增加了變數 ratio 後，再相乘到 vertex 的第二個參數中。一開始你看到可能會想，這個變數看上去也太複雜了吧，不過實際上哲宇老師在製作過程中也是嘗試了非常多不同的組合跟方式才慢慢試出來的。大家也可以玩玩看不同的效果，找到你最喜歡的樣貌。

5. 外觀調整

目前波的部分處理到一個段落了，接下來要來調整背景，以及替它加上材質。

雖然說先前已經有對後面的點點進行設定了，但是看上去似乎有點不太明顯，所以除了大小，在顏色上也要有所區別。這裡先透過 (i%5==0 && o%5==0) 判定同時垂直與水平都是5倍數的點才是 isGridPoint ，接著在下面設定如果是 isGridPoint 的話，顏色會比較深，反之其餘會比較淡。

在加材質上，可以分為三大區塊，分別為定義材質、設定材質以及使用材質，這三個都是設定在不同地方，這是要特別注意的地方。

6. 加入不同種類的波形

除了現在的 sin 波外，這裡再來多加上一個方波，這個算是波裡面的一個**屬性，**所以與前面提到的一樣，當想要再多加上一個功能需要屬性時，就加在 Array.from() 中。這裡多加上 type 屬性，並且設定兩種波型，分別是 sin 波以及方波。

設定好了之後，就是到下面 vertex(i, sin((i+frameCount)/link.freq)*5) 的位子來畫波，可以觀察在影響波的形狀是透過設定 y 的數值，現在由於要來畫不同形狀的波，所以這裡把 y 位子的地方抽出來，設定名為 yy 的變數，接著根據不同的波型去設定 yy 的數值，最後在尾端再將yy 帶入 vertex()中。

7. 加入起始/結束點

加入起點與終點的部分不難，要注意的是，這段是要加在 links.forEach()={} 之中。

🔔 小提醒：由於 canvas 在開發的時候其實蠻吃效能的，所以可以嘗試將效能先關起來，另外也可以將線條的數量暫時調小，從原本的 50 調整成 30，這樣電腦才不會使負荷那麼大。

到目前為止，作品上架構都已經完成得差不多了，接下來就是一些細節上的調整，讓整體更加具有科技感

8. 格線與方格

這裡要替背景加上格線，形成九宮格，而這九宮格的線條跟 isGridPoint 一樣，是以五的倍數去做繪製的。而方格部分則是將其旋轉後，製作出一個向外有如呼吸般的方格。

九宮格: 在畫九宮格上，可以細分為畫直線與橫線。這裡比較直觀的地方是畫橫線時是在第一層控制左右寬度的 for 迴圈，而畫橫線時，則是在第二層控制垂直的 for 迴圈中，但有個要注意的是，在第二層中不僅僅限制 o%5==0 ，還多加了 i==0 ，原因在於，如果不加上的話，直線會因為上一層的 for 迴圈關係，而重複畫了好幾次。
方格: 在方格的三個設計 – 位子標示、旋轉以及呼吸燈的效果，製作上都不難，但這邊的前後位子順序相當重要，如果把旋轉擺放到最前面的話，這樣一來就會連同字也一個旋轉了，要避免這樣的狀況，除了可以用最簡單的方式就是把位子標示往前移，或是使用 push() / pop() 來保存與還原畫布的狀態。

9. 加入裝飾用的文字

既然前面都加上格點位子，那再來替線條加上各自的標示，顯示著是甚麼類型的波形以及編號，雖然這不太起眼，人們不一定會去細看，但是當畫面資訊量很多，而且很整齊的時候，那個裝飾加分的效果就出來了。

與先前一樣，要加上屬性就到上面的 links = Array.from({}) 來做設定，由於文字上要做一點加工，所以 type 拉到上面去做宣告，接著在 label 上設定顯示線條的種類與編號。設定好後，就去下面地方寫 label 的樣式，這裡一樣要注意文字放的位子，這裡可以回頭看看第四章移動的 Siri 波型畫上線條的架構， label text 的位子要被放在移動到線條起始點的位子以及旋轉方向之間。

這是目前整體看上去的樣子，看上去稍微顯得有點雜亂，線條上比較偏向各自發展，所以接下來會針對波的長度與方向來修正。

10. 調整波的方向以及種類

在這裡有三個地方要調整，分別是波的行走方向、波形的種類以及改變波的振福。

波的行走方向 : 為了限制距離及方向，要先新增 randomDelta，接著結束點的位子取決於起點加上 randomDelta 的數值。

波形的種類：原本波的設定上是 random(['sine','square']) ，但哲宇老師覺得多一點 sin 波比較好看，所以多增加了 sin 波的數量。
波的振福：新增波的屬性 amp，設定好後在下方乘上 yy 的數值，這裡要寫成 yy*=link.amp 或是 yy = yy * link.amp 都可以。

11. 增加逼哩逼哩閃爍效果

這次的創作主題是與電有關，想像是與電有關的閃電或是電腦機台運作的時候，都會一閃一閃的，這邊就要來製造這樣的效果。因此要在繪製線條的外面再包一層 if ，限制在特定的情況之下才會顯示線條，而在 if 裡面所帶的參數有跟時間相關 frameCount，也有自行設定隨機的變數 activeMod ，以及 forEach 中的編號 linkId 。為了要能夠存取 linkId ，記得要設定在 forEach 的第二個參數。