Processingにおけるキー入力の例 - 元Webデザイナー兼コーダーの備忘録

「The Nature of Code」からキー入力について取り上げます。キーが押されたら何かしらの動作をさせます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。

キー入力の例:移動
キー入力の例:回転
まとめ
参考書籍

本記事の参考書籍は以下です。

キー入力の例:移動

以下は、キー入力の参考例です。

左矢印キーが押されたらオブジェクトを左に移動し、右矢印キーが押されたらオブジェクトを右に移動します。

class Mover{
  PVector position;

  //コンストラクタ
  Mover(){
    position = new PVector(width/2, height/2);
  }

  //ウィンドウから外れたときの処理
  void checkEdges(){
    if(position.x > width){
      position.x = 0;
    }else if(position.x < 0){
      position.x = width;
    }
  }

  //移動
  void move(float v){
    position.add(v, 0);
    println(position.x + ", " + position.y);
  }

  //オブジェクトの描画
  void display(){
    stroke(0);
    strokeWeight(2);
    fill(127);
    rectMode(CENTER);
    rect(position.x, position.y, 20, 20);
  }
}

//キー入力の例:移動
Mover m;

void setup(){
  m = new Mover();
  size(200, 200);
}

void draw(){
  background(255);
  m.checkEdges();
  m.display();

  //キー入力で左右に移動
  if(keyPressed){
    //左矢印キーが入力されたら、オブジェクトを左に移動する
    if(key == CODED && keyCode == LEFT){
      m.move(-1.0);
    }else if(key == CODED && keyCode == RIGHT){  //右矢印キーが入力されたら、オブジェクトを右に移動する
      m.move(1.0);
    }
  }
}

プログラムを実行して確認することをおすすめします。

キー入力の例:回転

以下は、キー入力の参考例です。

左矢印キーが押されたらオブジェクトを反時計回りに回転し、右矢印キーが押されたらオブジェクトを時計回りに回転します。

class Mover{
  PVector position;
  float heading = 0;

  //コンストラクタ
  Mover(){
    position = new PVector(width/2, height/2);
  }

  //回転する角度(傾き)
  void turn(float a){
    heading += a;
  }

  //オブジェクトの描画
  void display(){
    stroke(0);
    strokeWeight(2);
    fill(127);
    rectMode(CENTER);
    translate(position.x, position.y);

    rotate(heading);
    rect(0, 0, 20, 40);
  }
}

//キー入力の例:回転
Mover m;

void setup(){
  m = new Mover();
  size(200, 200);
}

void draw(){
  background(255);
  m.display();

  //キー入力で時計回り、反時計回りに回転する
  if(keyPressed){
    //左矢印キーが入力されたら、オブジェクトを反時計回りに回転する
    if(key == CODED && keyCode == LEFT){
      m.turn(-0.03);
    }else if(key == CODED && keyCode == RIGHT){  //右矢印キーが入力されたら、オブジェクトを時計回りに回転する
      m.turn(0.03);
    }
  }
}