元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【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);
}
f:id:shiroyuki2020:20210427224935g:plain

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

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;
}
f:id:shiroyuki2020:20210427224950g:plain

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:特殊なキーを取得する

参考サイト