b-02 反応させる(マウス、キーボードからの入力に)

2011年10月10日

このエントリーをはてなブックマークに追加

mouseX, mouseY マウスポインタの位置(座標)

現在のマウスポインタの位置に円が描かれる。

ib_4_0

void setup() {
  size(400, 400);
}

void draw() {
  ellipse(mouseX, mouseY, 60, 60);
}

pmouseX, pmouseY 前フレームのマウスポインタの位置(座標)

前フレームのマウスポインタの位置から現フレームのマウスポインタの位置に線が描かれる。(マウスを動かすと、線が描かれるように見える)

1b_4_1

void setup() {
  size(400, 400);
}

void draw() {
  line(mouseX, mouseY, pmouseX, pmouseY);
}

mousePressed マウスボタンが押されている(== true)、押されていない(== false)

マウスボタンを押している間、線が描かれる。

1b_4_2

void setup() {
  size(400, 400);
  strokeWeight(10);
}

void draw() {
  if (mousePressed == true){
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

mousePressed() {...} マウスボタンが押されたときに1回だけ {...} の中を実行する

マウスボタンを押すと、円が描かれる。

1b_4_3

void setup() {
  size(400, 400);
}

void draw() {
}

void mousePressed() {
  ellipse(mouseX, mouseY, 60, 60);
}

mouseReleased() {...} マウスボタンが離されたときに1回だけ {...} の中を実行する

マウスボタンを押している間、線が描かれる。ボタンが離されると線が消える。

void setup() {
  size(400, 400);
  strokeWeight(10);
}

void draw() {
  if (mousePressed == true){
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

void mouseReleased() {
  background(204); //マウスボタンが離されると画面がリセットされる
}

練習:次のような動作をするプログラムを書く

マウスポインタの位置に赤い円が描かれる。マウスボタンを押すと、円の塗り色が変わる。

ib_4_5

マウスボタンを押すと、前回マウスボタンを押した位置からの折れ線が描ける。

ib_4_4

keyPressed キーが押されている(== true)、押されていない(== false)

キーが押されているとき、円が左から右にすすむ

1b_05_1

float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(204);
  if (keyPressed == true) {
    x += speed;
    //println(key);
  }
  ellipse(x, height/2, 60, 60);
}

key 押されたキーの文字や記号を納める変数

キーのa(小文字のエー)が押されているとき、円が左から右にすすむ

float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(204);
  if ((keyPressed == true) && (key == 'a')) {
    x += speed;
  }
  ellipse(x, height/2, 60, 60);
}

※大文字小文字を問わないようにするためには、次のように「aまたはAが押されているとき」で条件を設定する

float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(204);
  if ((keyPressed == true) && ((key == 'a') ||  (key == 'A'))) {
    x += speed;
  }
  ellipse(x, height/2, 60, 60);
}

keyPressed() {...} キーが押されたときに1回だけ {...} の中を実行する

※キーを押しっぱなしにして一定時間経つと、キーの連続入力状態になり、そのスピードに合わせ連続して実行される。

キーが押されると、円が1ピクセルだけ左から右にすすむ

float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
}

void keyPressed() {
  background(204);
  x += speed;
  ellipse(x, height/2, 60, 60);
  //println(key);
}

keyReleased() {...} キーが離されたときに1回だけ {...} の中を実行する

キーが離されると、円が止まる

float x = 0.0;
float speed = 1.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(204);
  x += speed;
  ellipse(x, height/2, 60, 60);
}

void keyReleased() {
  speed = 0.0;
}
このエントリーをはてなブックマークに追加

Archives

以下の記事は、2011年度に筆者が大学での授業で利用していた補足資料です。現在、これらをベースに本ウェブサイトを再構築しています。完了するまで一時的に掲載します。


About

筆者: @mathatelle

ジェネラティブ・アート -Processingによる実践ガイド Processing: A Programming Handbook for Visual Designers and Artists Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (Morgan Kaufmann Series in Computer Graphics and Geometric Modeling) Processingをはじめよう (Make: PROJECTS) Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門 Processing アニメーションプログラミング入門 デザイン言語 Processing入門 - 楽しく学ぶコンピュテーショナルデザイン Processingプログラミング入門―Javaベースのオープンソース統合開発環境 ProcessingでかんたんAndroidプログラミング FORM+CODE -デザイン/アート/建築における、かたちとコード Form+Code in Design, Art, and Architecture (Design Briefs) Generative Art: A Practical Guide Using Processing Generative Gestaltung ビジュアライジング・データ ―Processingによる情報視覚化手法 ARプログラミング—Processingでつくる拡張現実感のレシピ— Arduinoをはじめよう 第2版 (Make:PROJECTS) +GAINER―PHYSICAL COMPUTING WITH GAINER Beyond Interaction ―メディアアートのためのopenFrameworksプログラミング入門 ビューティフルビジュアライゼーション ビジュアル・コンプレキシティ ―情報パターンのマッピング