2021/06/08
4,625
網頁互動創作新手必讀：快速上手 p5.js
對網頁互動創作有興趣？你可以試試更方便的 p5.js！五步驟簡單上手程式創作，學習資源一次整理給你！
對文章有興趣來不及看？點選右上角「
橘色小書籤」收藏 文章，再也不怕錯過就是一輩子！
當我們想要在網頁上繪圖，最常用的除了 CSS 之外，就是 HTML5 提供的 Canvas 了，Canvas 的 API 接口讓我們可以實現有效率、高靈活性在網頁上繪圖的夢想，Canvas 的許多基礎都在《動畫互動網頁特效入門（JS/CANVAS）》中提到，讓你可以從頭開始，完成豐富的網頁互動創作。
但是對於想要快速開始互動網站、藝術創作的人來說，Canvas 上像是繪圖、形狀、物理模擬或是常用的數學公式等功能都需要自己從頭處理。有沒有更快的方式呢？
你可以試試 p5.js！
答案是有的，就是今天要介紹的 p5.js，p5 是由 Processing 延伸而成的 JavaScript 函式庫，Processing 是設計給沒有程式基礎的人快速進行創作的平台，而 p5.js 可以理解為 Processing 的 JavaScript 版本。它將許多繪圖、數學、物理模擬等函式封裝好讓我們可以直接使用，如此一來我們可以在享受 Canvas 繪圖的同時不用費心思處理瑣碎的工具！
在本篇文章中我們將會實作一個簡單的畫布，把滑鼠當作筆刷，滑鼠經過的路徑會留下彩色的軌跡，點擊的狀況下軌跡則變成方形的圖案，增加繪製的多樣性。
我們將以 OpenProcessing 作為本次範例的平台，這是一個像是 Code Pen 的線上程式碼編輯器，可以在創作的同時即時看到程式碼運做的狀況，十分方便！
1. 先來熟悉 p5.js 創作環境
如果我們在 OpenProcessing 創立一個新的專案，會看到一個預設的專案長這樣子：
介面非常簡單，左邊是程式碼的區塊，右邊是目前程式繪圖的結果。我們在左邊輸入的程式碼在按下上方的執行或是（cmd + Enter）之後就會即時更新在畫面上。
2. 設定好畫布： setup() 與 draw()
p5.js 的專案由兩個主要的函式構成，setup() 與 draw()。setup() 負責程式的初始化，只會執行一次；而 draw() 則會持續更新，我們也可以透過 print(frameCount) 把禎數這個內建的變數打印出來，在 console 中看到當下畫面更新了多少次。
我們通常會在 setup() 中設定一些通用的初始值，例如畫布的大小、背景、繪製型態（2D 或是 3D）之類，在 draw() 中撰寫會時時更新的程式碼，像是筆刷的更新、物件的移動、滑鼠位置、感測器的資料更新等。
就算我們不懂 p5 的函式，也可以從 OpenProcessing 的範例中猜出createCanvas(windowWidth, windowHeight); 是創建畫布，background() 是設定顏色；ellipse(mouseX, mouseY, 20, 20) 是用滑鼠的位置繪製一個寬高各 20 的圓形。
3. 用簡單函式繪製圖形
如同一開始所說，在 p5 要繪製圖形非常容易，以方形來說，我們只要使用 rect() 函數，輸入要繪製的 x, y 座標以及長寬，就可以變出一個方形，圓形也是同理，使用 ellipse() 函數就可以變出來。如果想要知道更多內建的圖形函式，也可以參考文件中的 2D Primitives 部分。
這邊要注意 rectMode() 的設定，如果將他設定為 rectMode(CENTER) 的話繪製方形就會把左標訂定在方形的中間，否則就是方形的左上角喔！
4. 給圖形加點顏色吧！如何改變顏色與線條
能夠繪製形狀之後我們可以試著給圖形一些顏色，在 p5 裡面，設定的函式是 fill() ，裡面就像是 background() 一樣，可以填入 HEX、RGB 等色碼、顏色的英文等參數。要設定顏色也很簡單，在繪製圖形之前加上 fill(‘你要的顏色或是色號’) 就行了。
此外我們也能用 stroke() 與 strokeWeight() 設定圖形邊線粗細或是顏色 noStroke() 則是不加任何的邊框。合併在一起看看吧：
5. 加上判斷式
p5 當中提供了不少可以直接運用的狀態，像是 mouseIsPressed 就是當下滑鼠是否有點擊事件，或是 keyIsPressed 判斷是否有點擊鍵盤事件，甚至是行動裝置的感測器也有 accelerationX, Y, Z 等事件。讓偵測事件變得十分方便。
我們希望在點擊的當下，繪製出不同的形狀，只要在隨時更新的 draw() 當中加上判斷式 if(mouseIsPressed){繪製我要的圖形} 就可以了。
6. 把上面的功能組合在一起，做出互動作品！
做點有趣的組合，讓作品隨著 frameCount 改變筆刷顏色、增加滑鼠點擊出現不同繪圖的互動，最後再使用隨機改變圖形大小，就完成一個有趣的互動作品了！是不是比自己用 Canvas 土砲慢慢做來的方便多了？來看看我們的成品吧：
以上就是這次的 p5.js 快速上手，p5 的文件寫的很完整，如果有遇到不懂的問題查閱一下，說不定就可以馬上解決，文件中更有互動的範例，簡直是無痛上手程式創作的最佳利器！
以上教學想要跟著影片一起看也沒問題，請從這邊走：《p5.js 快速上手與「互動藝術程式創作入門」課程介紹》
希望這個介紹對大家有幫助，如果想要學習更多程式創作的手法與內容，歡迎來看看墨雨設計的《互動藝術程式創作入門 Creative Coding》 課程，會從頭介紹程式創作的概念與手法，讓你快速做出生動豐富的互動作品喔！
看完文章要用時卻忘光光？點選下方按鈕
收藏此文章，我隨時都在這等你回來！
🎉 太棒了！你又學會了新知識！
▶ 用 5 分鐘再多學一點
▶ 推薦線上課程
(本文原載於 Creative Coding TW - 互動程式創作台灣站，原標題：p5.js 快速上手：互動網頁教學
3513
