Processing 入門 Lesson 13【キーボード関連の変数と関数】

Processing 入門
Lesson 13
【キーボード関連の変数と関数】

こんにちは、管理人のomoroyaです。

Lesson 12は【マウス関連の変数と関数】ということでマウスのインタラクションについて確認しました。

Lesson 13では、キーボードのインタラクションについて学習します。

インタラクションとはマウスやキーボードの動作をプログラムに伝えることを意味します。

Lesson 13では、キーボード関連の変数と関数について確認していきます。

マウスと同じく遊んでみると面白く、Arduinoとの連携で色々と使えそうな変数、関数となります。

Processing学習の最終目標は、「6軸モーションセンサ」との連携です。

もう少しだけ、地道に構文を理解していきます。

Processingを始めようと考えている方。

ネット情報のみでも十分に学習可能です。

手元に参考書がほしいと考えている場合は下記の2冊程度で十分と考えます。

Processingをはじめよう第2版 (Make: PROJECTS)

オライリージャパン

東京電機大学出版局

はじめに
keyPressed　変数
ｋey　keyCode　変数
keyPressed()　keyTyped() 関数
keyReleased()　関数
まとめ
最後に
Amazonでお得に買う方法

はじめに

本LessonではProcessingのキボード関連の変数と関数を確認していきます。

本Lessonで確認する、変数、関数を表にしました。

変数と関数の違いに注意してください！

変数、関数	内容
keyPressed	キーが1つでも押されていることを認識する。押されると：true そうでない：false
key	最後に押されたキーをあらわす文字
keyCode	最後に押されたキーのキーコード
keyTyped()	キーが押されるたびに呼び出される関数例えばシフトキーとの組み合わせ ※CTRLキーは除く
keyPressed()	キーが押されるたびに呼び出される関数
keyReleased()	キーから指が離れときに呼び出される関数

キーのコードを判定することで、カーソルキー、シフトキーなどの文字に紐付けられていないキーを扱うことができます。

キーコードとして用意されているキーワードは以下。

UP
DOWN
LEFT
RIGHT
ALT
CONTROL
SHIFT

本Lessonでは上記の変数、関数をひとつづつ確認していきます。

keyPressed　変数

keyPressed変数はキーが1つでも押されるていると「true」、そうでなければ「false」を取得する変数です。

このようにProcessingにはあらかじめ決められた変数名があり、それによってマウスの位置や押されているキーボードの文字などを取得することができます。

■keyPressed変数のサンプルスケッチ

キーボードを押している間、ウィンドウの真ん中に□が描画されるサンプルスケッチとなります。

//Lesson 13-1 keyPressed変数　サンプルスケッチ
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  if(keyPressed){
    rect(250, 150, 50, 50);  //四角形描画
  }else{
    background(200);      //背景の色
  }
}

Lesson12で学習したマウスの変数と組み合わせることもできます。

下記は、キボードを押している間、マウスの位置に□を描画するスケッチとなります。

キーボードを押しながらマウスを動かすと□の軌跡が残ります。

//Lesson 13-2 keyPressed変数　サンプルスケッチ
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  if(keyPressed){
    rect(mouseX, mouseY, 50, 50);  //四角形描画
  }else{
    background(200);      //背景の色
  }
}

ｋey　keyCode　変数

「key」と「keyCode」は押されたキーの情報が入っています。

keyは文字。

keyCodeは「UP」「DOWN」「LEFT」「RIGHT」「ALT」「CONTROL」「SHIFT」。

■key変数のサンプルスケッチ

文字が押されたときにif文の判定に従ってコードを実行するスケッチとなります。

r：赤色の□を描画
g：緑色の□を描画
b：青色の□を描画

//Lesson 13-3 key変数 サンプルスケッチ
//https://omoroya.com

char r = 'r';//赤
char g = 'g';//緑
char b = 'b';//青

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  if(keyPressed){
    
    if(key == 'r'){
      rect(250, 150, 50, 50);  //四角形描画
      fill(255, 0, 0);         //赤
    }else if(key == 'g'){
      rect(250, 150, 50, 50);  //四角形描画
      fill(0, 255, 0);         //緑
    }else if(key == 'b'){
      rect(250, 150, 50, 50);  //四角形描画
      fill(0, 0, 255);         //青
    }
    
  }else{
    background(200);           //背景の色
  }
  
}

■keyCode変数のサンプルスケッチ

keyCodeに割り当てられているコードは「UP」「DOWN」「LEFT」「RIGHT」「ALT」「CONTROL」「SHIFT」。

キーコードが押されたときにif文の判定に従ってコードを実行するスケッチとなります。

キーボードの「↑」「↓」「←」「→」を押すことによって□が動くサンプルスケッチです。

//Lesson 13-4 keyCode変数 サンプルスケッチ
//https://omoroya.com

int x = 250;
int y = 150;

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
  fill(255, 0, 0);      //赤色
}

void draw() {
  background(200);      //背景の色
  
  if(keyPressed){
    if(keyCode == UP){
      y -= 2;                   //y座標-2
    }else if(keyCode == DOWN){
      y += 2;                   //y座標+2
    }else if(keyCode == LEFT){
      x -= 2;                   //x座標-2
    }else if(keyCode == RIGHT){
      x += 3;                   //x座標+2
    }
  }
  
  rect(x, y, 50, 50);  //四角形描画
}

keyPressed()　keyTyped() 関数

keyPressed()関数はkeyが押されたときに呼び出される関数。

keyTyped()関数はあるキーの組み合わを認識させることができる関数です。

違いがややこしいです・・・。

このような関数を使うことで、キーボードが押されたときの処理をdraw()関数から切り離すことができます。

マウス、キーボードに関する関数は、値を返さない関数でsetup()、draw()関数と同じくProcessingの標準関数となっています。

注意
キーが押されたときに実行される関数ですが、使っているOSによってキーが押し続けられたときの挙動が異なります。OSによっては押し続けている間、何度も実行される場合があります。

■keyPressed()関数のサンプルスケッチ

キーボードを押したときに何かをさせたい時に使います。

下記のサンプルスケッチは13-3のサンプルスケッチを少しだけ改良したサンプルスケッチです。

keyを押すと描画された□がクリアされます。

//Lesson 13-5 keyPressed()関数 サンプルスケッチ
//https://omoroya.com

char r = 'r';//赤
char g = 'g';//緑
char b = 'b';//青

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  if(keyPressed){
    
    if(key == 'r'){
      rect(250, 150, 50, 50);  //四角形描画
      fill(255, 0, 0);         //赤
    }else if(key == 'g'){
      rect(250, 150, 50, 50);  //四角形描画
      fill(0, 255, 0);         //緑
    }else if(key == 'b'){
      rect(250, 150, 50, 50);  //四角形描画
      fill(0, 0, 255);         //青
    }
    
  }
}

void keyPressed(){
  background(200);      //背景の色
}

■keyTyped()関数のサンプルスケッチ

あるキーの組み合わで何かをさせたい時に使います。

例えば、小文字、大文字の区別などをしたい場合に役に立ちます。

下記は13-5のサンプルスケッチのkeyPressed()をkeyTyped()に変更しただけです。

シフトキーを押しながら「r」「g」「b」のいずれかを押すと画面がクリアされます。

小文字の「g」を押すと緑色の□が描画され大文字「G」を押すとクリアされるということです。

//Lesson 13-6 keyTyped()関数 サンプルスケッチ
//https://omoroya.com

char r = 'r';//赤
char g = 'g';//緑
char b = 'b';//青

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  if(keyPressed){
    
    if(key == 'r'){
      rect(250, 150, 50, 50);  //四角形描画
      fill(255, 0, 0);         //赤
    }else if(key == 'g'){
      rect(250, 150, 50, 50);  //四角形描画
      fill(0, 255, 0);         //緑
    }else if(key == 'b'){
      rect(250, 150, 50, 50);  //四角形描画
      fill(0, 0, 255);         //青
    }
    
  }
}

void keyTyped(){
  background(200);      //背景の色
}

keyReleased()　関数

keyReleased()関数はキーから指が離れたときに呼び出される関数です。

■keyReleased()関数のサンプルスケッチ

キーから指を話した時に何かをさせたい時に使います。

下記のサンプルスケッチはマウスを動かした場所に四角形が描画され四角形の軌跡が残ります。

キーを押して指を離すと背景を元に戻します。

キーから指を離すと画面がクリアされるサンプルスケッチとなります。

//Lesson 13-7 keyReleased() 関数　サンプルスケッチ
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  if(mousePressed){
    rect(mouseX, mouseY, 50, 50); //四角形描画
  }
}

void keyReleased() {              // keyから指が離れたときに呼び出される関数
  background(200);                //背景を元に戻すための処理、図形を消す
}