Processing マウスポインターが乗った時に色を変える方法

Processingで円を2つ描き、円の中にマウスポインターが入った時に、円の色が変わるようにする方法を紹介します。

Processingについては初投稿になりますので、まずProcessingについて少し説明します。

Processingとは
完成画面
コード
最後に & 関連書籍

Processingとは

Processingとは、電子アートとビジュアルデザインのためのプログラミング言語です。
難しそうですが、端的に言うと絵を描くことが得意なプログラミング言語です。
絵を描くためのメソッドが豊富に用意されているため、簡単に絵を描くことができます。
ベースはJavaです。
Processingではsketchbook（スケッチブック）と呼ばれるIDEを使用します。

完成画面

今回は以下のものを作っていきます。
灰色の円を2つ描き、その円上にマウスポインターがある時に、円の色を灰色から赤色に変えます。

コード

コードは以下のようになります。
説明用のコメントをコード内に書きたかったのですが、日本語を書くと文字化けしてしまうため書いていません。
なので、もし何か分からないことがあればツイッターまでご連絡ください。

color COLOR_GRAY = #808080;//gray
color COLOR_RED = #ff0000;//red

int DIAMETER = 150;
int positionX1 = 150;
int positionY1 = 200;
int positionX2 = 400;
int positionY2 = 200;

void setup(){
    size(640, 480);
    background(255);
}

void draw(){  
  background(255);
  if(onCircle(positionX1, positionY1) == true){
    fill(COLOR_RED);
  }else{
    fill(COLOR_GRAY);
  }
  ellipse(positionX1, positionY1, DIAMETER, DIAMETER);
  if(onCircle(positionX2, positionY2) == true){
    fill(COLOR_RED);
  }else{
    fill(COLOR_GRAY);
  }
  ellipse(positionX2, positionY2, DIAMETER, DIAMETER);
}

boolean onCircle(int posX, int posY){
    if(dist(posX, posY, mouseX, mouseY) <= DIAMETER / 2){
        return true;
    }else{
        return false;
    }
}