プレゼンテーション1

[5日目]キーボードからの情報を使ったコードを書こう！

Study-Gazer(スタディ・ゲイザー)
はじめに
私たちStudy-Gazerは、あくまでも「processing」というツールを通して
読者の皆様が「プログラミングのイメージをつかむこと」や「楽しみながらプログラミングの基礎を学んでいくこと」を目的としています．

１．「キーボードからの情報」を使ってみよう！

　前回やった「mousePressed」や「mouseX ,mouseY」のような
「マウスデバイスからの情報」を使ってコードが書けるように
「キーボードからの情報」を使ってコードを書くこともできます！

int x =460;

void setup(){
 size(900,500);
}

void draw(){
 background(180);
 if(keyPressed){
   x+=3;
 }else{
   x-=1;
 }
 fill(130);
 beginShape();
 vertex(x-300,390);
 vertex(x+290,390);
 vertex(x+280,290);
 vertex(x+200,280);
 vertex(x+180,140);
 vertex(x-280,140);
 endShape(CLOSE);
 fill(90);
 ellipse(x-150,380, 90,90);
 ellipse(x+150,380, 90,90);
 fill(190);
 ellipse(x-150,380, 50,50);
 ellipse(x+150,380, 50,50);
}

このコードでは、キーボードのボタンを
「押しているときは車が後退」し「押していない時は前進」します．

「keyPressed」について
キーボードのボタンが押されているかどうかで変化する変数です．
mousePressedと同様に「押されていると真(true)」になり「そうでない場合は偽(false)」となります．

２．「特定のキー」だけに反応させよう！

上記のコードでは、キーボードのどのボタンを押しても真 (true) に
なりますが、特定のキーだけに反応するようにも設定できます．

int x =460;

void setup(){
size(900,500);
}

void draw(){
background(180);
if(keyPressed){
  if(key=='J' || key=='j'){    //"ではなく'で囲む！
  x+=3;
}else if((key=='f') || (key=='F')){
  x-=1;
}
}
fill(130);
beginShape();
vertex(x-300,390);
vertex(x+290,390);
vertex(x+280,290);
vertex(x+200,280);
vertex(x+180,140);
vertex(x-280,140);
endShape(CLOSE);
fill(90);
ellipse(x-150,380, 90,90);
ellipse(x+150,380, 90,90);
fill(190);
ellipse(x-150,380, 50,50);
ellipse(x+150,380, 50,50);
}

このコードを実行すると「 J または j 」を押したときに前進し、
「 F または f 」を押したときに後退します．
「キー」が押されていない時は動かないようになっています．

また、ここで使われている演算子である
「 | | 」は「または」を表すものです．

「key」について
最後に「押された、または離された」キーの文字や記号が記録される変数です．
key変数のデータ型は「char型 (characterの略)」で「” (ダブルクォーテーション)」ではなく「’ (シングルクォーテーション)」で囲むのが特徴です．

※ASCII文字 (アスキー文字)に含まれている「BACKSPACEキー」
「TABキー」、「ENTERキー」「ESCキー」や「DELETEキー」を入れる場合は、「’  (シングルクォーテーション)」で囲まなくてもOK！

For example：
　　　if (keyPressed) {
　　　　if (key==ENTER) {
　　　　fill (255);
　　　　}
              }

３．「key」では反応しない「特殊キー」

「key」変数では、ASCII文字に含まれていない「特殊キー」を記録することができません．そこで使うのが「keyCode」変数です！

特殊キー：「矢印キー (UP,DOWN,LEFT,RIGHT)」「ALTキー」
「CONTROLキー」「SHIFTキー」など

For example：
　　　if (keyPressed) {
　　　　if (keyCode==SHIFT) {
　　　　fill (255);
　　　　}
              }

※「’(シングルクォーテーション)」で囲まなくてもOK！

４．コードを書いて復習しよう！

では最後に、今日やったことを自分でコードを書くことで復習しましょう！

［練習］次のルールに従って好きなコードを書こう！

ルール
・「keyPressed」を使ったコードを書くこと．
・「void setup」と「void draw」で動きのあるものにすること．
・「key」または「keyCode」を使ったコードを書くこと．

よろしければ、この記事のコメント欄に
そのコードを見せていただけると嬉しいです！
素晴らしい作品は後ほど紹介させていただきます！

ーーーーー

私はこのようなコードを書きました！

int x=0;
int x2=900;

void setup(){
 size(900,500);
}

void draw(){
 background(255);
//左の車 
if(keyPressed){
   if(key=='f'|| key=='F'){
     x+=6;
   }
 }
 fill(130);
 beginShape();
 vertex(x-300,390);
 vertex(x+290,390);
 vertex(x+280,290);
 vertex(x+200,280);
 vertex(x+180,140);
 vertex(x-280,140);
 endShape(CLOSE);
 fill(90);
 ellipse(x-150,380, 90,90);
 ellipse(x+150,380, 90,90);
 fill(190);
 ellipse(x-150,380, 50,50);
 ellipse(x+150,380, 50,50);
//右の車 
if(keyPressed){
   if(key=='j'||key=='J'){
     x2-=6;
   }
 }
 fill(200);
 beginShape();
 vertex(x2+300,390);
 vertex(x2-290,390);
 vertex(x2-280,290);
 vertex(x2-200,280);
 vertex(x2-180,140);
 vertex(x2+280,140);
 endShape(CLOSE);
 fill(90);
 ellipse(x2-150,380, 90,90);
 ellipse(x2+150,380, 90,90);
 fill(190);
 ellipse(x2-150,380, 50,50);
 ellipse(x2+150,380, 50,50);
}

さいごに

今回は「キーボードからの情報」を使ったコードを書くことについて学びました！
「key」変数と「keyCode」変数の特徴をしっかりと覚えておいてください！

今回も見ていただき、ありがとうございました！
これからも一緒に楽しくプログラミングの基礎を学んでいきましょう！

いいなと思ったら応援しよう！