思索 p5.js 的最佳實踐
本文寫于 2020 年 12 月 18 日
p5.js 是一個 JavaScript 庫，用于為藝術家、設計師提供更容易上手的創意編程，
它有著完整的一套基于 Canvas 的作畫功能，并且你可以把整個瀏覽器都當成你的“畫布”——利用 p5.dom.js 可以很方便地與其他 HTML 元素進行互動；利用 p5.sound.js 可以很簡單的對聲音進行分析與處理，
官網推薦用法
在官網的例子中，推薦使用 <script> 標簽引入的方法：
<html>
<head>
<!-- ...... -->
<script src="https://www.cnblogs.com/xhyccc/p/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="https://www.cnblogs.com/xhyccc/p/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="https://www.cnblogs.com/xhyccc/p/main.ts"></script>
</body>
這時候我們就可以使用 new P5(sketch, document.querySelector('#app')); 來掛載畫布了，
（完）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/237948.html
標籤：JavaScript
下一篇：思索 p5.js 的最佳實踐