2021年4月30日 星期五

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

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


2. 利用鍵盤控制繪圖 : 

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

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


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


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


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



<!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, 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() 就不需要內容了, 例如 :



<!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, 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, 例如 :


<!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, 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() 函式將值嵌入變數中, 例如 :



<!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, 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 碼, 可在下面的網頁中按鍵盤取得按鍵之編碼資料 :


對於鍵盤上的特殊鍵, 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)


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



<!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>
    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 圓心之值, 使原本在畫布心的圓依照按鍵方向移動, 結果如下 :




沒有留言:

張貼留言