processingを使用して多くの正方形を描画

Question

processingを使用して多くの正方形を画像内に描画したいです

これまで画像内に多くの円を描写するプログラミングを使用してきました。
小（17px)、中(821px),大(22~48px)の三種類の円をそれぞれの種類ごとに個数を指定し、重ならないようにしながら描画していました。円の位置はそれぞれランダムに配置していました。
今回は円ではなく正方形を描画したかったのですが、方法が分からず質問させてもらいました。
基本的な条件などは円を描画している時と同じにしたいです。

条件としては
・正方形の個数を指定できる
・小、中、大の3種類（それぞれの大きさはある範囲内でランダム）を描画
・場所はランダムに配置される
・正方形同士は重ならない
・色は枠も内部も共に黒で指定する
・一度に多くの画像を作成

該当のソースコード

円を描写している際のコードを添付します。
大の円1個
中の円25個
小の円1個を描画した画像を400枚作った際のコードになります。

ArrayList<PVector> circles; // 円のデータ

void setup() {
  size(600, 600);
  smooth();

  frameRate(20); // 1秒当たり描画数

}

void draw() {
  background(255);
  circles = new ArrayList<PVector>(); //

  //データ
  addCircle();
  

  // 円を全部描画
  for (
 
  int i = 0; i < circles.size(); i++) {
    PVector p = circles.get(i);
    noStroke();
    fill(0);
    ellipse(p.x, p.y, p.z, p.z);
  }
 

  // 画像の保存 
  save("E:/hozon/"  + frameCount + ".png");

  if (frameCount == 400) { // n枚作ったら止める
    noLoop(); // 止める

    //launch("start " + sketchPath()); // Windows専用 エクスプローラでフォルダを開く
    //exit(); // 終了
  }
}

void addCircle() { 
  int[] sizes = {
  int(random(22,49)), 
  int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)), 
  int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)),
  int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)), 
  int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)),
  int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)), int(random(8,22)), 
  int(random(1,8)),    
};
  
  while (circles.size() < sizes.length) { // 円のデータの個数が、必要サイズ候補数より少ない間ループ
    // サイズを取得（配列は０始まりなので、circles.size()が0の時は0番目、circles.size()が1の時は1番目...
    int diameter = sizes[circles.size()];

    // 3次元のベクトルのうちxyを2次元座標、zを円の直径として利用している
    PVector c = new PVector(random(30,570), random(30,570), diameter);
    boolean overlapping = false;

    for (PVector p : circles) {
      // zは直径なので理屈的には割る2 くっついて見えるのがまずい場合は、少し足すなりなんなり
      if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z) / 2) {
        overlapping = true;
        break;
      }
    }

    if (!overlapping) {
      circles.add(c);
    }
  }
}

ご存じの方がおられたらお力添えお願いいたします。

Comments

[TN8001]

正方形なら辺の長さが同じですから、円の場合と同様の手法（xyを座標・zを辺の長さとして利用）が使えます。
であれば問題は重なり判定のコードだけです。

if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z) / 2)
この条件を変えるだけですが、どの程度調べたのでしょうか？
以前の質問のコードそのままで、丸投げと取られます。

注）正確には当然ellipseをrectに変更と、rectMode(CENTER)の追加も必要ですが^^;

[thkana]

> ellipseをrectに変更
ねぇ、みんなsquare()とかcircle()って使わないの?

[TN8001]

ｗ
恥ずかしながら当時は知らなかったのです^^;
引数の数が変わるため、変に混乱させないようにrectと書きました。
今手元に準備中のコードではsquareを使用しています^^

[21J]

確かに丸投げと捉えられるような質問であったと反省しています。

切れたり、重なってしまったりという不具合があったのですがrectMode(CENTER)を入れると解決しました。
ありがとうございます。

[TN8001]

> rectMode(CENTER)を入れると解決しました。

自力で解決されましたか。おめでとうございます^^
であれば、自己回答で閉じていただいて結構です。
解決コードも載せれば、もしかしたら誰かの役に立つかもしれません。

[TN8001]

> 解決コードも載せれば、もしかしたら誰かの役に立つかもしれません。

あるいは間違っている場合、誰かから突っ込みが入ります^^;
rectModeを変えても円の当たり判定のままでは重なりますよ。

Answer 1

画を描いてみたら

重なる(重ならない)条件の式がわかりませんか?

---

返信について...

「重なりさえしなければいい」のならdist(c.x, c.y, p.x, p.y) < (c.z + p.z) *1.4２/ 2でも構いませんけれど、重ならずにもっと近くに配置できるケースを排除しています。

この図において、
dist(c.x, c.y, p.x, p.y) は(c.z+p.z)/2 になるのはわかりますね。
(c.z + p.z)/2 < (c.z + p.z) *1.42/ 2
は真ですが、重なりません。

Comments

[21J]

返信遅くなってしまい申し訳ありません。
正方形なので中心位置から辺までの長さではなく、対角線をとらないと重なってしまうというので重なっていたということですか？
if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z) *1.4２/ 2) {
overlapping = true;
break;
のように変更したら重ならなくなりました。

[thkana]

正方形(長方形)なので対角線ではなく、中心位置から辺までの長さで考えるべき、ということです。

Answer 2

まずは円を描くところを単純に正方形に置き換えてみましょう。
そのうえで、どういう不具合があるか、それをどうしたいのか、というのをそのコードとともに聞いていただけるとよろしいかと

Comments

[21J]

単純にcirclesをrectに変えただけでは切れたり重なったりが起きてしまっていたので質問させてもらっていました。
rectMode(CENTER)が抜けていたようです。
質問の仕方に不備があったと反省しております。

[y_waiwai]

ならそのやったこと、起きたことを質問に書きましょう。
なぜこの質問に回答がつかないのかを考えてみては。

Answer 3

circleをrectに変更しました。
重なりの式”if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z) / 2.0)”に問題があるようで重なってしまったので数値を小さくしました。
正しい改善方法なのかはわからないですが、とりあえず2.0を1.5にすると重なりは解消できました。

ArrayList<PVector> rect; // 円のデータ

void setup() {
  size(512, 512);
  smooth();

  frameRate(20); // 1秒当たり描画数

}

void draw() {
  background(255);
  rect = new ArrayList<PVector>(); //

  //データ
  addrect();
  

  // 円を全部描画
  for (
 
  int i = 0; i < rect.size(); i++) {
    PVector p = rect.get(i);
    noStroke();
    fill(0);
    rect(p.x, p.y, p.z, p.z);
    rectMode(CENTER);
  }
 

  // 画像の保存 
  save("E:/hozon/"  + frameCount + ".png");

  if (frameCount == 100) { // n枚作ったら止める
    noLoop(); // 止める

    //launch("start " + sketchPath()); // Windows専用 エクスプローラでフォルダを開く
    //exit(); // 終了
  }
}

void addrect() { 
  int[] sizes = {
 
  int(random(4,15)),int(random(4,15)),int(random(4,15)),int(random(4,15)),int(random(4,15)),
 int(random(4,15)),int(random(4,15)),int(random(4,15)),int(random(4,15)),int(random(4,15)),
 int(random(4,15)),int(random(4,15)),int(random(4,15)),int(random(4,15)),int(random(4,15)),
 int(random(4,15)),int(random(4,15)),int(random(4,15)),int(random(4,15)),int(random(4,15)),int(random(4,15)),
 int(random(1,4)), int(random(1,4)),int(random(1,4)),int(random(1,4)),int(random(1,4)),
 int(random(1,4)),int(random(1,4)),int(random(1,4)),int(random(1,4)),int(random(1,4)),
};
  
  while (rect.size() < sizes.length) { // 円のデータの個数が、必要サイズ候補数より少ない間ループ
    // サイズを取得（配列は０始まりなので、circles.size()が0の時は0番目、circles.size()が1の時は1番目...
    int diameter = sizes[rect.size()];

    // 3次元のベクトルのうちxyを2次元座標、zを円の直径として利用している
    PVector c = new PVector(random(25,487), random(25,487), diameter);
    boolean overlapping = false;

    for (PVector p : rect) {
      // zは直径なので理屈的には割る2 くっついて見えるのがまずい場合は、少し足すなりなんなり
      if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z) / 1.5) {
        overlapping = true;
        break;
      }
    }

    if (!overlapping) {
      rect.add(c);
    }
  }
}

Comments

[thkana]

> 正しい改善方法なのかはわからないですが
正しくないですね。

[thkana]

(正しくない例)
size(200,200);
rectMode(CENTER);
PVector c=new PVector(60,60,100);
float d=(100+100)/1.5/sqrt(2)+61;
PVector p=new PVector(d,d,100);
float d1=dist(c.x,c.y,p.x,p.y);
println(d1);
println((c.z+p.z)/1.5);
square(c.x,c.y,c.z);
square(p.x,p.y,p.z);