コンピュータプログラミングI(6)
キーボード入力

July 13, 2017

Nakajima, Yajima
Iwai, Tatsuta
Kakizaki, Ikeda

このスライドの使い方

テキスト等がはみ出した場合は、フォントサイズを小さくして調整する。 「S」 キーで小さく、「B」 キーで大きくなる。また、 下記のキーボード操作が使用できる。(一部キー操作は IE のみ対応)

「←」 or 「Page Up」 前のスライドに戻る
「→」 or 「Page Down」 or「スペース」 次のスライドに進む
「Home」 and 「End」 先頭(Home)または最後(End)のスライドへ移動
「C」 or 「contents?」 をクリック スライド一覧の表示
「F11」 or 「Ctrl+Shift+F (Win)」, 「Cmd+Shift+F (Mac)」 フルスクリーン表示と通常表示の切り替え
「F」 フッタの表示と非表示の切り替え
「A」 全スライド表示に切替 (印刷時に使う)
「S」「-」/「B」「+」 フォントサイズの大(B) 小(S)

本日のゴール

キーボードからの入力(教科書 pp.73-76)

if (keyPressed == true){
    ... //どれかキーが押されたらここを実行
}

keyPressed:どれかキーが押されていればtrue, 押されていなければfalseが入っているbooleanデータ型の組み込み変数 (Processing側で自動的に用意されている変数)

keyPressed自体がbooleanデータ型であるので,以下のように書くこともできる

if (keyPressed){
    ... //どれかキーが押されたらここを実行
}

練習(6-1)

キーを押すと,線が画面を埋めていくプログラムを書こう

[ サンプル ]

どのキーが押されたか

keyという組み込み変数に押されたキーの文字が自動的に入る

//押されたキーを表示する
void draw(){
    print(key);
}

上記のプログラムでは最後に押されたキーが常に表示されていく.
キーが押されている間だけ表示するには以下のようになる.

//押されたキーを表示する
void draw(){
    if (keyPressed)
    	print(key);
}

どのキーが押されたか(教科書 p.75)

もしキーが押されて,さらに,そのキーがxだったら表示するには?

char charx = 'x';

void draw(){
    if (keyPressed){
        if (key == charx)
        {
    	    print(key);
        }
    }
}

文字を保存するためのcharデータ型変数を作り,そこに文字'x'を保存する. それが押されたキー(key)と等しいか,関係演算子(==)で計算する

charデータ型の変数を作らずにifの()内に直接'x'と書くこともできる.

void draw(){
    if (keyPressed){
        if (key == 'x')
        {
    	    print(key);
        }
    }
}

練習(6-2)

練習(6-1)を改良し,cキーを押すと線が画面を埋めていき,oキーを押すと線が減っていくプログラムを書こう

[ サンプル ]

特殊なキーの検出(教科書 p.76)

キーボードのシフトやコントロール,矢印キーは文字ではない.Processingでは以下の手順で押されたかを検出できる.

//キーボードの左矢印キーが押されたか検出する例
if (keyPressed && key == CODED){ //キーが押され,かつ,キーが特殊キー(CODED)かどうか
	if (keyCode == LEFT){ //押された特殊キーが左矢印キーかどうか
	    ...
	}
}

keyCodeによって検出できる他のキーは以下を参照

http://processing.org/reference/keyCode.html

練習(6-3)

矢印キーで四角を動かそう.四角は画面外に出ないようにすること.

[ サンプル ]

テキストの表示(教科書 p.74)

テキストを表示するにはtextSizeでテキストの大きさを指定し,textで文字を表示する.

//様々なデータ型の値を画面に表示する例
int x = 100;
float pi = 3.14f;
char a = 'a';
String str = "ABC";

size(400, 400);
textSize(16);

background(255, 255, 255);
fill(0, 0, 0);
text(x, 100, 100);
text(pi, 100, 150);
text(a, 100, 200);
text(str, 100, 250);

textは表示するテキストとして,最初の引数に数字や文字のデータ型を指定することができる.

テキストの表示(教科書 p.74)

textでは+演算子を使って様々なデータ型をつなげてテキスト表示することができる

//様々なデータ型をつなげてテキストとして表示する例
int d = 180;
float pi = 3.14f;
String deg = "degrees";
String rad = "radians";

size(400, 200);
textSize(16);

background(255, 255, 255);
fill(0, 0, 0);
text(d + deg + "=" + pi + rad, 100, 100);

練習(6-4)

簡易的なストップウォッチを作ろう

ヒント:プログラムが起動してからの時間はmillis()によりミリ秒単位で得ることができる(教科書 p.102)

[ サンプル ]

演習問題

問題1

壁打ちゲームを作ろう

まずは,ラケットを作る.ラケットは画面下を,キーボード矢印キーで左右に動く.

スケッチ名: Racket
スケッチフォルダ内の.pdeファイルのみを提出

[ サンプル ]

演習問題

問題2

壁打ちゲームを作ろう

ボールを作ろう.ボールは画面四隅のいずれかの壁にぶつかると反射する.

スケッチ名: Ball
スケッチフォルダ内の.pdeファイルのみを提出

[ サンプル ]

演習問題

問題3

壁打ちゲームを完成させよう

前問題のラケットとボールを組み合わせ,ラケットに衝突するとボールをはじくようにしよう
テキスト表示を使用し得点を表示する.
ボールをラケットで跳ね返した場合は+1点,
ラケット背後の壁に当たってしまった場合には0点にする

よりゲームをおもしろくするため独自の要素を加えても良い
例:ボールがだんだん速くなる,ボールがはずむ,などなど

スケッチ名: RacketBall
スケッチフォルダ内の.pdeファイルのみを提出

[ サンプル ]

演習問題

問題3 ヒント

ラケットとボールの衝突判定

あまり厳密な方法ではないが,以下の方法でもよい