


成都web前端培訓
成都達內金融街中心
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')); 來掛載畫布了。