円の描画位置の指定方法

Question

前提・実現したいこと

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

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

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

該当のソースコード

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

Minim minim;
//AudioInput in;
AudioPlayer player;

//float volumeIn;
float playerIn;
float x;
float y;
int buffersize = 512;

int NUM = 10; //パーティクルの数
//パーティクルを格納する配列
ParticleVec2[] particles = new ParticleVec2[NUM];

void setup() {
  fullScreen();
  //size(1000, 500);
  smooth();
  frameRate(60);
  colorMode(HSB, 360, 100, 100, 100);

  minim = new Minim(this);
  //  in = minim.getLineIn(Minim.STEREO,buffersize);
  player = minim.loadFile("Mountain.mp3");
  player.loop();

  for (int i = 0; i < NUM; i++) {
    //クラスをインスタンス化
    particles[i] = new ParticleVec2();
    //初期位置は画面の中心に
    particles[i].location.set(width/2.0, height/2.3);
    /*//ランダムに加速度を設定 - ランダムの範囲を中央からの距離に
     float angle = random(PI * 2.0);
     float length = random(20);
     float posX = cos(angle) * length;
     float posY = sin(angle) * length;
     particles[i].acceleration.set(posX, posY);
     //下向きに0.1の重力
     particles[i].gravity.set(0.0, 0.1);
     //摩擦を0.01に
     particles[i].friction = 0.01;*/
  }
}

void draw() {
  //背景をフェードさせる
  fill(0,31);
  //fill(0, 0);
  rect(0, 0, width, height);
  noStroke();
  fill(100);

  //パーティクルの位置を更新して描画
  for (int i = 0; i < NUM; i++) {
    //位置を更新
    particles[i].update();
    //描画
    particles[i].draw();
    //壁でバウンドさせる
    particles[i].bounceOffWalls();
  }

  //木
  Tree(30, width/2, height, PI, width/8);

  //地面
  fill(#959592);
  rect(0, 1030, 2000, 50);
}

//木の生成
void Tree(float strokeWeight, float x, float y, float rotate, float length) {
  pushMatrix();  //座標を一時保存
  translate(x, y);  //座標移動
  rotate(rotate);  //座標回転
  strokeWeight(strokeWeight);  //線の輪郭線の太さ
  stroke(50, 0, 0);  //線の色
  line(0, 0, 0, length);  //線の描画,配列の長さ
  popMatrix();  //変更した座標を元に戻す
  if (strokeWeight<2)return;
  if (random(0, 4)>3 && strokeWeight<3)return;
  Tree(strokeWeight*2/3, x-sin(rotate)*length, y+cos(rotate)*length, rotate-PI/10, length*2/3);
  Tree(strokeWeight*2/3, x-sin(rotate)*length, y+cos(rotate)*length, rotate+PI/10, length*2/3);
}

void mouseClicked() {
  //パーティクルの数だけくりかえし
  for (int i = 0; i < NUM; i++) {

    //ランダムに加速度を設定 - ランダムの範囲を中央からの距離に
    float angle = random(PI * 2.0);
    float length = random(20);
    float posX = cos(angle) * length;
    float posY = sin(angle) * length;
    particles[i].acceleration.set(posX, posY);
    //下向きに0.1の重力
    particles[i].gravity.set(0.0, 0.1);
    //摩擦を0.01に
    particles[i].friction = 0.01;
    PVector force = new PVector(cos(angle) * length, sin(angle) * length);
    particles[i].addForce(force);
  }
}

void stop() {
  minim.stop();
  super.stop();
}
//////////////////////////////////
//分割ファイルa　↓
/////////////////////////////////
// 物体の運動を計算(運動方程式)
class ParticleVec2 {
  PVector location; // 位置
  PVector velocity; // 速度
  PVector acceleration; // 加速度
  PVector gravity; // 重力
  float mass; // 質量
  float friction; // 摩擦力
  PVector min; // 稼動範囲(min)
  PVector max; // 稼動範囲(max)
  float radius; // パーティクル半径
  // コンストラクタ
  ParticleVec2() {
    radius = 4.0;
    mass = 1.0; // 質量は1.0に設定する
    friction = 0.01; // 摩擦力を0.01に設定する
    // 位置、速度、加速度を初期化する
    location = new PVector(0.0, 0.0);
    velocity = new PVector(0.0, 0.0);
    acceleration = new PVector(0.0, 0.0);
    gravity = new PVector(0.0, 0.0); // 重力なし
    // 稼動範囲を設定する
    min = new PVector(0.0, 0.0);
    max = new PVector(width, height);
  }
  // 運動方程式から位置を更新
  void update() {
    acceleration.add(gravity); // 重力を加える
    velocity.add(acceleration); // 加速度から速度を算出する
    velocity.mult(1.0 - friction); // 摩擦力から速度を変化させる
    location.add(velocity); // 速度から位置を算出する
    acceleration.set(0, 0); // 加速度を0にリセット(等速運動)する
  }

  void draw() {
    //  volumeIn = in.mix.level()*200;
    playerIn = player.mix.level()*200;
    //strokeWeight(10);
    //x = random(300, 1500); //横
    //y = random(100, 500); //縦
    noStroke();
    fill(random(255), random(255), random(255), 50);
    //  ellipse(x,y,volumeIn,volumeIn);
    //ellipse(x, y, playerIn, playerIn);
    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);
  }

  // 壁でバウンドさせる
  void bounceOffWalls() {
    if (location.x > max.x) {
      location.x = max.x;
      velocity.x *= -1;
    }
    if (location.x < min.x) {
      location.x = min.x;
      velocity.x *= -1;
    }
    if (location.y > max.y) {
      location.y = max.y;
      velocity.y *= -1;
    }
    if (location.y < min.y) {
      location.y = min.y;
      velocity.y *= -1;
    }
  }
  // 壁を突き抜けて反対から出現させる
  void throughWalls() {
    if (location.x < min.x) {
      location.x = max.x;
    }
    if (location.y < min.y) {
      location.y = max.y;
    }
    if (location.x > max.x) {
      location.x = min.x;
    }
    if (location.y > max.y) {
      location.y = min.y;
    }
  }
  //力を加える
  void addForce(PVector force) {
    force.div(mass); //力と質量から加速度を算出
    acceleration.add(force); //力を加速度に加える
  }
}

試したこと

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

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

Processing3.5.3、Windows10

Answer 1

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

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

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

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

こっち？？

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

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

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

---

追記

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

Minim minim;
AudioPlayer player;

// パーティクルが増減するので配列からリストに変更
//int NUM = 10;
//ParticleVec2[] particles = new ParticleVec2[NUM];
ArrayList<ParticleVec2> particles = new ArrayList<ParticleVec2>();

// 親はとりあえず３つ べたに並べましたが５つとかなら配列で管理するほうがいいでしょうね
ParticleVec2 parent1 = new ParticleVec2(10);
ParticleVec2 parent2 = new ParticleVec2(10);
ParticleVec2 parent3 = new ParticleVec2(10);

void setup() {
  fullScreen();
  smooth();
  frameRate(60);
  colorMode(HSB, 360, 100, 100, 100);

  minim = new Minim(this);
  player = minim.loadFile("Mountain.mp3");
  player.loop();

  // パーティクルはクリック時に追加するので親だけランダム位置に（あんまりいい位置に来てない気がします 調整してください）
  parent1.location.set(width / 2.0 - random(-50, 50), height / 2 - random(50, 100));
  parent2.location.set(width / 2.0 * 1.2 - random(-50, 50), height / 2  - random(50, 100));
  parent3.location.set(width / 2.0 / 1.3 - random(-50, 50), height / 2 - random(50, 100));
  //for (int i = 0; i < NUM; i++) {
  //  particles[i] = new ParticleVec2();
  //  particles[i].location.set(width/2.0, height/2.3);
  //}
}

void draw() {
  fill(0, 31);
  rect(0, 0, width, height);
  noStroke();
  fill(100);

  // 親の表示 親は動かないのでupdateもbounceOffWallsもしない
  parent1.draw();
  parent2.draw();
  parent3.draw();

  // 子供の表示
  for (ParticleVec2 p : particles) {
    p.update();
    p.draw();
    p.bounceOffWalls();
  }

  colorMode(RGB);
  Tree(30, width / 2, height, PI, width / 8);
  fill(#959592);
  rect(0, 1030, 2000, 50);
}


void Tree(float strokeWeight, float x, float y, float rotate, float length) {
  pushMatrix();
  translate(x, y);
  rotate(rotate);
  strokeWeight(strokeWeight);
  stroke(50, 0, 0);
  line(0, 0, 0, length);
  popMatrix();
  if (strokeWeight < 2) return;
  if (random(0, 4) > 3 && strokeWeight < 3) return;
  Tree(strokeWeight * 2 / 3, x - sin(rotate) * length, y + cos(rotate) * length, rotate - PI / 10, length * 2 / 3);
  Tree(strokeWeight * 2 / 3, x - sin(rotate) * length, y + cos(rotate) * length, rotate + PI / 10, length * 2 / 3);
}

void mouseClicked(MouseEvent e) {
  // とりあえず右クリックでリセット
  if (e.getButton() == RIGHT) {
    particles.clear();
    return;
  }

  // 親１の位置にパーティクルを5個追加
  for (int i = 0; i < 5; i++) {
    ParticleVec2 particle = new ParticleVec2(4);
    particle.location.set(parent1.location);
    particles.add(particle);
  }
  // 親２の位置にパーティクルを5個追加
  for (int i = 0; i < 5; i++) {
    ParticleVec2 particle = new ParticleVec2(4);
    particle.location.set(parent2.location);
    particles.add(particle);
  }
  // 親３の位置にパーティクルを5個追加
  for (int i = 0; i < 5; i++) {
    ParticleVec2 particle = new ParticleVec2(4);
    particle.location.set(parent3.location);
    particles.add(particle);
  }

  //パーティクルの数だけくりかえし
  for (ParticleVec2 p : particles) {
    float angle = random(PI * 2.0);
    float length = random(20);
    float posX = cos(angle) * length;
    float posY = sin(angle) * length;
    p.acceleration.set(posX, posY);
    p.gravity.set(0.0, 0.1);
    p.friction = 0.01;
    PVector force = new PVector(cos(angle) * length, sin(angle) * length);
    p.addForce(force);
  }
}

void stop() {
  minim.stop();
  super.stop();
}


class ParticleVec2 {
  PVector location;
  PVector velocity;
  PVector acceleration;
  PVector gravity;
  float mass;
  float friction;
  PVector min;
  PVector max;
  float radius;

  // 親を大きめに表示したかったので、パーティクル半径をコンストラクタで指定 子供が４で親が１０にしたが特に根拠はない
  ParticleVec2(float radius) {
    //radius = 4.0;
    this.radius = radius;
    mass = 1.0;
    friction = 0.01;
    location = new PVector(0.0, 0.0);
    velocity = new PVector(0.0, 0.0);
    acceleration = new PVector(0.0, 0.0);
    gravity = new PVector(0.0, 0.0);
    min = new PVector(0.0, 0.0);
    max = new PVector(width, height);
  }

  void update() {
    acceleration.add(gravity);
    velocity.add(acceleration);
    velocity.mult(1.0 - friction);
    location.add(velocity);
    acceleration.set(0, 0);
  }

  void draw() {
    // 200固定だったのをradiusを考慮するように変更 子供を４にしたので50*4=200で大きさは同じ 親は2.5倍
    //playerIn = player.mix.level()*200;
    float playerIn = player.mix.level() * 50 * radius;
    noStroke();
    fill(random(255), random(255), random(255), 50);

    // ３つセットにする意味もなくなったのでいっこに
    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);
  }

  void bounceOffWalls() {
    if (location.x > max.x) {
      location.x = max.x;
      velocity.x *= -1;
    }
    if (location.x < min.x) {
      location.x = min.x;
      velocity.x *= -1;
    }
    if (location.y > max.y) {
      location.y = max.y;
      velocity.y *= -1;
    }
    if (location.y < min.y) {
      location.y = min.y;
      velocity.y *= -1;
    }
  }

  void addForce(PVector force) {
    force.div(mass);
    acceleration.add(force);
  }
}

Comments

[msw]

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]

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

[msw]

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

[TN8001]

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