ここでは、15タイプある五角形によるタイリングのうち、Type 10のタイリングを再現してみました。なお、今回のタイリングを作成するにあたって、杉本晃久さんのサイトで紹介されている「凸五角形タイル張り問題」を参考にしました。
Contents
五角形によるタイリング（Type 10）
今回、再現した五角形によるタイリング（Type 10）は以下のような図形になります。
以下で、この五角形によるタイリング（Type 10）の描き方について解説していきます。
五角形によるタイリング（Type 10）の描き方
対称性について
まず、この五角形によるタイリング（Type 10）の対称性について考えます。
上図のように、タイリングのパターンをじっくり見ていくと、上図の赤丸の周りの180°回転に対して図形は回転対称になっていることが分かります。また、黒色の点を格子としてみると、近接する4つの黒色の点同士が平行四辺形を形作っていることから、黒色の点は一般格子になっていることが分かります。これらをまとめると、五角形によるタイリング（Type 10）は、壁紙群P2の対称性を持つことが分かります。さらに言えば、アイソヘドラルタイリングIH8（P2）に分類されます。
五角形の準備
今回利用する五角形は以下のような図形になります。
五角形の角度のうち、上図の角度Aが90°、角度Bと角度Eの和が180°、角度Dの2倍と角度Eの和が360°、角度Cの2倍と角度Bの和が360°になるようにとります。また、辺ABの長さと辺AEの長さ、および辺DEと辺CBの和の長さが同じになるようにとります。
この五角形は、角B,C,D,Eのいずれか一つを決めると、他の角度は決まります。今回は角度Bを決めて五角形を描いてみたいと思います。角度Bを決めると、\[ C = 180^{\circ} – \frac{B}{2}, \ \ D = 90^{\circ} + \frac{B}{2}, \ \ E = 180^{\circ} – B \]となります。
次に、これらの角度に合わせて、辺の長さを決めていきます。下図のように、変数\(t \ \ (0<t<1) \)を導入して、辺ABと辺AEの長さを\(r_1\)とおくことで、辺EDの長さを\(tr_1\)、辺CBの長さを\( (1-t)r_1 \)と設定します。
このとき、右向きを\(x\)軸の正の向き、下向きを\(y\)軸の正の向きとして、ベクトルの成分を表すとすると、\[ \begin{align} \overrightarrow{ED} &= (t \sin B, -t \cos B) \\ \overrightarrow{AD} &= \overrightarrow{AE} + \overrightarrow{ED} = (t \sin B, -1-t \cos B) \\ \overrightarrow{BC} &= ( -(1-t) \cos B, -(1-t) \sin B ) \\ \overrightarrow{AC} &= \overrightarrow{AB} + \overrightarrow{BC} = (1-(1-t) \cos B, -(1-t) \sin B ) \end{align} \]となります（\(r_1=1\)としています）。また、\[ \overrightarrow{DC} = \overrightarrow{AC}-\overrightarrow{AD} = (1-t \sin B-(1-t) \cos B, 1+t \cos B -(1-t) \sin B ) \]となります。\( \overrightarrow{DE}\)と\( \overrightarrow{DC}\)の間には\( \overrightarrow{DE} \cdot \overrightarrow{DC} = | \overrightarrow{DE} | | \overrightarrow{DC} | \cos D \)の関係式が成り立つので、この関係式に上記のベクトルの成分で表した式を代入して整理すると、\[ t-\sin B + \cos B = – |\overrightarrow{DC} | \sin \frac{B}{2} \]という式が得られます。また、関係式\( \overrightarrow{CB} \cdot \overrightarrow{CD} = | \overrightarrow{CB} | | \overrightarrow{CD} | \cos C \)から、\[ -1+t+\sin B + \cos B = |\overrightarrow{CD} | \cos \frac{B}{2} \]が得られます。これらの式から変数\(t\)の値は、\[ t = \left( 2 \sin \frac{B}{2} – \cos \frac{B}{2} \right) / \left( \sin \frac{B}{2} + \cos \frac{B}{2} \right) \]を計算することで得られます。
以上より、Type 10の五角形は頂点Bの角度と辺ABの長さを指定することで描くことができます。
基本図形の準備
次に、基本図形を準備します。今回は、以下のような組合せを基本図形とします。
この基本図形を実際に描いていくための手順を示しておきます。
- ⓪の図形を描きます。
- ⓪の五角形を⓪の頂点Aの周りで反時計回りに角度A（今回は90°）だけ順に回転することで①③④の五角形を描きます。
- ⓪の五角形を⓪の辺ABを軸として鏡映対称させ、その頂点Aの周りで時計回りに角度B－90°だけ回転し、その後、その頂点Aが⓪の五角形の頂点Cと一致するように五角形を平行移動すると、②の五角形を描くことができます。
- 3と同様に、③の五角形を③の辺ABを軸として鏡映対称させ、その頂点Aの周りで時計回りに角度B－90°だけ回転し、その後、その頂点Aが③の五角形の頂点Cと一致するように五角形を平行移動すると、⑤の五角形を描くことができます。
なお、壁紙群P2の対称性に合わせて基本図形を並べていく際に、今回は⓪の五角形の頂点A（上図の黒丸）を一般格子点と合うようにしています。また、⓪の五角形の頂点CとDの中点、③の五角形の頂点CとDの中点、②の五角形の頂点DとEの中点、⑤の五角形の頂点DとEの中点、②の五角形の頂点BとCの中点、および⑤の五角形の頂点BとCの中点（いずれも上図の赤丸）を隣り合う一般格子点同士の中点と一致するようにします。
一般格子の準備
上記で説明したように、上図の黒丸や赤丸がそれぞれ一般格子点や隣り合う一般格子点同士の中点と一致するようにとりますので、それに伴い、一般格子の形状も決まってきます。つまり、一般格子を張る2つのベクトルは、⓪の五角形の頂点Aから③の五角形の頂点CとDの中点へのベクトルを2倍したものと、⓪の五角形の頂点Aから②の五角形の頂点DとEの中点へのベクトルを2倍したものとになります。
壁紙群P2の対称性に合わせて並べる
ここまで準備ができたら、あとは壁紙群P2の対称性に合わせて基本図形を並べていくことで五角形によるタイリングを行うことができます。
ソースコード
今回再現した五角形によるタイリング（Type 10）のプログラムのソースコードを示しておきます。
PVector[][] lattice; // 格子点ベクトル
PShape tile; // タイル
float pentagon_size = 100.0; // 五角形の基準サイズ
float pentagon_angle = 100.0; // Type 6の五角形の標準角度（頂点Bの角度）
PVector[] base = new PVector[2]; // 格子を張るベクトル
void setup(){
size(1000, 1000, P2D);
noFill();
makeTileP2(); // タイルを生成
makeGeneralVector(); // 一般格子を張るベクトルの生成
makeLattice(); // 格子点ベクトルを生成
drawTiling(); // タイリングを描画
}
// 五角形の頂点を取得する関数
PVector[] getPentagon(){
float A, B, C, D, E;
A = radians(90.0);
B = radians(pentagon_angle);
E = radians(180.0)-B;
C = radians(180.0) - B/2.0;
D = radians(90.0) + E/2.0;
float sB2 = sin(B/2.0);
float cB2 = cos(B/2.0);
float t;
t = (2.0 * sB2 - cB2) / ( sB2 + cB2 );
float r1 = pentagon_size;
PVector[] v = new PVector[5];
v[0] = new PVector(0.0,0.0);
v[1] = new PVector(r1,0.0);
v[2] = v[1].copy().add( PVector.fromAngle(B - radians(180.0)).mult((1.0 - t) * r1) );
v[4] = new PVector(0.0,-r1);
v[3] = v[4].copy().add( PVector.fromAngle(radians(90.0) - E).mult(t * r1) );
return v;
}
// 五角形を指定された軸に対して鏡映する関数
PVector[] getReflection(
PVector[] v, // 鏡映する元の図形の頂点座標
int index1, // 鏡映軸の指定するための始点位置のindex
int index2 // 鏡映軸の指定するための終点位置のindex
){
PVector[] ref = new PVector[5];
PVector axis = v[index1].copy().sub(v[index2].copy());
for(int i=0; i<5; i++){
PVector temp = v[i].copy().sub(v[index1].copy());
float t = temp.dot(axis)/ axis.dot(axis);
PVector p = v[index1].copy().add( axis.copy().mult(t) );
ref[i] = p.copy().mult(2.0).sub(v[i].copy());
}
return ref;
}
// 五角形を指定された点の周りで回転する関数
PVector[] getRotation(
PVector[] v, // 回転する元の図形の頂点座標
int index, // 回転軸の座標位置のindex
float angle // 回転角度
){
PVector[] rot = new PVector[5];
for(int i=0; i<5; i++){
PVector temp = v[i].copy().sub(v[index].copy());
PVector p = temp.copy().rotate(radians(angle));
rot[i] = v[index].copy().add(p.copy());
}
return rot;
}
// 五角形を指定されたベクトル方向に平行移動する関数
PVector[] getTranslation(
PVector[] v, // 平行移動する元の図形の頂点座標
PVector x // 平行移動するベクトル
){
PVector[] trans = new PVector[5];
for(int i=0; i<5; i++){
trans[i] = v[i].copy().add(x);
}
return trans;
}
// 6つの五角形から構成される基本図形を生成する関数
PShape makeFundamentalShape(){
// 6つの五角形のそれぞれの座標を取得
PVector[][] v = new PVector[6][5]; // 基本図形を構成する6つの五角形の座標
v[0] = getPentagon();
v[1] = getRotation(v[0], 0, -90.0);
v[2] = getReflection(v[0], 0, 1);
v[2] = getRotation(v[2], 0, pentagon_angle - 90.0);
v[2] = getTranslation(v[2], v[0][2]);
v[3] = getRotation(v[0], 0, -2.0*90.0);
v[4] = getRotation(v[0], 0, -3.0*90.0);
v[5] = getReflection(v[3], 0, 1);
v[5] = getRotation(v[5], 0, pentagon_angle - 90.0);
v[5] = getTranslation(v[5], v[3][2]);
// 五角形を2つ描いて1つのグループにまとめる
PShape pentagons = createShape(GROUP);
for(int i=0; i<6; i++){
PShape pentagon = createShape();
pentagon.beginShape();
for(int j=0; j<5; j++){
pentagon.vertex(v[i][j].x, v[i][j].y);
}
pentagon.endShape(CLOSE);
pentagons.addChild(pentagon);
}
return pentagons;
}
// タイルを生成する関数
void makeTileP2(){
tile = createShape(GROUP); // PShapeのグループを作る
PShape pentagons = makeFundamentalShape(); // 6つの五角形で構成される図形の生成
tile.addChild(pentagons); // グループに追加
}
// 一般格子を張るベクトルを生成する関数
// 基本図形のサイズから算出する
void makeGeneralVector(){
// 6つの五角形のそれぞれの座標を取得
PVector[][] v = new PVector[6][5]; // 基本図形を構成する6つの五角形の座標
v[0] = getPentagon();
v[1] = getRotation(v[0], 0, -90.0);
v[2] = getReflection(v[0], 0, 1);
v[2] = getRotation(v[2], 0, pentagon_angle - 90.0);
v[2] = getTranslation(v[2], v[0][2]);
v[3] = getRotation(v[0], 0, -2.0*90.0);
v[4] = getRotation(v[0], 0, -3.0*90.0);
v[5] = getReflection(v[3], 0, 1);
v[5] = getRotation(v[5], 0, pentagon_angle - 90.0);
v[5] = getTranslation(v[5], v[3][2]);
base[0] = v[2][3].copy().add( v[2][4].copy().sub(v[2][3].copy()).mult(0.5) ).mult(2.0);
base[1] = v[3][2].copy().add( v[3][3].copy().sub(v[3][2].copy()).mult(0.5) ).mult(2.0);
}
// 一般格子を生成する関数
void makeLattice(){
int col_num = ceil(width / abs(base[0].x)) + 1; // 列数
int row_num = ceil(height / abs(base[1].y)) + 2; // 行の数
lattice = new PVector[col_num][row_num];
for (int i = 0; i < col_num; i++){
for (int j = 0; j < row_num; j++){
PVector v = PVector.mult(base[0], i);
v.add(PVector.mult(base[1], j-2));
lattice[i][j] = v.copy();
}
}
}
// 格子形状に合わせたタイリングを描画する関数
void drawTiling(){
// background(255);
for (int i=0; i<lattice.length; i++){
for (int j=0; j<lattice[0].length; j++){
tile.resetMatrix();
tile.translate(lattice[i][j].x, lattice[i][j].y); // タイルの位置を指定
shape(tile); // タイルを描画
}
}
}
// 格子形状に合わせたタイリングを描画する関数
void drawTiling(){
// background(255);
for (int i=0; i<lattice.length; i++){
for (int j=0; j<lattice[0].length; j++){
tile.resetMatrix();
tile.translate(lattice[i][j].x, lattice[i][j].y); // タイルの位置を指定
shape(tile); // タイルを描画
}
}
}