Processingで作成した四角形を回転させるには

現状
現在processingで3種類の大きさの四角形を合計100個、画像内にランダムに配置できるようにコードを作成しました。

processing
1
2
3ArrayList<PVector> rect; // 正方形のデータ
4
5void setup() {
6  size(512, 512);
7  smooth();
8
9  frameRate(20); // 1秒当たり描画数
10
11}
12
13void draw() {
14  
15  background(255);
16  rect = new ArrayList<PVector>(); //
17
18  //データ
19 
20 int a =int(random(0,100));
21 int b =int(random(0,100-a));
22 int d = 100-a-b; 
23
24 int[] sizes ={
25   
26
27 };
28for(int i = 0; i < a; i++){
29  sizes = (int[])append(sizes,int(random(10,20)));
30}  
31
32for(int i = 0; i < b; i++){
33  sizes = (int[])append(sizes,int(random(1,10)));
34}  
35
36for(int i = 0; i < d; i++){
37  sizes = (int[])append(sizes,int(random(20,39)));
38}
39
40  while (rect.size() < sizes.length) { 
41    int diameter = sizes[rect.size()];
42
43   
44    PVector c = new PVector(random(20,492), random(20,492), diameter);
45    boolean overlapping = false;
46
47    for (PVector p : rect) {
48      
49      if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z)*1.41/ 2) {
50        overlapping = true;
51        break;
52      }
53    }
54
55    if (!overlapping) {
56      rect.add(c);
57    
58    }
59  }
60  
61
62  // 正方形の描画
63  for (
64 
65  int i = 0; i < rect.size(); i++) {
66    PVector p = rect.get(i);
67    noStroke();
68    fill(0);
69    rectMode(CENTER);
70    rect(p.x, p.y, p.z, p.z);
71    
72  }
73 
74
75  // 画像の保存 
76   
77  
78    
79   save("C:/gazou/" + frameCount + "s" + b + "m" + a + "l" + d +".png");
80
81  if (frameCount == 50) { // n枚作ったら止める
82    noLoop(); // 止める
83
84    //launch("start " + sketchPath()); // Windows専用 エクスプローラでフォルダを開く
85    //exit(); // 終了
86  }
87}

問題点
このコードでは正方形の傾きは無いため、ランダムに正方形を回転できるようなコードを書きたいと考えました。
そこで、正方形の描画のところを変更し

for (
 
  int i = 0; i < rect.size(); i++) {
    PVector p = rect.get(i);
    noStroke();
    fill(0);
    translate(p.x, p.y);
    rotate (random(0,89)) ;
    rectMode(CENTER);
    rect(p.x, p.y, p.z, p.z);
  }

としたのですが、正方形が数個しか画像に映らず、うまく描画できませんでした。
translateの値を変更したり、文を追加したりしたのですが改良できませんでした。

// 正方形の描画
for (
 
  int i = 0; i < rect.size(); i++) {
    PVector p = rect.get(i);
    noStroke();
    fill(0);
    translate(256, 256）;
    rotate (random(0,89)) ;
    rectMode(CENTER);
    rect(p.x, p.y, p.z, p.z);
  }

// 正方形の描画
for (
 
  int i = 0; i < rect.size(); i++) {
    PVector p = rect.get(i);
    noStroke();
    fill(0);
　　pushMatrix () ;
    translate(p.x, p.y);
    rotate (random(0,89)) ;
    rectMode(CENTER);
    rect(p.x, p.y, p.z, p.z);
　　popMatrix () ;
  }

うまく正方形を回転させ、100個すべての正方形を画像内に描画するにはどうしたらいいでしょうか？
アドバイスお願いします。

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

回答2件

ベストアンサー

まず、多くのプログラム言語では(そしてProcessingでも)角度は弧度法で表されます。180度が円周率π(3.1415...)ということになります。90度回したいなら3.1415/2, 45度回したいなら3.1415/4ですが、ProcessingではPI, HALF_PI, QUARTER_PIという定数が定義されていますのでこれを使ったほうがベターかと思います。
もう一つ、random(a1,a2)関数はa1以上a2未満の値を返します。なので、90度未満の回転を得たいのなら、rotate(random(0,HALF_PI));とするのがよいでしょう。

つぎに。translate()やrotate(),scale()関数の効果はdraw()関数を抜けるまでは蓄積され、draw()関数を抜けるとリセットされます。

size(300,300);
noFill();
rectMode(CENTER);
square(80,220.7,20);
line(0,0,100,100);
translate(100,100); //(0,0)はもとの座標の(100,100)になる
square(0,0,20);
rotate(QUARTER_PI); //45度時計方向に座標軸を回す
stroke(0,255,0);
square(0,0,20);
stroke(0);
line(0,0,0,100);
translate(0,100); //45度回った座標軸で(0,100)原点を移動する。結果、原点は元の座標で(30,170.7)になる
square(0,0,20);
rotate(-QUARTER_PI); //反時計方向に45度座標軸を回す。結果、座標軸は元の状態に戻る
stroke(0,255,0);
square(0,0,20);
stroke(0);
line(0,0,50,50);
circle(50,50,20); //描かれた円の中心座標は元の座標系では(80,220.7)

resetMatrix()関数でリセットされ、また'pushMatrix()'で現時点の座標系を保存し、pushMatrix()で保存している座標系を復帰します。(この辺はできたみたいですが)

size(300,300);
rectMode(CENTER);
noFill();
translate(100,100);
circle(0,0,20);
pushMatrix();//原点が(100,100)に移動している状態を保存します...(1)
translate(100,0);
circle(0,0,20);
pushMatrix();//原点が(200,100)に移動している状態を保存します...(2)
translate(0,100);
circle(0,0,20);
resetMatrix();//原点が(0,0)にある状態になります
square(0,0,20);
popMatrix(); //原点が(200,100)に移動している状態に復帰します...(2)
square(0,0,20);
translate(50,0);
circle(0,0,20);
pushMatrix(); //原点が(250,100)に移動している状態を保存します...(3)
translate(0,50);
circle(0,0,20);
popMatrix(); //原点が(250,100)に移動している状態に復帰します...(3)
square(0,0,20);
popMatrix(); //原点が(100,100)に移動している状態に復帰します...(1)
square(0,0,20);

なお、pushMatrix()とpopMatrix()は「バランス良く」使わなければいけません。pushMatrix()した回数以上にpopMatrix()してはいけませんし、popMatrix()と対にならないpushMatrix()を多く繰り返すとプログラムが異常動作を起こすかもしれません。まぁ一桁に押さえておくのが普通の使い方かと思います。

さて。translate()やrotate()を用いて図形を描く場合、考え方としては
・単体の図形は0,0を中心に描く
・図形を描く位置をtranslate()で、向きをrotate()で調整する
と考えやすくなるかと思います。というか、そう考えられるようにtranslateやrotate()がある、と言ってもいいんじゃないでしょうか。

もし、元の座標系の(100,100)に四角形を描きたいなら

size(300,300);
rectMode(CENTER);
translate(100,100);
square(0,0,50);

とするわけです。rotate()は0,0を中心に座標系を回しますから、0,0を中心に図形を描けば素直に「回って」くれるわけです。

void setup() {
  size(300, 300);
  rectMode(CENTER);
}
float angle=0.01;
void draw() {
  translate(100, 100);
  rotate(angle);
  square(0, 0, 50);
  angle+=0.05;
}

ついでに付け加えるなら、rectMode()とかelipseMode()、fill()やstroke()などの命令は(translate()やrotate()と違って)最後に実行された効果が関数を出ても残りますから、あまり無意味に繰り返さないほうがスッキリすることが多いです(途中で変更されている可能性があるのなら仕方ないですが)。

ということで全部を適用するとこんなことになるでしょうか。

noStroke(); //ループの外にくくりだす。状況によってはsetup()に移動してもよいかも
fill(0);
rectMode(CENTER);
for ( int i = 0; i < rect.size(); i++) {
    PVector p = rect.get(i);
    resetMatrix () ; //最初に戻すことを明確にするならresetMatrix()の方がよいのでは
    translate(p.x, p.y);
    rotate (random(0,HALF_PI)) ;
    square(0, 0, p.z);
}

投稿2021/09/11 11:39

編集2021/09/11 11:42

thkana

総合スコア7639

21J

2021/09/12 05:05

詳細な解説ありがとうございました。なぜダメだったのか理由まで分かり、問題を解決できました。ありがとうございます

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

まず前回の質問でthkanaさんがわざわざ図入りで説明くださったのですが、結局当たり判定は正方形に外接する円として考えてよいわけですね？（そうでないと回転するとめんどくさいですが^^;
Processing - processingを使用して多くの正方形を描画｜teratail

としたのですが、正方形が数個しか画像に映らず、うまく描画できませんでした。
translateの値を変更したり、文を追加したりしたのですが改良できませんでした。

translate(p.x, p.y)したのですから、rect(0, 0, p.z, p.z)としないとずれることになります。
それからtranslateやrotateは持続しますから、どんどん移動や回転が重なっていってしまいます。
ループごとにリセットしなくてはいけません。
pushMatrix() - Reference / Processing.org
popMatrix() - Reference / Processing.org

appendなんて便利関数があるんですね。知りませんでした^^;
しかしここまでくると配列にする意味もないですね。リストのほうがすっきりすると思います。
append() - Reference / Processing.org
IntList - Reference / Processing.org

Processing
1void setup() {
2  size(512, 512);
3  smooth();
4  noStroke();
5  fill(0);
6  rectMode(CENTER);
7  frameRate(20);
8}
9
10void draw() {
11  background(255);
12
13  int a = int(random(0, 100));
14  int b = int(random(0, 100 - a));
15  int d = 100 - a - b;
16
17  IntList sizes = new IntList();
18  for (int i = 0; i < a; i++) {
19    sizes.append(int(random(10, 20)));
20  }
21  for (int i = 0; i < b; i++) {
22    sizes.append(int(random(1, 10)));
23  }
24  for (int i = 0; i < d; i++) {
25    sizes.append(int(random(20, 39)));
26  }
27
28  ArrayList<PVector> rects = new ArrayList<PVector>();
29  while (rects.size() < sizes.size()) {
30    int size = sizes.get(rects.size());
31    PVector c = new PVector(random(20, 492), random(20, 492), size);
32    boolean overlapping = false;
33
34    for (PVector p : rects) {
35      if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z) * 1.41 / 2) {
36        overlapping = true;
37        break;
38      }
39    }
40
41    if (!overlapping) {
42      rects.add(c);
43    }
44  }
45
46  for (PVector p : rects) {
47    pushMatrix();
48
49    translate(p.x, p.y);
50    rotate(random(0, 89));
51    rect(0, 0, p.z, p.z);
52
53    popMatrix();
54  }
55
56  save("C:/gazou/" + frameCount + "s" + b + "m" + a + "l" + d +".png");
57
58  if (frameCount == 50) {
59    noLoop();
60  }
61}