小狐狸事務所: p5.js 學習筆記 (八) : 動態圖形 (中)

2021年4月30日星期五

p5.js 學習筆記 (八) : 動態圖形 (中)

由於篇幅太長, 用鍵盤控制動態圖形繪製的測試分割在此篇.

本系列之前的文章參考 :

# Processing 的網頁版函式庫 p5.js

# p5.js 學習筆記 (一) : 環境配置

# p5.js 學習筆記 (二) : 基本繪圖 (上)

# p5.js 學習筆記 (三) : 基本繪圖 (中)

# p5.js 學習筆記 (四) : 基本繪圖 (下)

# p5.js 學習筆記 (五) : Javascript 語法摘要

# p5.js 學習筆記 (六) : 重複的圖形

# p5.js 學習筆記 (七) : 動態圖形 (上)

以下測試使用之參考文件 :

# https://p5js.org/reference/ (教學文件)

# https://editor.p5js.org (線上編輯器)

# https://www.w3schools.com/cssref/css_colors.asp (色碼表)

2. 利用鍵盤控制繪圖 :

常用與鍵盤輸入有關的 p5.js 內建變數如下表 :

keyIsPressed	鍵盤按鍵是否有任何鍵被按住 (true/false)
key	鍵盤上最近被按下的按鍵
keyCode	被按下之按鍵之鍵值 (例如 'A' 為 65, 大寫為 CapsLock)

與鍵盤有關的內建函式如下表 :

keyPressed()	鍵盤按鍵被按下時呼叫之函式, 其內容需自訂
keyReleased()	鍵盤按鍵被放開時呼叫之函式, 其內容需自訂
keyTyed()	鍵盤按鍵有被按過時呼叫之函式, 其內容需自訂
keyIsDown(code)	檢查鍵盤碼=code 的按鍵是否被按下 (true/false)

在畫布上顯示所按的鍵也會用到 text() 函式. 只要把內建變數 key 傳給 text() 即可, 設定字型大小則可用 textSize(), 例如 :

測試 2-1 : 在畫布上顯示所按之鍵 (1) [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

function setup() {

createCanvas(200, 100);

background(1, 70, 100);

fill('yellow');

textSize(24);

}

function draw() {

background(1, 70, 100);

text(key, 10, 50); //在畫布座標 (10, 50) 位置顯示最近被按的鍵

}

</script>

</body>

</html>

最近被按的鍵會被存在內建變數 key 裡面, 此例直接將此按鍵顯示於畫布上, 結果如下 :

也可以將程式碼寫在 keyPressed() 或 keyTyped() 中, 這樣 draw() 就不需要內容了, 例如 :

測試 2-2 : 在畫布上顯示所按之鍵 (2) [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

function setup() {

createCanvas(200, 100);

background(1, 70, 100);

fill('yellow');

textSize(24);

}

function keyPressed() { //按下按鍵時被呼叫

background(1, 70, 100);

text(key, 10, 50);

}

function draw() {

}

</script>

</body>

</html>

此例將繪製按鍵的程式碼移到 keyPressed() 函式中, draw() 是空的, 每按下按鍵就會呼叫 keyPressed() 將其鍵之值顯示在畫布中, 結果如下 :

改用 keyTyped() 也是 OK 的, 在下面範例中還加上顯示 keyCode, 例如 :

測試 2-3 : 在畫布上顯示所按之鍵 (3) [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

function setup() {

createCanvas(200, 100);

background(1, 70, 100);

fill('yellow');

textSize(24);

}

function keyTyped() {

background(1, 70, 100);

text(key, 10, 30);

text(keyCode, 10, 50); //顯示按鍵之編碼

}

function draw() {

}

</script>

</body>

</html>

結果如下 :

在官網教學文件中有一個範例是在 text() 中使用 key 與 keyCode 變數, 再用 print() 函式將值嵌入變數中, 例如 :

測試 2-4 : 在畫布上顯示所按之鍵 (4) [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

function setup() {

createCanvas(200, 100);

background(1, 70, 100);

fill('yellow');

textSize(24);

}

function keyTyped() {

background(1, 70, 100);

text(`${key} ${keyCode}`, 0, 50); //嵌入變數

print(key, ' ', keyCode);

}

function draw() {

}

</script>

</body>

</html>

注意, text() 中所嵌入之變數不是一般的單引號, 而是與 ~ 鍵共用的 ` 鍵. 結果如下 :

但這個方式卻不會顯示特殊鍵, why?

按鍵的編碼其實就是 ASCII 碼, 可在下面的網頁中按鍵盤取得按鍵之編碼資料 :

# http://keycode.info/

對於鍵盤上的特殊鍵, p5,js 有為其定義常數來代表其編碼, 如下表所示 :

特殊鍵	說明
BACKSPACE	倒退鍵 (8)
DELETE	刪除鍵 (46)
ENTER	輸入鍵 (13)
RETURN	輸入鍵 (13)
TAB	定位鍵 (9)
ESCAPE	跳脫鍵 (27)
SHIFT	Shift 鍵 (16)
CONTROL	Control 鍵 (17)
CAPSLOCK	大小寫切換鍵 (20)
ALT	Alt 鍵 (18)
UP_ARROW	向上鍵 (38)
DOWN_ARROW	向上鍵 (40)
LEFT_ARROW	向上鍵 (37)
RIGHT_ARROW	向上鍵 (39)

下面範例是利用上下左右鍵來移動原本在畫布中央的圓 :

測試 2-5 : 利用上下左右鍵移動畫布中央的圓 [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

var x=100; //圓心 x 座標

var y=100; //圓心 y 座標

var dx=5; //圓心 x 座標移動量

var dy=5; //圓心 y 座標移動量

function setup() {

createCanvas(200, 200);

background(1, 70, 100);

stroke('yellow');

strokeWeight(3);

fill('cyan');

}

function keyPressed() {

if (keyCode===LEFT_ARROW) {x -= dx;} //按左鍵圓心 x 座標減量

if (keyCode===RIGHT_ARROW) {x += dx;} //按右鍵圓心 x 座標增量

if (keyCode===UP_ARROW) {y -= dy;} //按上鍵圓心 y 座標減量

if (keyCode===DOWN_ARROW) {y += dy;} //按下鍵圓心 y 座標減量

}

function draw() {

background(1, 70, 100);

circle(x, y, 30, 30);

}

</script>

</body>

</html>

此例定義了四個全域變數, (x, y) 是畫布中圓心座標初始值, dx, dy 是每次按上下左右鍵時圓心座標的變化量, 在按這些鍵時會呼叫 keyPressed(), 在此函式中需判斷按下的是上下左右哪一個鍵, 分別用 dx, dy 去調整 x, y 圓心之值, 使原本在畫布心的圓依照按鍵方向移動, 結果如下 :