タイルパターンを描く タイルパターンを描く

タイリングとは、平面を図形（タイル）で隙間なく敷き詰めることです。 Contetx Freeには、タイリングに使用できるタイルを描く機能があります。 Contetx Freeで描かれたタイルは、つなぎ目がわからないように敷き詰めることができますので、壁紙やWebサイトの背景画像などに応用できます。 

startshape Circles 

rule Circles {
  CIRCLE {}
  Circles { x 0.95 s 0.9 r 30}
}
no tile

このイメージをタイルにしてみましょう。 

startshape Circles 

tile {s 3 4 }

rule Circles {
  CIRCLE {}
  Circles { x 0.95 s 0.9 r 30}
}
tile 1

上下左右がつながったイメージが出来上がりました。 コードを見て行きましょう。

タイルとしてイメージを描画するために、tileの後の中カッコ内に設定が記述されています。 sは描画サイズで、最初の数値がx軸方向のサイズ、次がy軸方向のサイズです。 y軸方向のサイズが省略された場合は、最初の数値がx軸、y軸の両方で使用されます。 この例では、x軸方向に3個分、y軸方向に4個分が描画領域となりました。 デフォルトでは最初に描画される図形（この例では円）が中央に来るように配置されます。 描画領域からはみ出した部分が上下左右に移動して描画され、タイルのように敷き詰めることができるイメージになります。

今度は描画位置をズラしてみましょう。 

startshape Circles 

tile {s 3 4 x -1 y 2}

rule Circles {
  CIRCLE {}
  Circles { x 0.95 s 0.9 r 30}
}
tile 2

xとyを指定すると、描画時のx軸方向、y軸方向の位置を変更できます。 この例では、x軸の逆方向（左）に1個分、y軸方向（上）に2個分描画位置を上げて描かれるようにしています。

着色されているイメージも、タイルにすることができます。 以前に作成した木のコードで試してみましょう。 

startshape Start 

tile {s 10 }

rule Start {
    Tree { |h 120 |b 1 h 0 b 0 }
}

rule Tree 0.6 {
  SQUARE { sat 1 }
  Tree { h 0.03| b 0.02| y 1}
}

rule Tree 0.2 {
  CIRCLE { sat 1 y -0.5 }
  Tree { h 0.03| b 0.02| y -0.5 r 30 s 0.75 }
  Tree { h 0.03| b 0.02| y -0.5 r -30 s 0.75 }
}
tile tree

壁紙として使うかどうかは別にして、つなぎ目がわからないように敷き詰めることができるタイルになりました。

できるようになった（はずの）こと
  1. タイルパターンを描画できる