2022年6月22日読了時間: 2分

Processing 四角形分割

更新日：2022年8月1日

訳あって四角形を被りなく分割したくなったので、今回は四角形の分割方法について

書いていきます。

分割手順

四角形の辺が横＞縦の場合、四角形を縦に分割

図1

図2

四角形の辺が縦＞横の場合、四角形を横に分割

図3

図4

この2つの手順を分割した四角形に対してループさせることで分割をすることができます。

実装

四角形の3つの情報を保持するRectクラスを作成します。

四角形の位置情報
横の長さ
縦の長さ


class Rect{
  //位置情報
  PVector location;
  //横の長さ
  int w;
  //縦の長さ
  int h;
  
  //コンストラクタ
  Rect(PVector _p, int _w, int _h) {
    location = _p;
    w = _w;
    h = _h;
  }
}

四角形を分割するdivideRect関数を作成します。


void divideRect(ArrayList<Rect> _rectList1, ArrayList<Rect> _rectList2) {

  for (Rect rect : _rectList1) {
    //Rectオブジェクトの縦、横を取得
    int rectW = rect.w;
    int rectH = rect.h;
    
    if (rect.w>rect.h) {
     //分割に使用する横の長さを取得
      int randomW = int(random(1, rectW));
     
     //図2-①
      _rectList2.add(new Rect(rect.location, randomW, rectH));
     
     //図2-②
      _rectList2.add(new Rect(new PVector(rect.location.x+randomW,      
      rect.location.y), rectW-randomW, rectH));
      
    } else if (rect.h>rect.w) {
     //分割に使用する縦の長さを取得
      int randomH = int(random(1, rectH));
     
     //図4-①
      _rectList2.add(new Rect(rect.location, rectW, randomH));
      
     //図4-②
      _rectList2.add(new Rect(new PVector(rect.location.x, 
      rect.location.y+randomH), rectW, rectH-randomH));
      
    } else {
     //Rectオブジェクトの縦と横の長さが同じ場合は第二引数のListにそのまま追加
      _rectList2.add(new Rect(rect.location, rectW, rectH));
    }
  }
  
  //第一引数のListを再利用するため要素を全削除
  _rectList1.clear();
}

メイン


//分割対象rectオブジェクトを格納するList
ArrayList<Rect> rectList1 = new ArrayList<Rect>();
ArrayList<Rect> rectList2 = new ArrayList<Rect>();

//分割回数
int divNum = 10;

void setup() {
  size(850, 850);
  background(255);
  pixelDensity(displayDensity());
  
  //最初に分割対象となる四角形をListに格納(分割する為あえて縦横をズラす)
  rectList1.add(new Rect(new PVector(0, 0), 851, 850));
  
  //divNumが0になるまで分割を繰り返す
  while (divNum>0) {
    divideRect(rectList1, rectList2);
    divideRect(rectList2, rectList1);
    divNum--;
  }
  
  //描画
  noStroke();  
  for (Rect rect : rectList1) {
    fill(random(255), random(255), 0);
    rect(rect.location.x, rect.location.y, rect.w, rect.h);
  }
}

rectList1、rectList2は分割対象と分割後の四角形を交互に格納していくために使用します。

交互に使用していくことで分割した四角形の位置が重複しなくなります。

最初に格納する四角形は分割するために横と縦の値をズラして格納しています。

こちらが四角形分割関数と油絵の質感表現の記事を使用して作った作品です！

なんだかモンドリアンの作品のようにも見えますよね。

油絵の質感と合わせることでジェネラティブらしさに人間が描いたような深みを

作品に取り入れることができました。

Processingで作品を製作しているのでジェネラティブらしさを出しつつ自分らしさも表現していきたいですね。

以上が四角形分割の作成方法についてでした。

最後まで読んでいただきありがとうございました！

Processing 四角形分割

最新記事

Comments