画面上をクリックするとクリックした場所に円が表示され、もう一回クリックするとまた円が表示され、それと

画面上をクリックするとクリックした場所に円が表示され、もう一回クリックするとまた円が表示され、それと同時にその二つの円を結ぶ線が表示させる。そしてもう一回クリックすると３つ目の円と二つ目の円、一つ目の円に線が引かれるというようにどんどん円を追加するとそれまでに追加された全ての円を結ぶ線が引かれるというプログラムを作りたいのですが、どのようにすれば良いのかわかりません。また、線を引くときに元々引かれていた線と交差するところは線が引かれないようにもしたいです。円と線それぞれにクラスをつくって、また、円と線それぞれがArrayListに追加されるようにもしたいのですが、どのようなプログラムにすればいいかわかりません。教えて下さい。ちなみにprocessingでお願いします。

No.1 回答者： cametan_42 回答日時： 2020/10/24 18:47

こういう質問はダメなんですよ。

「仕様がハッキリしていない」。説明としては足りなくて全然ダメです。

> クリックした場所に円が表示され

例えば、その円の「大きさ」はどうするのか、全く定義されていません。
貴方が分かってるだけでこれじゃあ誰も分からない。
当然、コンピュータ(Processing)も理解出来ません。

> その二つの円を結ぶ線が表示させる。

これも全然ダメですね。「結ぶ線」って何でしょうか。円の接線?あるいは中心同士を結ぶ?
マイ定義じゃあ全然ダメなのですよ。
「誰でも読んで理解出来る」ように書いたモノを仕様、と呼びます。こういう仕様が不確かなモノは人間が読んでも混乱するだけ、です。コンピュータなら尚更ですね。
まずキチンとした仕様を確定させましょう。それがプログラミングの第一歩なのです。

ちなみに、クリックして円を表示させるコード自体は次のページで紹介されています。

mousePressed() {...} マウスボタンが押されたときに1回だけ {...} の中を実行する:
https://www.d-improvement.jp/learning/processing …

この回答へのお礼

説明が足りずすいません。sizeは(800,800)で円の大きさは直径15です。また二つの円を結ぶ線とは円の中心と中心を結ぶ線です。

お礼日時：2020/10/24 19:57

No.2 回答者： cametan_42 回答日時： 2020/10/24 21:46

> 説明が足りずすいません。

sizeは(800,800)で円の大きさは直径15です。また二つの円を結ぶ線とは円の中心と中心を結ぶ線です。

そうですか。

あと、

> また、線を引くときに元々引かれていた線と交差するところは線が引かれないようにもしたいです。

ってのも良く分からんのですがねぇ。

僕自身は全然Processing詳しくないんですが、基本的なコードは次のようになるんじゃないですか?

// ここから

FloatList xs = new FloatList();
FloatList ys = new FloatList();
int i = 0;

void setup() {
　size(800, 800);
}

void draw() {
}

void mousePressed() {
　float x = mouseX;
　float y = mouseY;
　ellipse(x, y, 15, 15);
　if (xs.size() > 0 && ys.size() > 0) {
　　line(xs.get(i-1), ys.get(i-1), x, y);
　}
　xs.append(x);
　ys.append(y);
　i++;
}

この回答へのお礼

コードを書いていただき、ありがとうございます。これだと例えば3回違うところにクリックすると全て一直線になると思うのですが、そうではなく2回クリックしたら1回目にクリックしたところと2回目にクリックしたところに線が引かれて、3回目にクリックしたらその場所に1回目にクリックしたところと2回目にクリックしたところから同時に線が引かれて三角形ができる（ある場所にクリックしたら今までクリックしたところから線が引かれる）というようにしたいのですが、どのようにすれば良いのでしょうか…

お礼日時：2020/10/24 22:41

No.3 回答者： cametan_42 回答日時： 2020/10/24 23:35

> これだと例えば3回違うところにクリックすると全て一直線になると思うのです

なりませんよ。折れ線にはなるでしょうが(折れ線は一直線ではない)。

あれ、自身のPCにProcessingインストールして試してないんですか?

> これだと例えば3回違うところにクリックすると全て一直線になると思うのですが、そうではなく2回クリックしたら1回目にクリックしたところと2回目にクリックしたところに線が引かれて、3回目にクリックしたらその場所に1回目にクリックしたところと2回目にクリックしたところから同時に線が引かれて三角形ができる（ある場所にクリックしたら今までクリックしたところから線が引かれる）というようにしたい

と言う事は、4点作れば線が6本になる、5点作れば線が10本、でいいんですか?

No.4 回答者： cametan_42 回答日時： 2020/10/24 23:44

例えば、対角線を考慮して、頂点がn個ある場合、

n + n*(n-3)/2

本の線を引きたい、と言うのなら、基本的には次のようなコードになるでしょう。

// ここから

FloatList xs = new FloatList();
FloatList ys = new FloatList();
int i = 0;

void setup() {
　size(800, 800);
}

void draw() {
}

void mousePressed() {
　int k;
　float x = mouseX;
　float y = mouseY;
　ellipse(x, y, 15, 15);
　if (xs.size() > 0 && ys.size() > 0) {
　　for (k = 0; k < i; k++) { // ここの描画ルーティンを改造する
　　　line(xs.get(k), ys.get(k), x, y);
　　}
　}
　xs.append(x);
　ys.append(y);
　i++;
}

この回答へのお礼

ありがとうございます。ほとんどそんな感じです。ただ、3回クリックするまでは確実に線と線は交わらないのですが、4回目にクリックすると1点だけ線と線がクロスしてしまうと思うのですが、もし今までクリックしたところから線が引かれる時に他の線と交わってしまうのであれば新しく引かれる線は引かれないというようにしたいです…４回クリックすると線は５本、５回クリックしたら７本（書いていただいたプログラムだと５回目は新たに４本引かれると思うのですが、そのうち２本は他の線と交わってしまうので引かない）というようにしたいです…

お礼日時：2020/10/25 00:30

No.5 ベストアンサー 回答者： cametan_42 回答日時： 2020/10/25 01:10

> ただ、3回クリックするまでは確実に線と線は交わらないのですが、4回目にクリックすると1点だけ線と線がクロスしてしまうと思うのですが、もし今までクリックしたところから線が引かれる時に他の線と交わってしまうのであれば新しく引かれる線は引かれないというようにしたいです…４回クリックすると線は５本、５回クリックしたら７本（書いていただいたプログラムだと５回目は新たに４本引かれると思うのですが、そのうち２本は他の線と交わってしまうので引かない）というようにしたいです…

ん〜。どうすんべぇ。
ルール的には、恐らく、始点からは全部の点に線を引く、のね。
ただ、次の点からは次の次の点に「だけ」線を引くようにプログラムすれば何とかなるのかねぇ・・・。
それ以外に引くと基本的に「交差」が生じるんだけど、これが望んだカタチかどうかは知りません。あとはデバッグで「思い通りに行ってないトコ」を直すしかないんじゃないかなぁ。

// ここから

FloatList xs = new FloatList();
FloatList ys = new FloatList();
int i = 0;

void setup() {
　size(800, 800);
}

void draw() {
}

void mousePressed() {
　int k;
　float x = mouseX;
　float y = mouseY;
　ellipse(x, y, 15, 15);
　if (xs.size() > 0 && ys.size() > 0) {
　　for (k = 0; k < i; k++) {
　　　if (k == 0) { // 始点だけは2つのFloatListを舐めて全点に線を引く
　　　　line(xs.get(k), ys.get(k), x, y);
　　　} else { // それ以外は強制的にkの値をFloatListのケツの座標(前回作った点)にのみ線を引く
　　　　k = i-1;
　　　　line(xs.get(k), ys.get(k), x, y);
　　　}
　　}
　}
　xs.append(x);
　ys.append(y);
　i++;
}

この回答へのお礼

丁寧に教えて頂きありがとうございました。

お礼日時：2020/10/25 17:45