マウスで図形をうごかすプログラムを作っていきます。

まずは書いてみる

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

void draw()
{
  circle(mouseX, mouseY, 10);
}

マウスを動かしてみて下さい。マウスの位置を中心とした円が次々と描かれてゆきます。

Processing では、mouseX と mouseY を使うと、マウスの現在位置を知ることができます。この mouseX と mouseY の ”X” と ” Y ” は大文字です。Processing では、大文字と小文字は区別されるので、大文字と小文字の違いに注意してください。

このプログラムに、背景色で塗りつぶす関数 background() も追加してみます。

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

void draw()
{
  background(128, 255, 255);
  circle(mouseX, mouseY, 100);
}

プログラムの構造

Processing プログラムの構造は次の通りです。

void setup() { }：{ } の中に書かれたプログラムは、最初に一度だけ実行されます。 void draw() { }：{ } の中に書かれたプログラムは、繰り返し実行されます。

上記の例は、最初に size() でウィンドウの大きさを指定しています。

そして、繰り返し部分で、

（１）背景色で塗りつぶす background() （２）マウスの位置に円を描く circle()

をくりかえしています。

ウィンドウの大きさのように、最初に一度だけ設定すれば良いものを setup() { } の中に書くのが、Processingの流儀です。