円の描画位置の指定方法

前提・実現したいこと

processingにて以下のプログラムを組んでいます。
1.再帰を使って木の様なものを描画させる。
2.木の枝部分のランダムな位置に円を数個描画する。
2.minimで音情報を元に、円の色と大きさがランダムに変化する。
3.マウスクリックをすると、分割ファイルのクラス化した物理演算処理が
行われ、描画されている円から円が複数に分裂し四方八方に弾けて下に落ちる様に表現する。
※マウスクリック時の円の処理が文章で説明するのが難しい為、
該当のソースコードを実行して頂くと理解出来ると思います。

発生している問題・エラーメッセージ

1.木の色が指定した色にならず、黒色になってしまう。(恐らく指定されていない判定となっている)
　その為、背景のフェードの色と被ってしまい、木が見えなくなってしまう。
2.下記コードでは、円の描画位置を数値で一つずつ指定している。それを円の描画位置を指定した範囲内
　のランダムな位置に指定する様に変更したいが、円がばらけなくなってしまう等の問題が起こり上手く
　行かない。

該当のソースコード

processing
1import ddf.minim.*;
2import ddf.minim.analysis.*;
3import ddf.minim.effects.*;
4import ddf.minim.signals.*;
5import ddf.minim.spi.*;
6import ddf.minim.ugens.*;
7
8Minim minim;
9//AudioInput in;
10AudioPlayer player;
11
12//float volumeIn;
13float playerIn;
14float x;
15float y;
16int buffersize = 512;
17
18int NUM = 10; //パーティクルの数
19//パーティクルを格納する配列
20ParticleVec2[] particles = new ParticleVec2[NUM];
21
22void setup() {
23  fullScreen();
24  //size(1000, 500);
25  smooth();
26  frameRate(60);
27  colorMode(HSB, 360, 100, 100, 100);
28
29  minim = new Minim(this);
30  //  in = minim.getLineIn(Minim.STEREO,buffersize);
31  player = minim.loadFile("Mountain.mp3");
32  player.loop();
33
34  for (int i = 0; i < NUM; i++) {
35    //クラスをインスタンス化
36    particles[i] = new ParticleVec2();
37    //初期位置は画面の中心に
38    particles[i].location.set(width/2.0, height/2.3);
39    /*//ランダムに加速度を設定 - ランダムの範囲を中央からの距離に
40     float angle = random(PI * 2.0);
41     float length = random(20);
42     float posX = cos(angle) * length;
43     float posY = sin(angle) * length;
44     particles[i].acceleration.set(posX, posY);
45     //下向きに0.1の重力
46     particles[i].gravity.set(0.0, 0.1);
47     //摩擦を0.01に
48     particles[i].friction = 0.01;*/
49  }
50}
51
52void draw() {
53  //背景をフェードさせる
54  fill(0,31);
55  //fill(0, 0);
56  rect(0, 0, width, height);
57  noStroke();
58  fill(100);
59
60  //パーティクルの位置を更新して描画
61  for (int i = 0; i < NUM; i++) {
62    //位置を更新
63    particles[i].update();
64    //描画
65    particles[i].draw();
66    //壁でバウンドさせる
67    particles[i].bounceOffWalls();
68  }
69
70  //木
71  Tree(30, width/2, height, PI, width/8);
72
73  //地面
74  fill(#959592);
75  rect(0, 1030, 2000, 50);
76}
77
78//木の生成
79void Tree(float strokeWeight, float x, float y, float rotate, float length) {
80  pushMatrix();  //座標を一時保存
81  translate(x, y);  //座標移動
82  rotate(rotate);  //座標回転
83  strokeWeight(strokeWeight);  //線の輪郭線の太さ
84  stroke(50, 0, 0);  //線の色
85  line(0, 0, 0, length);  //線の描画,配列の長さ
86  popMatrix();  //変更した座標を元に戻す
87  if (strokeWeight<2)return;
88  if (random(0, 4)>3 && strokeWeight<3)return;
89  Tree(strokeWeight*2/3, x-sin(rotate)*length, y+cos(rotate)*length, rotate-PI/10, length*2/3);
90  Tree(strokeWeight*2/3, x-sin(rotate)*length, y+cos(rotate)*length, rotate+PI/10, length*2/3);
91}
92
93void mouseClicked() {
94  //パーティクルの数だけくりかえし
95  for (int i = 0; i < NUM; i++) {
96
97    //ランダムに加速度を設定 - ランダムの範囲を中央からの距離に
98    float angle = random(PI * 2.0);
99    float length = random(20);
100    float posX = cos(angle) * length;
101    float posY = sin(angle) * length;
102    particles[i].acceleration.set(posX, posY);
103    //下向きに0.1の重力
104    particles[i].gravity.set(0.0, 0.1);
105    //摩擦を0.01に
106    particles[i].friction = 0.01;
107    PVector force = new PVector(cos(angle) * length, sin(angle) * length);
108    particles[i].addForce(force);
109  }
110}
111
112void stop() {
113  minim.stop();
114  super.stop();
115}
116//////////////////////////////////
117//分割ファイルa　↓
118/////////////////////////////////
119// 物体の運動を計算(運動方程式)
120class ParticleVec2 {
121  PVector location; // 位置
122  PVector velocity; // 速度
123  PVector acceleration; // 加速度
124  PVector gravity; // 重力
125  float mass; // 質量
126  float friction; // 摩擦力
127  PVector min; // 稼動範囲(min)
128  PVector max; // 稼動範囲(max)
129  float radius; // パーティクル半径
130  // コンストラクタ
131  ParticleVec2() {
132    radius = 4.0;
133    mass = 1.0; // 質量は1.0に設定する
134    friction = 0.01; // 摩擦力を0.01に設定する
135    // 位置、速度、加速度を初期化する
136    location = new PVector(0.0, 0.0);
137    velocity = new PVector(0.0, 0.0);
138    acceleration = new PVector(0.0, 0.0);
139    gravity = new PVector(0.0, 0.0); // 重力なし
140    // 稼動範囲を設定する
141    min = new PVector(0.0, 0.0);
142    max = new PVector(width, height);
143  }
144  // 運動方程式から位置を更新
145  void update() {
146    acceleration.add(gravity); // 重力を加える
147    velocity.add(acceleration); // 加速度から速度を算出する
148    velocity.mult(1.0 - friction); // 摩擦力から速度を変化させる
149    location.add(velocity); // 速度から位置を算出する
150    acceleration.set(0, 0); // 加速度を0にリセット(等速運動)する
151  }
152
153  void draw() {
154    //  volumeIn = in.mix.level()*200;
155    playerIn = player.mix.level()*200;
156    //strokeWeight(10);
157    //x = random(300, 1500); //横
158    //y = random(100, 500); //縦
159    noStroke();
160    fill(random(255), random(255), random(255), 50);
161    //  ellipse(x,y,volumeIn,volumeIn);
162    //ellipse(x, y, playerIn, playerIn);
163    ellipse(location.x, location.y, playerIn, playerIn);
164    ellipse(location.x*1.2, location.y, playerIn, playerIn);
165    ellipse(location.x/1.3, location.y, playerIn, playerIn);
166  }
167
168  // 壁でバウンドさせる
169  void bounceOffWalls() {
170    if (location.x > max.x) {
171      location.x = max.x;
172      velocity.x *= -1;
173    }
174    if (location.x < min.x) {
175      location.x = min.x;
176      velocity.x *= -1;
177    }
178    if (location.y > max.y) {
179      location.y = max.y;
180      velocity.y *= -1;
181    }
182    if (location.y < min.y) {
183      location.y = min.y;
184      velocity.y *= -1;
185    }
186  }
187  // 壁を突き抜けて反対から出現させる
188  void throughWalls() {
189    if (location.x < min.x) {
190      location.x = max.x;
191    }
192    if (location.y < min.y) {
193      location.y = max.y;
194    }
195    if (location.x > max.x) {
196      location.x = min.x;
197    }
198    if (location.y > max.y) {
199      location.y = min.y;
200    }
201  }
202  //力を加える
203  void addForce(PVector force) {
204    force.div(mass); //力と質量から加速度を算出
205    acceleration.add(force); //力を加速度に加える
206  }
207}

試したこと

・木の色が変えられないので、背景のフェード部分を無くしてみたが、背景のフェードが無いと
円が連なっているのが見えてしまい画面が大変な事になるのに気付いた。
・円の位置をランダムにしようとしたがパーティクルの設定と混じり訳が分からなくなってしまった。

補足情報（FW/ツールのバージョンなど）

Processing3.5.3、Windows10

行動規範の内容に同意します

回答1件

ベストアンサー

1.はカラーモードのせいみたいですね。よくわかっていませんが、↓とすれば表示されました。

Processing
1colorMode(RGB);
2//木
3Tree(30, width/2, height, PI, width/8);
4//地面
5fill(#959592);
6rect(0, 1030, 2000, 50);
7// 戻したほうがいい？
8//colorMode(HSB, 360, 100, 100, 100);

2.はここのことでしょうか？

Processing
1particles[i].location.set(width/2.0, height/2.3);

こっち？？

Processing
1ellipse(location.x, location.y, playerIn, playerIn);
2ellipse(location.x*1.2, location.y, playerIn, playerIn);
3ellipse(location.x/1.3, location.y, playerIn, playerIn);

particleは3つでセットのようなので上のことだとして、こんなんでいいのでしょうか？外している気がします^^;

Processing
1particles[i].location.set(width/2.0-random(-50,50), height/2.3-random(-50,50));

追記

Processing
1import ddf.minim.*;
2import ddf.minim.analysis.*;
3import ddf.minim.effects.*;
4import ddf.minim.signals.*;
5import ddf.minim.spi.*;
6import ddf.minim.ugens.*;
7
8Minim minim;
9AudioPlayer player;
10
11// パーティクルが増減するので配列からリストに変更
12//int NUM = 10;
13//ParticleVec2[] particles = new ParticleVec2[NUM];
14ArrayList<ParticleVec2> particles = new ArrayList<ParticleVec2>();
15
16// 親はとりあえず３つ べたに並べましたが５つとかなら配列で管理するほうがいいでしょうね
17ParticleVec2 parent1 = new ParticleVec2(10);
18ParticleVec2 parent2 = new ParticleVec2(10);
19ParticleVec2 parent3 = new ParticleVec2(10);
20
21void setup() {
22  fullScreen();
23  smooth();
24  frameRate(60);
25  colorMode(HSB, 360, 100, 100, 100);
26
27  minim = new Minim(this);
28  player = minim.loadFile("Mountain.mp3");
29  player.loop();
30
31  // パーティクルはクリック時に追加するので親だけランダム位置に（あんまりいい位置に来てない気がします 調整してください）
32  parent1.location.set(width / 2.0 - random(-50, 50), height / 2 - random(50, 100));
33  parent2.location.set(width / 2.0 * 1.2 - random(-50, 50), height / 2  - random(50, 100));
34  parent3.location.set(width / 2.0 / 1.3 - random(-50, 50), height / 2 - random(50, 100));
35  //for (int i = 0; i < NUM; i++) {
36  //  particles[i] = new ParticleVec2();
37  //  particles[i].location.set(width/2.0, height/2.3);
38  //}
39}
40
41void draw() {
42  fill(0, 31);
43  rect(0, 0, width, height);
44  noStroke();
45  fill(100);
46
47  // 親の表示 親は動かないのでupdateもbounceOffWallsもしない
48  parent1.draw();
49  parent2.draw();
50  parent3.draw();
51
52  // 子供の表示
53  for (ParticleVec2 p : particles) {
54    p.update();
55    p.draw();
56    p.bounceOffWalls();
57  }
58
59  colorMode(RGB);
60  Tree(30, width / 2, height, PI, width / 8);
61  fill(#959592);
62  rect(0, 1030, 2000, 50);
63}
64
65
66void Tree(float strokeWeight, float x, float y, float rotate, float length) {
67  pushMatrix();
68  translate(x, y);
69  rotate(rotate);
70  strokeWeight(strokeWeight);
71  stroke(50, 0, 0);
72  line(0, 0, 0, length);
73  popMatrix();
74  if (strokeWeight < 2) return;
75  if (random(0, 4) > 3 && strokeWeight < 3) return;
76  Tree(strokeWeight * 2 / 3, x - sin(rotate) * length, y + cos(rotate) * length, rotate - PI / 10, length * 2 / 3);
77  Tree(strokeWeight * 2 / 3, x - sin(rotate) * length, y + cos(rotate) * length, rotate + PI / 10, length * 2 / 3);
78}
79
80void mouseClicked(MouseEvent e) {
81  // とりあえず右クリックでリセット
82  if (e.getButton() == RIGHT) {
83    particles.clear();
84    return;
85  }
86
87  // 親１の位置にパーティクルを5個追加
88  for (int i = 0; i < 5; i++) {
89    ParticleVec2 particle = new ParticleVec2(4);
90    particle.location.set(parent1.location);
91    particles.add(particle);
92  }
93  // 親２の位置にパーティクルを5個追加
94  for (int i = 0; i < 5; i++) {
95    ParticleVec2 particle = new ParticleVec2(4);
96    particle.location.set(parent2.location);
97    particles.add(particle);
98  }
99  // 親３の位置にパーティクルを5個追加
100  for (int i = 0; i < 5; i++) {
101    ParticleVec2 particle = new ParticleVec2(4);
102    particle.location.set(parent3.location);
103    particles.add(particle);
104  }
105
106  //パーティクルの数だけくりかえし
107  for (ParticleVec2 p : particles) {
108    float angle = random(PI * 2.0);
109    float length = random(20);
110    float posX = cos(angle) * length;
111    float posY = sin(angle) * length;
112    p.acceleration.set(posX, posY);
113    p.gravity.set(0.0, 0.1);
114    p.friction = 0.01;
115    PVector force = new PVector(cos(angle) * length, sin(angle) * length);
116    p.addForce(force);
117  }
118}
119
120void stop() {
121  minim.stop();
122  super.stop();
123}
124
125
126class ParticleVec2 {
127  PVector location;
128  PVector velocity;
129  PVector acceleration;
130  PVector gravity;
131  float mass;
132  float friction;
133  PVector min;
134  PVector max;
135  float radius;
136
137  // 親を大きめに表示したかったので、パーティクル半径をコンストラクタで指定 子供が４で親が１０にしたが特に根拠はない
138  ParticleVec2(float radius) {
139    //radius = 4.0;
140    this.radius = radius;
141    mass = 1.0;
142    friction = 0.01;
143    location = new PVector(0.0, 0.0);
144    velocity = new PVector(0.0, 0.0);
145    acceleration = new PVector(0.0, 0.0);
146    gravity = new PVector(0.0, 0.0);
147    min = new PVector(0.0, 0.0);
148    max = new PVector(width, height);
149  }
150
151  void update() {
152    acceleration.add(gravity);
153    velocity.add(acceleration);
154    velocity.mult(1.0 - friction);
155    location.add(velocity);
156    acceleration.set(0, 0);
157  }
158
159  void draw() {
160    // 200固定だったのをradiusを考慮するように変更 子供を４にしたので50*4=200で大きさは同じ 親は2.5倍
161    //playerIn = player.mix.level()*200;
162    float playerIn = player.mix.level() * 50 * radius;
163    noStroke();
164    fill(random(255), random(255), random(255), 50);
165
166    // ３つセットにする意味もなくなったのでいっこに
167    ellipse(location.x, location.y, playerIn, playerIn);
168    //ellipse(location.x*1.2, location.y, playerIn, playerIn);
169    //ellipse(location.x/1.3, location.y, playerIn, playerIn);
170  }
171
172  void bounceOffWalls() {
173    if (location.x > max.x) {
174      location.x = max.x;
175      velocity.x *= -1;
176    }
177    if (location.x < min.x) {
178      location.x = min.x;
179      velocity.x *= -1;
180    }
181    if (location.y > max.y) {
182      location.y = max.y;
183      velocity.y *= -1;
184    }
185    if (location.y < min.y) {
186      location.y = min.y;
187      velocity.y *= -1;
188    }
189  }
190
191  void addForce(PVector force) {
192    force.div(mass);
193    acceleration.add(force);
194  }
195}

投稿2019/11/26 15:47

編集2023/08/09 09:39

TN8001

総合スコア9855

msw

2019/11/28 08:08 編集

ellipse(location.x, location.y, playerIn, playerIn); ellipse(location.x*1.2, location.y, playerIn, playerIn);　←試行の為に追加しました ellipse(location.x/1.3, location.y, playerIn, playerIn);　←試行の為に追加しましたの方です。弄る前のプログラムではなく、試行錯誤した後のものを載せていました。混乱させてしまい申し訳ございません。間違って載せたものは、とりあえず三つの円を実行時に毎回ランダムな位置に描画出来ないかと試していました。しかし、上手く円が同じ場所に描画されずバラバラになった状態で描画される結果となりました。以上の経緯から、初期描画位置を指定するプログラムを利用し、初期位置の設定に*1.2や/1.3などを加えて一つずつ円の位置をずらして指定しないといけないのか悩んでいました。

TN8001

2019/11/28 11:01

質問文をちゃんと読めていませんでした。三つの円が枝の上あたりにランダムに出るこの円は色と大きさは変わるが位置は変わらず、実行中同じところで表示され続けるクリックするとこの円から子供の円が飛び出て飛び回るってことですか。となると子円は増え続けませんか？クリックのたびに古いのは消していいんでしょうか？

msw

2019/12/01 05:17

返信が遅くなり申し訳ありません。上手くイメージしているものを伝えられなかった私が全て悪いので気にしないで下さい。・TN様のおっしゃる通りの仕様にしたいです。念の為、改めて説明させて頂きます。 ※分かり易い例えが浮かばなかった為、TN様の「子供の円」という表現を使わせて頂きます。 1.プログラム実行時に親の円が木の枝部分にランダムに描画されます。 2.マウスクリックすると、親の円から子供の円が飛び出してきます。私が悩んでいたのは、親の円だけ描画位置をランダムにしようとした所、子供の円まで位置がランダムになり、全部の円が親の円となってしまい実行結果がただの円をランダムに表示させただけになりました。そこで、諦めてランダムではなく位置をずらしたellipseをどんどん追加していくという事をしていました。・クリックのたびに消す事は、現在プログラムをリセットするコードを追加しようと考えているので、描画されて弾けた円はそのままにして重くなったらリセットしようと思います。・今日取り組んで進展があった、無かったにしてもまた後日質問させて頂く事になると思うので、一旦解決したとしてベストアンサーとさせて頂きます。

TN8001

2019/12/01 06:53

全体のコードを追記しました。元のコメントを削除させていただいて、変更点をコメントに書きました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

円の描画位置の指定方法

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問