１０．キーボードで図形を動かそう
１．keyPressed()関数
keyPressed（キープレスド）関数 を使うと、キーが押されたときに行う命令を書けます。これを使って、キーを押すと円が左右に動くプログラムを作ります。
まず円を描く
円が真ん中に表示されます。まだ動きません。
void setup(){ size(600,400);}
void draw(){ background(0); ellipse(300,200,100,100);}
変数を加える
この円を左右に動かしたいので、X座標を変えられるようにしなければなりません。そこで 変数（へんすう） を使います。ellipseのX座標の300を変数xに置き換えます。
float x = 300;
void setup(){ size(600,400);}
void draw(){ background(0); ellipse(x,200,100,100);}float x = 300 というのは、 float（フロート） という種類の変数xを作って、そこに300を代入したということです。 ellipse(x,200,100,100); のxが300ということになります。
keyPressed()関数を追加する
次に、keyPressed()関数を追加して、キーボードの dキー と aキー で変数xの大きさを変えるようにします。変数xを大きくすれば右に動き、変数xを小さくすれば左に動きます。
float x = 300;
void setup(){ size(600,400);}
void draw(){ background(0); ellipse(x,200,100,100);}
void keyPressed(){ if(key == 'd'){ x += 10; } if(key == 'a'){ x -= 10; }}keyPressedの関数の部分をよく見てみます。
// if文 if(key == 'd'){ x += 10; }if（イフ）文 で key（キー） がdかどうかを調べています。'd'のように、 ’’（クオート） で囲まなければならないことに注意してください。 x += 10 で、xの値を10増やしています。
もう一つのif文では、aが押されたときに逆にxの値を10減らしています。
矢印キーを使いたい場合
矢印キーやシフトキーは特殊なキーなので、 key では判定することができません。そこで、 keyCode （キーコード）を使います。keyCodeの場合、 LEFT や RIGHT というようにクオートで囲みません。
// 右矢印の判定void keyPressed(){ if(keyCode == RIGHT){ x += 10; }}| keyCode | 読み方 | 意味 |
|---|---|---|
| LEFT | レフト | ←左矢印 |
| RIGHT | ライト | →右矢印 |
| UP | アップ | ↑上矢印 |
| DOWN | ダウン | ↓下矢印 |
２．（応用）キーでスムーズに図形を動かす方法
これまでの方法は簡単ではありますが、キーを押すとちょっとだけ動いて押し続けているとしばらくしてから急に連続的に動く、というぎこちない動きになります。また、左右のキーを同時に押してしまった場合、思わぬ動きになることがあります。
スムーズに動くようにするには、 keyPressed（キープレスド）関数 だけでなく、 keyReleased（キーリリースド）関数 も使うと実現できます。この方法なら、急に反転させた場合や、キーの同時押しをしてしまった場合でも、違和感なく動作します。下記のページを参照してください。