ut 魅惑のProcessing / マウスと連携
魅惑のProcessing
このサイトでは Proccessing の魅力を学びながらお伝えします。
はじめてのProcessing
  1. 四角で遊ぶ
  2. アニメーション
  3. マウスと連携

Works
Processing 情報

Processing(英語)
公式サイト。まずはここからダウンロード。

言語リファレンス(英語)
言語リファレンス(日本語)
データ型や演算子、関数の一覧です。

チュートリアル(英語)
チュートリアル(日本語)
Flash,Directorユーザのためのチュートリアルです。

toxi: Processing Works
toxiさんの作品集です。

programming project
中部大学の学生作品です。

vas animatum
Processingの習作がたくさんあります。

www.generative.info
プログラミングによる表現を扱ったサイト。Processing作品もあります。

マウスと連携 - マウスの横方向を知る

Processing ではウインドウ内のマウスの位置を知ることができます。
マウスの位置を知ることで、ユーザの操作に反応するアニメーションが作成できます。
コード 1
void loop ()
{
  background(200);
  triangle(0, height - 1, mouseX, 50, width - 1, height -1);
}
実行すると、マウスの横位置を頂点にした三角形が描かれます。 「mouseX」は現在のマウスのX座標が入っている変数です。 この変数は、はじめから用意されていますので、宣言する必要がありません。 「triangle」は三角形を描く関数で、引数に3つの頂点のXY座標を順に指定します。

マウスと連携 - マウスの位置を知る

「mouseX」があれば、「mouseY」もあります。 このふたつの変数を使って、マウスの位置を知ることができます。
コード 2
void loop ()
{
  background(200);
  triangle(0, height - 1, mouseX, mouseY, width - 1, height -1);
}


マウスと連携 - マウスボタンで変化

マウスボタンの状態で変化をつけることもできます。
コード 3
void loop ()
{
  background(200);
  if (mousePressed)
  { 
    fill(0); 
  }
  else
  { 
    fill(255); 
  } 
  triangle(0, height - 1, mouseX, mouseY, width - 1, height -1);
}
mousePressed はマウスボタンが押されているかどうかの状態が収められている変数です。 2つ以上のボタンがあるマウスの場合は、左ボタンになります。 マウスボタンが押されているときは mousePressed の値が true (真)になり、 離れているときは mousePressed の値が false (偽)になります。 if (mousePressed) は、if (mousePressed == true) と同じで、 マウスボタンが押されている場合に、続くカッコ内の文が実行されます。 else の後の文は、if 内が実行されない場合に実行されます。 ここでは、マウスボタンの状態によって、塗りの色を変化させています。