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);
}
setup 與 draw 是最常用的兩個回呼函式，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 會自動建立 main 標籤，在其中安排 canvas，例如：
<main>
<canvas id="defaultCanvas0" class="p5Canvas" width="352" height="64" style="width: 176px; height: 32px;"></canvas>
</main>
現在問題來了，如果想能自行指定畫布位置呢？這下篇文件再來談…