思索 p5.js 的最佳實踐
本文寫於 2020 年 12 月 18 日
p5.js 是一個 JavaScript 庫，用於為藝術家、設計師提供更容易上手的創意編程。
它有着完整的一套基於 Canvas 的作畫功能，並且你可以把整個瀏覽器都當成你的“畫布”——利用 p5.dom.js 可以很方便地與其他 HTML 元素進行交互；利用 p5.sound.js 可以很簡單的對聲音進行分析與處理。
官網推薦用法
在官網的例子中，推薦使用 <script> 標簽引入的方法：
<html>
<head>
<!-- ...... -->
<script src="path/to/your/p5.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(300, 500);
}
function draw() {}
</script>
</body>
</html>
這樣是讓所有的變量、函數都暴露在全局之下，所以我們可以直接使用 setup, draw 函數進行操作。
但這對於新手來說，這樣的做法存在一個致命問題：沒有代碼提示。並且也不符合我們現代 Web 開發的習慣——模塊化。
在動畫復雜的情況下，代碼會越來越多、越來越邋遢，直到成為一座“屎山”！！！
所以這讓我不由得思考起了 p5.js 的最佳實踐究竟該如何。
關於最佳實踐的思考
p5.js 擁有多個生命周期函數：
- 用於預加載數據的
preload函數； - 在最開始執行，並且只執行一次的
setup函數； - 一秒執行大概 20 多次的
draw函數； - 鼠標左鍵點擊時觸發的
mousePressed函數； - ……
p5 畫圖的根本其實就是在不同生命周期里對數據進行操作，然后將數據具體轉化為圖像。
所以按照 MVC 的思想：view = render(data)，我們應該拒絕在這些鈎子函數中「直接」操作數據——將動畫抽象成為獨立的 Service（服務），操作數據交給 Service 自己的方法，我們只需要在 draw 函數中對 Service 內的數據進行繪制即可。
這樣講可能大家還不太明白，那么 talk is cheap, show me the code 吧！
運用 OOP 與 SOA 解耦項目
接下來我們通過一個例子看看如何對項目進行解耦。
要求：了解面向對象的編程。
目標：制作一個漫天繁星。
step1 創建 Star 類
第一步我們需要一個 Star 類。
class 星星 {
x坐標 = 0;
y坐標 = 0;
透明度 = 0;
隨機放置星星() {
// 隨機 x y 坐標值
}
閃爍() {
// 操作透明度
}
}
step2 創建 Service
然后再為所有的星星閃爍制作一個服務，這個服務用來管理所有的星星（服務其實就是一個 class）。
class 星星服務 {
星星們 = [];
get 星星的位置() {
this.星星們.處理一下((星星) => {
返回 {
x: 星星的x坐標,
y: y坐標,
opacity: 透明度,
}
})
}
創建星星們() {
重復 100 次：this.星星們.增加(new 星星());
}
}
step3 寫入 p5
let 星星服務實例;
function preload() {
星星服務實例 = new 星星服務class();
}
function setup() {
星星服務實例.創建星星們();
}
function draw() {
background(0);
if (星星服務實例.星星們 的 長度 > 0) {
星星服務實例.星星的位置.遍歷((星星) => {
fill(255, 星星.透明度);
ellipse(星星.x, 星星.y, 半徑, 半徑);
})
}
}
目前動畫比較簡單，還看不出來該方案有什么優勢。但是一旦動畫更加復雜，該方案對原來寫法的解耦的優越性將會是毋庸置疑的。
我們僅僅需要的是在不同的生命周期函數中調用服務的方法，然后在 draw 函數中拿到數據后進行繪圖！
ts-p5 以及環境搭建
我封裝了一個庫，可以提供比較好的 p5 代碼補全：https://github.com/AerospaceXu/ts-p5。
考慮到使用 p5 的初學者較多，還是說一下如何搭建一個前端項目吧。
完整版本會寫在最后一節，這里只提供可運行的步驟。
-
官網下載 Node.js，一路默認選項安裝；
-
下載 VSCode，他為我們提供了完善的代碼提示支持；
-
新建項目文件夾，命名；
-
將文件夾拖入 VSCode；
-
點擊 VSCode 菜單欄的“終端”或是“Terminal”選項，選擇新建終端；
-
終端內輸入：
npm config set registry https://registry.npm.taobao.org && npm init -y && npm i ts-p5 && npm i -D parcel-bundler； -
此時文件夾內出現了
package.json與package-lock.json文件，打開前者； -
在第一行大括號的末尾回車，輸入：
{ // 在這里回車 "scripts": { "start": "./node_modules/.bin/parcel ./src/index.html --no-cache", "build": "./node_modules/.bin/parcel build ./src/index.html --no-cache -d build" }, // ...... -
新建 src 文件夾，讓你的目錄看起來是這樣：
- 你的文件夾名稱 - node_modules - package.json - package-lock.json - src - index.html - style.css - main.js -
只需要在 index.html 中引入 main.js 和 style.css；
-
在 index.html 中寫入以下代碼：
<body> <div id="sketch"></div> <script src="./main.js"></script> </body> -
在 main.js 中寫入以下代碼：
import { sketchCreator } from 'ts-p5'; import { getWindowSize } from 'ts-p5/utils'; sketchCreator( { preload: function () {}, setup: function (p) { const { width, height } = getWindowSize(); p.createCanvas(width, height); p.background(0); }, draw: function (p) { p.background(0); p.noStroke(); }, mousePressed: function (p) { console.log(p.mouseX); console.log(p.mouseY); }, }, document.querySelector('#sketch') );
然后在終端輸入 npm run start，待顯示
Server running at http://localhost:1234
✨ Built in xxxx.
之后，方可打開瀏覽器輸入剛剛輸出的網址。
觀察到一片漆黑，就完成了。
之后如果需要使用到 p5 的函數或者是變量，輸入 p. 就會自動彈出代碼提示了（不要忘記在函數參數傳入 p 哦）。
為代碼添加提示完整版（初學者向）
為了給 p5 增加代碼提示，我們不可以使用官網推薦的方式。需要利用 TypeScript 進行模塊化的項目構建（會的同學，或者不需要代碼提示的同學可以直接跳過這一節）。
這里需要安裝一下 Node.js，直接官網下載即可。
以下步驟僅限 Linux 與 MacOS 平台，Windows 不保證可以這么操作！！！
step1 初始化項目
新建一個文件夾，將文件夾拖入 VSCode 打開，切換至英文輸入法，同時按下 control + ~ 就可以開啟終端。
在終端輸入 npm config set registry https://registry.npm.taobao.org && npm init -y && npm i p5 && npm i -D typescript @types/p5 parcel-bundler && ./node_modules/.bin/tsc --init 請初學者直接復制粘貼並且回車，不要嘗試自己輸入。
這時候可以發現我們的文件夾里出現了幾個文件，並且他們全都不需要你去關心。
- 你的文件夾名稱
- node_modules
- tsconfig.json
- package.json
- package-lock.json
打開 package.json 文件，應該長這樣：
{
"name": "你的文件夾名稱",
.....
}
step2 創建啟動腳本
我們在第二行插入一些東西（一樣請直接復制，不要嘗試自己打）：
{
"scripts": {
"start": "./node_modules/.bin/parcel ./src/index.html --no-cache",
"build": "./node_modules/.bin/parcel build ./src/index.html --no-cache -d build"
},
"name": "你的文件夾名稱",
.....
}
step3 創建 HTML 文件
接着我們建立 src 文件夾，並在其中新建我們的 HTML / CSS 文件：
- 你的文件夾名稱
- node_modules
- tsconfig.json
- package.json
- package-lock.json
- src
- index.html
- style.css
src 是之后我們唯一需要關注的文件夾。
step4 啟動項目
照常的寫你的代碼，和之前沒有任何區別。然后隨便在 HTML 中輸入一些標簽和字符，在終端中輸入：npm run start 並等待一會兒，待顯示出
Server running at http://localhost:1234
✨ Built in xxxx.
之后，方可打開瀏覽器，輸入他輸出的網址。
此時顯示了你剛剛在 HTML 中寫的文字即是成功了。
step5 創建 TypeScript 文件
首先在 src 中創建 main.ts 文件，並在 html 中引入。
- src
- index.html
- style.css
- main.ts
因為 p5 的特殊性質，所以無法在 js 文件中提供完整的代碼提示，必須使用 typescript。
step6 書寫 p5
翻看 p5 的源代碼我們發現，p5 本身是一個構造函數，接受兩個參數，第一個是一個函數，函數接受一個參數，我們可以通過這個參數實現代碼提示：
// main.ts
import P5 from 'p5';
const sketch = (p: P5) => {
p.setup = () => {
p.background(0);
};
p.draw = () => {
p.background(0);
p.fill(255);
p.ellipse(0, 0, 25, 25);
};
};
p5 的第二個參數是一個 HTML 元素，意思是我們可以將畫布放到這個元素中去。
// index.html
<body>
<div id="app"></div>
<script src="./main.ts"></script>
</body>
這時候我們就可以使用 new P5(sketch, document.querySelector('#app')); 來掛載畫布了。
（完）