読者です 読者をやめる 読者になる 読者になる

Shiho's engineering blog

誰でもみれるノートのようなもの

Processing入門 ③キーボードやマウスから値を受け取って操作する、画像を表示してフィルターをかける、合成する

キーボードとマウス

キーボードのアクションといったイベントにトリガーさせられる。

  • keyPressed() :キーが1つでも押されているとtrue。

  • key: 最後に押されたキーを表す文字

  • keyTyped(): キーが押されるたびに呼び出される関数 (CTRLキー等は除く)
  • keyReleased(): キーから指が離れたときに呼び出される関数
  • keyCode: 最後に押されたキーのキーコード

keyCodeなんのこっちゃと言う感じだが、

ASCII 文字と非 ASCII 文字 (矢印キーなど) のことで、前者はコード化されませんが、後者(非 ASCII 文字)の場合はコード化が必要です。コード化された文字に対しては、Processing は key 変数を CODED トークンに設定することによって、keyCode というもう 1 つの特殊な変数を調べるように指示します。 

Processing によるデータ視覚化: 第 2 回 インターフェース、オブジェクト、画像、そしてアプリケーションを使用した、より高度なデータ視覚化

らしい。

キーコードを判定することで、カーソルキーやシフトキーのように、文字に紐付けられていないキーを扱うことができる。キーワードとしてUP、DOWN、LEFT、RIGHT、ALT、CONTROL、SHIFTが用意されている。

void keyPressed()
{
  if (key == CODED) {
    if (keyCode == DOWN) println("Key pressed: Down arrow");
    if (keyCode == SHIFT) println("Key pressed: Shift key");
  } else {
    println("Key pressed: " + key );
  }
}

processingのコンソールみたいなところに表示される。 shiftのkeyCodeは16であることがわかった。 これがわかれば、UPを押したらy座標を上げるプログラムとかゲームっぽいものが作れる。

f:id:serendipity4u:20170129143616p:plain

マウスイベントの関数

  • mousePressed
  • mouseReleased
  • mouseMoved
  • mouseDragged

mouseX および mouseY 変数にはマウスの現在の位置が取り込まれます。マウスが移動する前の位置を (前のフレームから) 取り込むには、 pmouseX 変数 pmouseY 変数を使用します。

画像の使用

  • Processing は、filter 関数を介して、あらかじめ用意されている画像処理機能を提供します。この filter 関数は、フィルターのモードを直接ディスプレイ・ウィンドウに適用する関数です
PImage img1;

void setup(){
  img1 = loadImage("images/woman.jpeg");
  size(1000,600);
  smooth();
  frameRate(1000);

void draw() {
image(img1, 0, 0);
filter(GRAY);
}

これでグレースケールに画像を変更できた。

画像を合成する

合成する画像 (img2) を最初に指定し、その後に合成する画像 (img2) の x 座標、y 座標、幅、高さといった4つのパラメータを設定する。 さらに、合成先の画像 (img1) の左上隅の x 座標、y 座標、幅、高さのパラメーターを続ける。そして最後に定義するのが、モード・パラメーター。

  img1.blend( img2, 0, 0, img1.width, img1.height, 0, 0, img1.width, img1.height, ADD );

f:id:serendipity4u:20170122201524j:plainf:id:serendipity4u:20170129151443j:plain を合成して

f:id:serendipity4u:20170129151417p:plain

ができた。

参考

Processing によるデータ視覚化: 第 2 回 インターフェース、オブジェクト、画像、そしてアプリケーションを使用した、より高度なデータ視覚化Processingクイックリファレンス