今天在 blogger 中發現前年 (2018/12/6) 未寫完的 p5.js 函式庫的草稿, 花了點時間整理完後, 覺得這個開源專案很有趣, 有很多玩家是藝術界人士, 他們並非網頁或 IT 技術背景出身, 但卻能用 p5.js 開發出令人讚嘆的作品, 可見 p5.js 是一個非常容易上手的網頁多媒體互動工具, 所以今天打鐵趁熱, 繼續來測試.
p5.js 好用好學的原因是開發者將許多 Javascript 與繪圖所需的物理數學細節都封裝在好用的函式中, 只要用文字編輯軟體開啟一個載入 p5.js 函式庫的網頁檔, 撰寫 Javascript 程式碼呼叫 p5.js 的函式即可在網頁上製作圖像, 動畫, 以及互動應用程式, 成果發布到網站就可以讓全世界的人用瀏覽器觀賞, 不須安裝任何製作軟體.
1. 下載 p5.js 函式庫 :
如果要在本機環境下測試 p5.js, 需到官網下載 p5.js 函式庫 :
在下載頁底下按中間的 "p5.min.js" 鈕下載壓縮後的函式庫 (約 795 KB), 若要研究或改寫原始碼也可下載左邊未壓縮的 p5.js (約 4.2 MB) :
將下載的 p5.min.js 放在工作目錄下, 然後開啟文字編輯器 (記事本, EditPlus 或 NotePad++), 建立如下測試網頁模板, 與 p5.min,js 同樣存放於工作目錄下 (用 utf-8 編碼存檔) :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>p5.js test</title>
<script src="p5.min.js"></script>
</head>
<body>
<script>
function setup() { //只執行一次
createCanvas(400, 300); //(x, y)
}
function draw() { //迴圈函式, 預設每秒執行 60 次
background(200, 200, 200); //(R, G, B)
}
</script>
</body>
</html>
此處內嵌於網頁中的兩個 Javascript 函式就是 p5.js 的繪圖函式, 其中 setup() 只會執行一次, 而 draw() 則會被 p5.js 以預設每秒 60 次的頻率持續被呼叫, 也是 p5.js 最主要的繪圖程式, 這與 Arduino 的 setup() 與 loop() 功能是一樣的.
此模板網頁的 setup() 函式中呼叫 p5.js 的 createCanvas() 函式在網頁中建立一個 400px*300px 大小的畫布, 然後進入 draw() 迴圈呼叫 background() 函式將畫布背景顏色設為 (R, G, B)=(200, 200, 200), 其中 R/G/B 為三原色色碼, 範圍為 0~255. 將此模板存檔為 p5.js_template_1.htm, 以瀏覽器開啟結果如下 :
//sketch.js
function setup() { //只執行一次
createCanvas(400, 300); //(x, y)
}
function draw() { //迴圈函式, 預設每秒執行 60 次
background(200, 200, 200); //(R, G, B)
}
這時網頁要修改為 :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>p5.js test</title>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
結果與上面是一樣的.
2. 使用 CDN 提供的函式庫 :
如果網頁是要放在公開的伺服器上, 則可以直接使用 CDN 網站所提供的 p5.js 函式庫, 這樣就不需要下載函式庫自備, 按下載網頁右邊的 "CDN" 按鈕會顯示函式庫的 CDN 網址 :
通常使用 p5.min.js, 按右邊的鍊條複製其 URL :
然後修改上面的模板網頁, 用此 URL 替換 script 標籤中的 src 屬性值 :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>p5.js test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(400, 300);
}
function draw() {
background(200, 200, 200);
}
</script>
</body>
</html>
將此網頁以 utf-8 編碼存檔為 p5.js_template_cdn.htm, 然後用瀏覽器開啟就可以看到與上面相同的網頁. 也可以上傳到伺服器, 例如 GitHub 的個人網站上, 例如 :
測試 1 : p5.js 的 CDN 模板網頁 [看原始碼]
3. 使用 p5.js 線上編輯器 :
如果只是測試學習, 最方便的工具是 p5.js 官網提供線上編輯器, 其網址為 :
線上編輯器使用網頁與程式分開的結構, 左上角編輯框用來編輯名為 sketch.js 的 Javascript 程式, 預設已經打上 setup() 與 draw() 兩個函式, 直接在此兩函式內輸入程式碼, 然後按 Play 鍵就能在右方的 preview 預覽區看到效果.
按預覽區右上方的 Signup 鈕加入會員可自訂編輯器屬性 (例如布景, 字型大小等), 也可將程式儲存在雲端 :
也可以將自己的 sketch 程式分享 (按 share), 例如下面這個可用滑鼠操控頻率的範例 :
下面範例修改自官方教學文件 :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>p5.js test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(200, 200, WEBGL);
}
function draw() {
background(0);
noFill();
stroke(100, 100, 240);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(90, 90, 90);
}
</script>
</body>
</html>
結果如下 :
沒有留言 :
張貼留言