1. ホーム
  2. 壁紙アート
  3. 五角形によるタイリング
  4. 五角形によるタイリング(Type 5)

ここでは、15タイプある五角形によるタイリングのうち、Type 5のタイリングを再現してみました。なお、今回のタイリングを作成するにあたって、杉本晃久さんのサイトで紹介されている「凸五角形タイル張り問題」を参考にしました。

五角形によるタイリング(Type 5)

今回、再現した五角形によるタイリング(Type 5)は以下のような図形になります。

五角形によるタイリング(Type 5)

以下で、この五角形によるタイリング(Type 5)の描き方について解説していきます。

五角形によるタイリング(Type 5)の描き方

対称性について

まず、この五角形によるタイリング(Type 5)の対称性について考えます。

五角形によるタイリング(Type 5)の対称性

上図のように、タイリングのパターンをじっくり見ていくと、上図の赤丸の周りの180°回転、赤三角点の周りの120°回転、および赤六角星型点の周りの60°回転に対して図形は回転対称になっていることが分かります。また、黒色の点を格子としてみると、近接する3つの黒色の点同士が正三角形を形作っていることから、黒色の点は三角格子になっていることが分かります。これらをまとめると、五角形によるタイリング(Type 5)は、壁紙群P6の対称性を持つことが分かります。さらに言えば、アイソヘドラルタイリングIH21(P6)に分類されます。

五角形の準備

今回利用する五角形は以下のような図形になります。

Type 5の五角形

五角形の角度のうち、上図のCが60°, Eが120°になるようにとります。また、辺CBと辺CD、および辺EAと辺EDの長さがそれぞれ同じになるようにとります。

この五角形を描く際、下図のように三角格子を基準にすると描きやすいです。

三角格子を基準にしてType 5の五角形を描く
  1. 左下と右下の2つの黒色の点が三角格子点で、左上の赤色の点は、近接する3つの三角格子点で形作られる正三角形の重心です。
  2. 上図のように、五角形の辺の長さ\(r_1, r_2\)を指定して点Aと点Bを決めると、Type 5の五角形を得ることができます。

基本図形の準備

五角形によるタイリング(Type 5)の基本図形は、Type 5の五角形そのものになります。なお、今回は\(r_1, r_2\)をそれぞれ格子点間距離に対して\(1/6, 1/12\)倍となるようにとりました。

壁紙群P6の対称性に合わせて並べる

ここまで準備ができたら、あとは壁紙群P6の対称性に合わせて基本図形を並べていくことで五角形によるタイリング(Type 5)を行うことができます。

ソースコード

今回再現した五角形によるタイリング(Type 5)のプログラムのソースコードを示しておきます。

PVector[][] lattice; // 格子点ベクトル
PShape tile; // タイル
PVector[] base = new PVector[2]; // 格子を張るベクトル
int col_num = 4; // 描画するタイルの列の数
float scalar; // タイルの辺の長さ

void setup(){

  size(1000, 1000, P2D);
  noFill();
  scalar = width * 1.0 / col_num; // 描画ウィンドウと行の数からタイルの大きさを決定
  makeTriangleVector(); // 三角格子を張るベクトルの生成
  makeLattice(); // 格子点ベクトルを生成
  makeTileP6(); // タイルを生成
  drawTiling(); // タイリングを描画
}

// 三角格子を張るベクトルを生成する関数
void makeTriangleVector(){
  base[0] = new PVector(1.0, 0.0);
  base[1] = PVector.fromAngle(PI / 3);
}

// 三角格子を生成する関数
void makeLattice(){
  int row_num = ceil(col_num / base[1].x); // 行の数
  lattice = new PVector[col_num + 5][row_num + 1];
  for (int i = 0; i < col_num + 5; i++){
    for (int j = 0; j < row_num + 1; j++){
      PVector v = new PVector(base[0].x * scalar * i - (j%2) * scalar /2.0, base[1].y * scalar * j); 
      lattice[i][j] = v;        
    }
  }
}

// 五角形を生成する関数(基本図形)
PShape makePentagon(){
  
  PVector[] v = new PVector[5]; // 五角形の頂点
  float r1, r2;
  r1 = 1.0/6.0 * scalar;
  r2 = 1.0/12.0 * scalar;

  v[0] = new PVector(-r2, -r1);
  v[0].sub(base[0].copy().mult(scalar));
  v[1] = new PVector(r2, r1);
  v[1].sub(base[0].copy().mult(scalar));
  v[2] = new PVector(0.0, 0.0);
  v[3] = v[1].copy().rotate(radians(60));
  v[4] = new PVector(0.0, -2.0 / 3.0 * base[1].y * scalar);
  v[4].sub(base[0].copy().mult(scalar));
  
  // 五角形を描く
  PShape pentagon = createShape();
  pentagon.beginShape(); 
  for(int i=0; i<5; i++){
    pentagon.vertex(v[i].x, v[i].y);
  }
  pentagon.endShape(CLOSE);
  
  return pentagon;
}

// タイルを生成する関数
void makeTileP6(){
  tile = createShape(GROUP); // PShapeのグループを作る
  for (int i=0; i<6; i++){
    PShape pentagon = makePentagon(); // 五角形の生成
    pentagon.rotate(PI * i / 3); // 60度回転
    tile.addChild(pentagon); // グループに追加
  }
}

// 格子形状に合わせたタイリングを描画する関数
void drawTiling(){
//  background(255);
  for (int i=0; i<lattice.length; i++){
    for (int j=0; j<lattice[0].length; j++){
      if( (i%2 == 0 && j%4 == 0) || (i%2 == 1 && j%4 == 2) ){
        tile.resetMatrix();
        tile.translate(lattice[i][j].x, lattice[i][j].y); // タイルの位置を指定
        shape(tile); // タイルを描画
      }
    }
  }
}

考察

今回描いた五角形によるタイリング(Type 5)は、アイソヘドラルタイリングIH21(P6)そのものでした。