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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

解決済

1回答

3430閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

0グッド

0クリップ

投稿2017/07/07 12:21

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

Processing

1// Use the included processing code serial library 2import processing.serial.*; 3 4int spos=90; 5int wpos=90; 6 7Serial port; // The serial port 8ArrayList<MyShape> shapes = new ArrayList<MyShape>(); 9 10void setup() { 11 size(720, 720); 12 background(125); 13 frameRate(100); 14 15 println(Serial.list()); // List COM-ports 16 17 //select second com-port from the list 18 port = new Serial(this, Serial.list()[1], 9600); 19 20 //1 21 MyShape ichi; 22 ichi = new MyRect(100, 150, 32, 200); 23 shapes.add(ichi); 24 25 //2 26 MyShape ni; 27 ni = new MyRect(200, 200, 32, 200); 28 shapes.add(ni); 29 ni = new MyRect(300, 200, 32, 200); 30 shapes.add(ni); 31 32 33} 34 35void draw() 36{ 37 update(mouseX, mouseY); 38 rect (310, 310, 100, 100); 39 line(360, 0, 360, 720); 40 line(0, 360, 720, 360); 41 42 //音と形 43 background(102); 44 for (MyShape ichi : shapes) { 45 if (ichi.contains(mouseX, mouseY)) { 46 fill(#CE2828); 47 port.write('a'); 48 } else { 49 fill(204); 50 port.write('b'); 51 } 52 ichi.draw(); 53 } 54 55 for (MyShape ni : shapes) { 56 if (ni.contains(mouseX, mouseY)) { 57 fill(#1318F0); 58 port.write('a'); 59 } else { 60 fill(204); 61 port.write('b'); 62 } 63 ni.draw(); 64 } 65} 66 67void update(int x, int y) 68{ 69 //Calculate servo1 postion from mouseX 70 spos= x/4; 71 72 //Output the servo1 position ( from 0 to 180) 73 port.write("s"+spos); 74 75 //Calculate servo2 postion from mouseY 76 wpos= (y/4)-10; 77 78 //Output the servo2 position ( from 0 to 180) 79 port.write("w"+wpos); 80} 81 82// 長方形を表すクラス 83class MyRect extends MyShape { 84 float x, y, w, h; 85 86 MyRect(float x, float y, float w, float h) { 87 this.x = x; 88 this.y = y; 89 this.w = w; 90 this.h = h; 91 } 92 93 void draw(){ 94 rect(x, y, w, h); 95 } 96 97 boolean contains(float mx, float my) { 98 return mx >= x && mx <= (x + w) && my >= y && my <= (y + h); 99 } 100} 101 102// 任意の図形を表す抽象クラス 103abstract class MyShape { 104 // 画面上へこの図形を描画するメソッド 105 abstract void draw(); 106 107 // 指定位置がこの図形に含まれるかどうか判定するメソッド 108 abstract boolean contains(float x, float y); 109} 110 111

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

diff

1 ... 2 void setup() { 3 ... 4 //1 5 MyShape ichi; 6 ichi = new MyRect(100, 150, 32, 200); 7+ ichi.selectedFill = #CE2828; 8 shapes.add(ichi); 9 10 //2 11 MyShape ni; 12 ni = new MyRect(200, 200, 32, 200); 13+ ni.selectedFill = #1318F0; 14 shapes.add(ni); 15 ni = new MyRect(300, 200, 32, 200); 16+ ni.selectedFill = #1318F0; 17 shapes.add(ni); 18 } 19 20 void draw() 21 { 22 ... 23 24 //音と形 25 background(102); 26- for (MyShape ichi : shapes) { 27+ for (MyShape shape : shapes) { 28- if (ichi.contains(mouseX, mouseY)) { 29+ if (shape.contains(mouseX, mouseY)) { 30- fill(#CE2828); 31+ fill(shape.selectedFill); 32 port.write('a'); 33 } else { 34 fill(204); 35 port.write('b'); 36 } 37- ichi.draw(); 38+ shape.draw(); 39 } 40 41- for (MyShape ni : shapes) { 42- if (ni.contains(mouseX, mouseY)) { 43- fill(#1318F0); 44- port.write('a'); 45- } else { 46- fill(204); 47- port.write('b'); 48- } 49- ni.draw(); 50- } 51 } 52 ... 53 // 任意の図形を表す抽象クラス 54 abstract class MyShape { 55+ int selectedFill; 56 // 画面上へこの図形を描画するメソッド 57 abstract void draw(); 58 ... 59 }

投稿2017/07/07 14:02

KSwordOfHaste

総合スコア18392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/07/07 14:47

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問