Canvasで着物の柄である「毘沙門亀甲」を描画する

Canvasで遊ぶことが多いのだけれど、もう少し数学を使って描画やアニメーションをつくればおもしろいものができると考えていた。そこで図書館で見つけたこの紋様の本を借りた。これは昔の家紋や着物の模様を数学で説明している。その説明が難解で、結局読んだ意味はなかったのだけれど、いろいろ紋様が紹介されていて、参考にはなった。

See the Pen Bishamon-Kikko Pattern by naoyashiga (@naoyashiga) on CodePen

そのなかで「毘沙門亀甲」の紋様が目に止まり、描画することにした。

・参考
毘沙門亀甲 - Google 検索

毘沙門亀甲の一つのパーツを描画する

最初は六角形隙間なく並べて、いらない辺を消去しようとしたけど、辺を消去する条件を分けるのが煩雑になりやめた。だから一つのパーツを描画する関数を作って、それの並べ方を工夫する手法をとった。

f:id:naoyashiga:20131113150958p:plain
一つのパーツとは上の下手くそな絵にある、3つの六角形を合体させたものだ。赤い点線は本来、描画される線だけど、消去している。

毘沙門オブジェクトを用意

bishamon = {
	    size: 20,
	    xCenter: 0,
	    yCenter: 0,
	    lineWidth: 10,
	    arrowWidth: 8,
	    arrowColor: "#080808"
},

プロパティ名	内容
size	六角形の一辺の長さ
xCenter	パーツの中心のx座標
yCenter	パーツの中心のy座標
lineWidth	辺の太さ
arrowWidth	パーツ内部の線の太さ
arrowColor	パーツ内部の線の色

f:id:naoyashiga:20131113151912p:plain
青い線がパーツ内部の線(arrow)。ピンクの点がパーツの中心だ。

f:id:naoyashiga:20131113152502p:plain

bishamon.xMargin = bishamon.size * Math.cos(2 * Math.PI / 12);

xMarginというプロパティも用意する。これは緑の線の長さ。

上の六角形を描画する

//move to top side hexagon center
ctx.moveTo(bishamon.xCenter, bishamon.yCenter - bishamon.size);

上の六角形の中心に移動

//line top side hexagon
for(var k = 0;k <= 6;k++){
	theta = (k * 2 * Math.PI / 6) - 2 * Math.PI / 12;
	ctx.lineTo(bishamon.xCenter + bishamon.size * Math.cos(theta),
		bishamon.yCenter + bishamon.size * Math.sin(theta));
}

右下、左下の六角形も同様に、各六角形の中心に移動して描画する。

必要のない線を消去する

CanvasにclearLineはないので、clearRectするしかない。しかしこれは透明になって後から、背景色で描画しないといけないので面倒くさい。それに斜めに四角を描画するのは回転を考えないといけないので大変。だから背景色の線を重ねることにした。

 　　　//clear inside three lines
	    ctx.save();
	    ctx.beginPath();
	    bishamon.xCenter += bishamon.xMargin;
	    bishamon.yCenter -= bishamon.size / 2;
	    ctx.moveTo(bishamon.xCenter, bishamon.yCenter);
	    ctx.lineTo(bishamon.xCenter, bishamon.yCenter + bishamon.size);

	    ctx.moveTo(bishamon.xCenter, bishamon.yCenter);
	    ctx.lineTo(bishamon.xCenter - bishamon.xMargin, bishamon.yCenter - bishamon.size / 2);

	    ctx.moveTo(bishamon.xCenter, bishamon.yCenter);
	    ctx.lineTo(bishamon.xCenter + bishamon.xMargin, bishamon.yCenter - bishamon.size / 2);


	    ctx.strokeStyle = backgroundColor;
	    ctx.lineWidth = line.w * 1.5;
	    ctx.stroke();
	    ctx.closePath();
	    ctx.restore();