p5.js 起步走


Processing 是個透過視覺化來輔助程式設計學習的語言,非常地受到歡迎,後來有了各個語言的移植版,p5.js 是 Processing 的 JavaScript 移植版,藉助 JavaScript 可在各瀏覽器上執行的優勢,讓 p5.js 的成品,可以很方便地在網路上分享。

接下來的這系列文件,將記錄把玩 p5.js 的一些過程,我不打算循序漸進地介紹 p5.js 的每個細節,那些細節並不難,逐一討論很容易生厭,我會一邊談談 p5.js 的某些特性,然後一邊記錄一些圖學的東西,大概就是…假玩弄 p5 之名,行記錄圖學之實吧!

首先,你知道為什麼 p5.js 的 p5 怎麼來的嗎?HTML5 的 5?不是!這名稱是來自 Processing 舊的網域名稱 proce55ing.net,55 只是為了看起來像 ss,然後 p5 就取了 proce55ing 的 p 與 5 來命名了。

其實本來也真的有個 processing.js,它是將 Processing 的 PDE 轉為 JavaScript,然而 p5.js 是直接使用 JavaScript,彈性更大,後來 processing.js 在完成其階段性目標後就封存了。

想開始玩弄 p5.js,最簡便的方式就是使用官網的 p5.js Web Editor,開啟後就會看到以下的程式碼:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

setupdraw 是最常用的兩個回呼函式,setup 只會被執行一次,用來設置一些動畫開始前的初始流程,在 setup 執行過後,draw 會不斷地被呼叫,預設是每秒 60 次,可以透過 frameRate 來設置每次呼叫幾次,對人類來說,每秒 24 次就會覺得是順暢的動畫了,不過實際上運算與繪圖的速度要考慮進去,不見得一定能達到想要的每秒指定次數。

如果不希望 draw 不停地被呼叫,可以呼叫 noLoop,這時可以透過呼叫 redraw 來控制何時呼叫 draw,例如在按下滑鼠後再重繪之類的,可以呼叫 loop 回復自動呼叫 draw

範例中看到 createCanvas(400, 400),這會建立寬高各為 400 的畫布,若沒有呼叫 createCanvas 設置畫布,預設會是 100 x 100 的畫布,background(220) 表示設置畫布背景為灰階 220,等同於 background(220, 220, 220)

background 有多種設置方式,當然其他的函式也有,p5.js 的文件算是寫得不錯,相關細節可查看 API 文件

總之,在 p5.js Web Editor 按下執行按鈕後,只會顯示 400 x 400 的畫布;對於初學者或程式設計領域玩票性質的使用者而言,p5.js Web Editor 是蠻夠用的了,不過對於熟悉前端,或者是對 p5.js 想做更多細節控制的開發者而言,一開始可能會想知道的是,如何單機執行?如何指定畫布的位置?甚至建立多個畫布?

官網的 Download 可以下載 p5.js 程式庫,如果選擇下載 Complete Library 版本,會是個 zip 檔案,其中有 p5.js,這是未壓縮的版本,可用來研究 p5.js 原始碼,將來你想放到網站上時,可以用 p5.min.js,這是壓縮版本,檔案比較小一些。

熟悉前端的開發者應該就知道該怎麼做了,選擇熟悉的編輯器或 IDE 之類,建個 sketch.js,這是你要撰寫的程式檔案,sketch 這名稱是隨意取的,這邊取這名稱,只是承自 Processing 的文化,Processing 將一個原始碼稱為一個 sketch,也就是一個塗鴨。

你的 sketch.js 可以如下撰寫:

const fontSize = 32;
const txt = 'Hello World';
const grayLevel = 220;

function setup() {
    createCanvas(txt.length * fontSize / 2, fontSize);
    background(grayLevel);
    textSize(fontSize);
}

function draw() {
    text(txt, 0, fontSize);
}

textSize 用來設置文字大小,預設為 12,text 可用來繪製文字,繪製起點預設為左上原點 (0, 0),這邊使用 text 的第二、三個參數,設置繪製起點在 (0, fontSize)。

你的 HTML 可以如下撰寫:

<html>
  <body>
    <script src="js/p5.js"></script>
    <script src="js/sketch.js"></script>
  </body>
</html>

這邊將 p5.js 與 sketch.js 放在 js 資料夾中,使用瀏覽器載入這個 HTML,就會看到以下畫面:

p5.js 起步走

p5.js 會自動建立 main 標籤,在其中安排 canvas,例如:

<main>
    <canvas id="defaultCanvas0" class="p5Canvas" width="352" height="64" style="width: 176px; height: 32px;"></canvas>
</main>

現在問題來了,如果想能自行指定畫布位置呢?這下篇文件再來談…