processingを使って円を描写する方法

Question

リンク内容
実現したいこと
processingを使用してランダムに複数個の円を描画したいです
条件としては
・円が重ならない
・指定した複数サイズの大きさの円を描画する
・円の場所が異なる多数の画像を同時に作成する
・作成した画像を保存する
です
この画像のようにしたいです
（この画像だと3種類の大きさの円がランダムに描画されているのですがどうしても重なってしまいます。）

ソースコード
リンクのサイトを少し変えてみて下記のようにしました。

 ArrayList <PVector> circles;
  
   void setup() {
         background(0,0,100);
   size(600, 600);
   
   //色相・彩度・明度で指定
   colorMode(RGB, 256, 256, 256);
   smooth();
   noLoop();
 }
 
   void draw() {
         background(255,255,255);
        circles = new ArrayList <PVector>();
     
         addCircle();
         
     for (int i=0; i<circles.size(); i++) {
       PVector p = circles.get(i);
             noStroke();
     fill( 0,0,0);
     ellipse(p.x, p.y, p.z, p.z);
     }  
         
 }
 
 
 void addCircle() {
   //10は個数
   while (circles.size() <30) {
     //大きさが10から100の間
      float diameter =10;
       PVector c = new PVector(random(width), random(height), diameter);
       boolean overlapping = false;
       
       for (PVector p : circles) {
         
         /*
         distは2点間の距離を出す  dist(x1, y1, x2, y2)
         この場合は、cとpの2点間の距離 > cの半径+pの半径の場合に描画される
         cとpの2点間の距離 < cの半径+pの半径の場合は重なってしまう
         */
         
        if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z)) {
           overlapping = true;
           break;
         }
         }
         
         if (!overlapping) {
           //配列の要素を追加
         circles.add(c);
    save("E:/processing/a.png");   }
       
       
   }

}
 

問題点
しかし、
・複数の大きさの円を描画できない（サイトではランダムに大きさを変更できているのですが大きさを2つ以上指定する方法がわかりません）
・サイトではクリックすると円の位置を変更できるがクリックせずに複数画像を同時に作りたい
・実行するとprocessing上では円の描画された画像が出てくるがエクスプローラーからフォルダ内を見てみると白いだけで円が描画されていない画像が保存されている。

どのように改善すれば良いかアドバイスお願いします。

Comments

[thkana]

「複数画像を同時に作りたい」はなぜ「同時」なのですか?
順次複数の画像を作成するのではいけないのですか?

[21J]

すいません
同時というのは1つのコードを実行するだけで複数枚の画像を作りたいという意味です。

Answer 1

複数の大きさの円を描画できない（サイトではランダムに大きさを変更できているのですが大きさを2つ以上指定する方法がわかりません）

どういう指定法をイメージしているのかがわかりませんが、複数個のサイズからランダムにチョイスならばこんな感じになるでしょう。

int[] sizes = { 10, 20, 50 };
int index = int(random(sizes.length));
int diameter = sizes[index];

サイトではクリックすると円の位置を変更できるがクリックせずに複数画像を同時に作りたい

ほぼ同時？にすることもできますが、noLoop()をやめてフレームごとに描画・保存するのはどうでしょう？
frameRateを上げれば、数秒で大量に画像ができます^^;

実行するとprocessing上では円の描画された画像が出てくるがエクスプローラーからフォルダ内を見てみると白いだけで円が描画されていない画像が保存されている。

save()は現在の描画を保存します。
この時点ではまだ描画されていないため（ellipse()があるforが描画処理）、真っ白の画像になります。
つまり描画が終わってから、save()するようにします。

---

ArrayList<PVector> circles;

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

  frameRate(1); // 1秒に1回に再描画（数字を増やすと早くなる）
}

void draw() {
  background(255);
  circles = new ArrayList<PVector>(); // 毎回circlesを作り直す

  // 円のデータを準備
  addCircle();

  // 円を全部描画
  for (PVector p : circles) {
    noStroke();
    fill(0);
    ellipse(p.x, p.y, p.z, p.z);
  }

  // 画像の保存 a1.png a2.png ...
  save("a" + frameCount + ".png");
}

void addCircle() {
  int[] sizes = { 10, 20, 50 }; // 複数のサイズ候補（円の個数やサイズが大きいと、時間がかかったり無限ループしたりするので注意）
  while (circles.size() < 30) {
    int index = int(random(sizes.length)); // sizesのうち、どれを使うかランダムに決定
    int diameter = sizes[index]; // サイズを取得

    // 3次元のベクトルのうちxyを2次元座標、zを円の直径として利用している
    PVector c = new PVector(random(width), random(height), 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);
    }
  }
}

---

追記

// 必要サイズ候補を羅列(大きい順のほうが少し安全？ 時間がかかったり無限ループになりにくい)
int[] sizes = {
  30, 30, 30, 30, 30, 
  20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 
  10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 
};
ArrayList<PVector> circles; // 円のデータ

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

  frameRate(10); // 1秒に10回再描画（数字を増やすと早くなる）
}

void draw() {
  background(255);
  circles = new ArrayList<PVector>(); // 毎回circlesを作り直す

  // 円のデータを準備
  addCircle();

  // 円を全部描画
  for (PVector p : circles) {
    noStroke();
    fill(0);
    ellipse(p.x, p.y, p.z, p.z);
  }

  // 画像の保存 a1.png a2.png ...
  save("a" + frameCount + ".png");

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

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

void addCircle() {
  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(width), random(height), 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

[21J]

回答ありがとうございます

円のサイズについて私の説明不足で申し訳ございません。
例えば、サイズ10　20　30の3種類の大きさの円をそれぞれ10個　10個　5個の様に個数を指定して場所だけランダムにしたいです。

flameRateについて質問させてください。
もし100枚の画像が欲しいときはflameRate(10)にして10秒後に止めるときは手動で止めるしか出来ないですか？もし自動で止まる方法があれば教えていただきたいです。

[TN8001]

> 例えば、サイズ10　20　30の3種類の大きさの円をそれぞれ10個　10個　5個の様に個数を指定して場所だけランダムにしたいです。

なるほど。やり方はいろいろあると思います。
単純に候補を羅列して、順番に取得するのがわかりやすいかと思います。

> もし100枚の画像が欲しいときはflameRate(10)にして10秒後に止めるときは手動で止めるしか出来ないですか？もし自動で止まる方法があれば教えていただきたいです。

上限に達したら止めるコードを書けばいいのです。それがプログラミングです^^

上記改良を回答に追記しました。

[21J]

ありがとうございます。
自分の思っていた通り画像が作れるコードになりました。
大変助かりました。

Answer 2

結論

こんな感じでいいのでしょうか？

ArrayList <PVector> circles;

void setup() {
  background(0,0,100);
  size(600, 600);

  //色相・彩度・明度で指定
  colorMode(RGB, 256, 256, 256);
  smooth();
  noLoop();
}

void draw() {
  for ( int n = 1; n <= 10; ++n ) {
    background(255,255,255);
    circles = new ArrayList <PVector>();

    addCircle();

    for (int i=0; i<circles.size(); i++) {
      PVector p = circles.get(i);
      noStroke();
      fill( 0,0,0);
      ellipse(p.x, p.y, p.z, p.z);
    }  
    
    // ファイルの保存はすべての描画が終わってから
	save(String.format(""E:/processing/a%03d.png",n));
  }
}


void addCircle() {
  //10は個数
  while (circles.size() <30) {
    //大きさが10から100の間
    float diameter =random(10,100);
    PVector c = new PVector(random(width), random(height), diameter);
    boolean overlapping = false;

    for (PVector p : circles) {
  
      /*
      distは2点間の距離を出す  dist(x1, y1, x2, y2)  
      この場合は、cとpの2点間の距離 > cの半径+pの半径の場合に描画される
      cとpの2点間の距離 < cの半径+pの半径の場合は重なってしまう
      */
  
      if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z)) {
        overlapping = true;
        break;
      }  
    }

    if (!overlapping) {
      //配列の要素を追加
      circles.add(c);
    }
  }

}

説明

・複数の大きさの円を描画できない（サイトではランダムに大きさを変更できているのですが大きさを2つ以上指定する方法がわかりません）

座標の生成につかわれている random メソッドで、サイズも生成させればいいのではないでしょうか？

//大きさが10から100の間
float diameter = random(10,100);
PVector c = new PVector(random(width), random(height), diameter);

・実行するとprocessing上では円の描画された画像が出てくるがエクスプローラーからフォルダ内を見てみると白いだけで円が描画されていない画像が保存されている。

ご質問のコードでは、円を描画する前にファイルの書き出しを行っています。
save を　draw メソッドの最後に移して、全ての描画が終わった後で、ファイルを書きだすようにすれば、ファイルの内容と画面の表示が一致するはずです。

・サイトではクリックすると円の位置を変更できるがクリックせずに複数画像を同時に作りたい

draw の描画処理全体を以下のようにループで囲ってファイル名を変えてセーブすればできると思います。

void draw() {
  for ( int n = 1; n < 10; ++n ) {
～中略～
    // 最後に画像を保存
    save(String.format(""E:/processing/a%03d.png",n));
  }
}

コメントで追加いただいた仕様について

例えば、サイズ10　20　30の3種類の大きさの円をそれぞれ10個　10個　5個の様に個数を指定して場所だけランダムにしたいです。

こんな感じでしょうか。

ArrayList <PVector> circles;

public class CircleDefine {
  public int size;
  public int count;
  
  public CircleDefine( int size, int count ) {
    this.size = size;
    this.count = count;
  }
}
ArrayList<CircleDefine> circle_defines = new ArrayList<CircleDefine>();
  
void setup() {
  background(0,0,100);
  size(600, 600);

  //色相・彩度・明度で指定
  colorMode(RGB, 256, 256, 256);
  
  // 円のサイズと数を指定
  circle_defines.add(new CircleDefine(30,5));
  circle_defines.add(new CircleDefine(10,10));
  circle_defines.add(new CircleDefine(20,10));
    
  smooth();
  noLoop();
}

void draw() {
  for ( int n = 1; n <= 10; ++n ) {
    background(255,255,255);
    circles = new ArrayList <PVector>();

    addCircle();

    for (int i=0; i<circles.size(); i++) {
      PVector p = circles.get(i);
      noStroke();
      fill( 0,0,0);
      ellipse(p.x, p.y, p.z, p.z);
    }  

    // ファイルの保存はすべての描画が終わってから
//    save(String.format("E:/processing/a%03d.png",n));
    save(String.format("C:/tmp/a%03d.png",n));
  }
}


void addCircle() {

  for ( CircleDefine circle_define : circle_defines ) {
    int next_count = circles.size() + circle_define.count;
    while (circles.size() < next_count ) {   
    
      PVector c = new PVector(random(width), random(height), circle_define.size);
      boolean overlapping = false;

      for (PVector p : circles) {

        /*
        distは2点間の距離を出す  dist(x1, y1, x2, y2)  
        この場合は、cとpの2点間の距離 > cの半径+pの半径の場合に描画される
        cとpの2点間の距離 < cの半径+pの半径の場合は重なってしまう
        */

        if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z)) {
          overlapping = true;
          break;
        }  
      }

      if (!overlapping) {
        //配列の要素を追加
        circles.add(c);
      }
    }
  }

}

基本的な考え方としては、作りたい円の定義をあらかじめ変数に入れて用意しておき、
描画時にそれを順に取り出して描画していきます。
以下の例ではクラスを新たに作っていますが、以下のように配列を二つ作ってしまったほうが早いかもしれません。

int[] size = { 10, 20, 30 };
int[] count = { 10, 10, 5 };

Comments

[21J]

回答ありがとうございます

円のサイズについて私の説明不足で申し訳ございません。
例えば、サイズ10　20　30の3種類の大きさの円をそれぞれ10個　10個　5個の様に個数を指定して場所だけランダムにしたいです。