質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

Processingでカーソルが図形に重なると色が変わるプログラムで、1つ目の図形と2つ目の図形の色を変えたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,085

tenjin

score 259

Processingでカーソルが図形に重なると色が変わるプログラムで、1つ目の図形と2つ目の図形の色を変えようとしています。
以下のコードではどちらも図形2の色になってしまって困っています。

// Use the included processing code serial library
import processing.serial.*;        

int spos=90;
int wpos=90;

Serial port;                         // The serial port
ArrayList<MyShape> shapes = new ArrayList<MyShape>();

void setup() {
  size(720, 720);
  background(125);
  frameRate(100);

  println(Serial.list()); // List COM-ports

  //select second com-port from the list
  port = new Serial(this, Serial.list()[1], 9600); 

  //1
  MyShape ichi;
  ichi = new MyRect(100, 150, 32, 200);
  shapes.add(ichi);

  //2
  MyShape ni;
  ni = new MyRect(200, 200, 32, 200);
  shapes.add(ni);
  ni = new MyRect(300, 200, 32, 200);
  shapes.add(ni);


}

void draw() 
{
  update(mouseX, mouseY); 
  rect (310, 310, 100, 100);
  line(360, 0, 360, 720);
  line(0, 360, 720, 360);

  //音と形
  background(102);
  for (MyShape ichi : shapes) {
    if (ichi.contains(mouseX, mouseY)) {
      fill(#CE2828);
      port.write('a');
    } else {
      fill(204);
      port.write('b');
    }
    ichi.draw();
  }

  for (MyShape ni : shapes) {
    if (ni.contains(mouseX, mouseY)) {
      fill(#1318F0);
      port.write('a');
    } else {
      fill(204);
      port.write('b');
    }
    ni.draw();
  }
}

void update(int x, int y)
{
  //Calculate servo1 postion from mouseX
  spos= x/4;

  //Output the servo1 position ( from 0 to 180)
  port.write("s"+spos); 

  //Calculate servo2 postion from mouseY
  wpos= (y/4)-10;

  //Output the servo2 position ( from 0 to 180)
  port.write("w"+wpos);
}

// 長方形を表すクラス
class MyRect extends MyShape {
  float x, y, w, h;

  MyRect(float x, float y, float w, float h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }

  void draw(){
    rect(x, y, w, h);
  }

  boolean contains(float mx, float my) {
    return mx >= x && mx <= (x + w) && my >= y && my <= (y + h);
  }
}

// 任意の図形を表す抽象クラス
abstract class MyShape {
  // 画面上へこの図形を描画するメソッド
  abstract void draw();

  // 指定位置がこの図形に含まれるかどうか判定するメソッド
  abstract boolean contains(float x, float y);
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

どちらも図形2の色になって

原因はdrawで行っている2つのfor文での処理対象図形がどちらも同じリスト(=shapes)であるためです。shapesには図形1,2の両方が含まれています。よって最初のfor文で図形1だけの色を変えたつもりでも次のfor文を実行すると同じ図形が再び処理対象になり図形2として処理されてしまいます(つまり図形2の色でもう一度描画される)。

対処としては「各々のShapeに選択時の色の情報の属性を追加」し、drawメソッドの中でのfor文は一つにまとめてしまうことです。

以下のコードは変更箇所だけわかるように言語タグをprocessingではなくdiffにしてあります。
先頭に+がある行が追加行
先頭に-がある行は削除行です。

  ...
  void setup() {
    ...
    //1
    MyShape ichi;
    ichi = new MyRect(100, 150, 32, 200);
+   ichi.selectedFill = #CE2828;
    shapes.add(ichi);

    //2
    MyShape ni;
    ni = new MyRect(200, 200, 32, 200);
+   ni.selectedFill = #1318F0;
    shapes.add(ni);
    ni = new MyRect(300, 200, 32, 200);
+   ni.selectedFill = #1318F0;
    shapes.add(ni);
  }

  void draw() 
  {
    ...

    //音と形
    background(102);
-   for (MyShape ichi : shapes) {
+   for (MyShape shape : shapes) {
-     if (ichi.contains(mouseX, mouseY)) {
+     if (shape.contains(mouseX, mouseY)) {
-       fill(#CE2828);
+       fill(shape.selectedFill);
        port.write('a');
      } else {
        fill(204);
        port.write('b');
      }
-     ichi.draw();
+     shape.draw();
    }

-   for (MyShape ni : shapes) {
-     if (ni.contains(mouseX, mouseY)) {
-       fill(#1318F0);
-       port.write('a');
-     } else {
-       fill(204);
-       port.write('b');
-     }
-     ni.draw();
-   }
  }
  ...
  // 任意の図形を表す抽象クラス
  abstract class MyShape {
+   int selectedFill;
    // 画面上へこの図形を描画するメソッド
    abstract void draw();
    ...
  }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/07 23:47

    いつも、わかりやすく勉強になるご回答をありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • Javaに関する質問
  • Processingでカーソルが図形に重なると色が変わるプログラムで、1つ目の図形と2つ目の図形の色を変えたい