今回はProcessingで作品を作る時に僕がよく使っているパターンというかテクニックというかそんなものを解説します。

今回作るのはこういうの。

早速作っていきましょう！

まずはグリッドから作ります

void setup() {
  size(700, 700);
  pixelDensity(2);
  noLoop();
}

void draw() {
  background(255);
  tile();
}

void tile() {
  int count = 20;  //1列にいくつの四角形を表示するか
  float w = width/count;

  for (int j = 0; j < count; j++) {
    for (int i = 0; i < count; i++) {
      //3.5で追加されたrectの正方形バージョン
      square(i*w, j*w, w);
    }
  }
}

グリッドを作る方法は色々ありますが、今回はこの四角形を並べる方法が使いやすいと思います。

僕はよく使う形なのでテンプレートとして保存してあります。

次にひとつひとつの四角形にランダムな図形を配置したいのでこんな関数を作ります。

void randomShape(float x, float y, float s) {
  float hs = s/2;  //一辺の半分
  pushMatrix();
  //座標軸を四角形の中心に移動
  translate(x + hs, y + hs);
  popMatrix();
}

これにシンプルな図形をはめ込みングします。

今回使うのはこの4つの図形

ひとつひとつの座標はこうなっているので

これを目安にカタカタと打ち込んでいきます。

void randomShape(float x, float y, float s) {
  float hs = s/2;    //一辺の半分

  pushMatrix();
  //座標軸を四角形の中心に移動
  translate(x + hs, y + hs);
  fill(0);
  noStroke();
  //4パターンの中からランダムに図形を選択
  if (random(1) > 3.0/4.0) {
    //四角形
    square(-hs, -hs, s);
  } else if (random(1) > 2.0/4.0) {
    //三角形
    //0度、90度、180度、270度のどれかに回転をさせる
    rotate(HALF_PI * int(random(4)));
    triangle(-hs, -hs, hs, hs, -hs, hs);
  } else if (random(1) > 1.0/4.0) {
    //半円
    rotate(HALF_PI * int(random(4)));
    arc(0, -hs, s, s, 0, PI);
  } else {
    //1/4円
    rotate(HALF_PI * int(random(4)));
    arc(-hs, -hs, s*2, s*2, 0, HALF_PI);
  }
  popMatrix();
}

random()を使って分岐させます。少数で表してもいいのですが同じ確率で分岐させる場合はわかりやすいので分数を使っています。
.0をつけないと小数点以下が切り捨てられるので注意しましょう。

四角形以外は回転したパターンも使います。このために軸を中心に移動させました。

これで完成！

完成形のコードはこうなります。

void setup() {
  size(700, 700);
  pixelDensity(2);
  noLoop();
}

void draw() {
  background(255);
  tile();
}

void tile() {
  int count = 20;  //1列にいくつの四角形を表示するか
  float w = width/count;

  for (int j = 0; j < count; j++) {
    for (int i = 0; i < count; i++) {
      //3.5で追加されたrectの正方形バージョン
      //square(i*w, j*w, w);
      randomShape(i*w, j*w, w);
    }
  }
}

void randomShape(float x, float y, float s) {
  float hs = s/2;    //一辺の半分

  pushMatrix();
  //座標軸を四角形の中心に移動
  translate(x + hs, y + hs);
  fill(0);
  noStroke();
  //4パターンの中からランダムに図形を選択
  if (random(1) > 3.0/4.0) {
    //四角形
    square(-hs, -hs, s);
  } else if (random(1) > 2.0/4.0) {
    //三角形
    //0度、90度、180度、270度のどれかに回転をさせる
    rotate(HALF_PI * int(random(4)));
    triangle(-hs, -hs, hs, hs, -hs, hs);
  } else if (random(1) > 1.0/4.0) {
    //半円
    rotate(HALF_PI * int(random(4)));
    arc(0, -hs, s, s, 0, PI);
  } else {
    //1/4円
    rotate(HALF_PI * int(random(4)));
    arc(-hs, -hs, s*2, s*2, 0, HALF_PI);
  }
  popMatrix();
}

//クリックで再描画
void mousePressed() {
  redraw();
}

//sキーで画像保存
void keyPressed(){
  if(key == 's')saveFrame("####.png");
}

tile()の中のsquare()はもう用済みなので彼にはこの世界からコメントアウトしてもらいました。

クリックすると再描画、sキーで画像保存します。

あとは実行して図形たちが踊る様をご覧あれ！

幾何学的な模様ですね。秩序からのカオス。

新たな形、思いもよらなかった隙間が生まれましたね。

…あなたそんな顔もできるのね。

まとめ

今回紹介したこのテクニックを派生させるとしたら、
シンプルに図形、色などを変えてみる。
図形をアニメーションさせる。
任意の図形の描画される確率を変えてみる。

無限に応用ができますね。

何か素敵なモノができたらぜひシェアしてください！

Happy coding!

------------------------(2019/03/19 追記)-------------------------

この記事を見てなにか作っていただいた方々を紹介します！

本当にありがとうございます！