【Processing】円を2つ描き、マウスポインターが乗った時に色が変わるようにする

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;
    }
}

コメント

タイトルとURLをコピーしました