成都web培訓：思索p5.js的最佳實踐

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 以及環境搭建

官網下載 Node.js，一路默認選項安裝;

下載 VSCode，他為我們提供了完善的代碼提示支持;

新建項目文件夾，命名;

將文件夾拖入 VSCode;

點擊 VSCode 菜單欄的“終端”或是“Terminal”選項，選擇新建終端;

終端內輸入：npm config set registry https://registry.npm.taobao.org && pm 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 && pm 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')); 來掛載畫布了。