【p5.js】キー入力を取得してインタラクティブなものを作る:keyIsPressed,keyTyped(),keyIsPressed()

キー入力を取得して、インタラクティブなものを作ります。キーの状態によって処理を変更したり、キーが押されたときの処理の書き方を見ていきます。キー入力を取得できると、キーによる操作ができるようになります。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

keyIsPressed:キーの状態を取得する

キーが押されているかどうかを取得する。ここでは、キーが押されているときに、塗りの色を変更する。

let r = 50;

function setup(){
  createCanvas(200, 200);
  noStroke();
}

function draw(){
  background(127);

  if(keyIsPressed){
    fill('green');
  }else{
    fill('white');
  }

  ellipse(mouseX, mouseY, r, r);
}

特定のキーを押したときの処理

keyTyped():特殊なキーを無視する

• key:通常キーを取得する

let r = 50;

function setup(){
  createCanvas(200, 200);
  noStroke();
}

function draw(){
  background(127);

  if(keyIsPressed){
    fill('green');
  }else{
    fill('white');
  }

  ellipse(mouseX, mouseY, r, r);
}

//通常キーを押したときの処理
//uキーを押すと図形が拡大する
function keyTyped(){
  if(key === 'u'){
    r += 10;
  }
  return false;
}

keyIsPressed():大文字小文字を区別しない

• keyCode:特殊なキーを取得する(altキー、enterキー、 tabキーなど)

let r = 50;

function setup(){
  createCanvas(200, 200);
  noStroke();
}

function draw(){
  background(127);

  if(keyIsPressed){
    fill('green');
  }else{
    fill('white');
  }

  ellipse(mouseX, mouseY, r, r);
}

//特殊なキーを押したときの処理
//上矢印を押すと図形が拡大する
function keyPressed(){
  if(keyCode === UP_ARROW){
    r += 10;
  }
  return false;
}

まとめ

• keyIsPressed:キーの状態を取得する
• keyTyped():特殊なキーを無視する
• keyPressed():大文字小文字を区別しない
• key:通常キーを取得する
• keyCode:特殊なキーを取得する

参考サイト

• p5.js入門 (全14回) - プログラミングならドットインストール