わさっきhb

大学（教育研究）とか ，親馬鹿とか，和歌山とか，とか，とか．

猪目を描く

computing

なるほど，ハート形です．「猪目窓（いのめまど）」というのですか．
正寿院で調べてみると，以下のページで，いろいろなシーンの猪目窓が，画像になっていました．

「冬は雪の白」の画像を手元にダウンロードし，GIMPで開いて，座標を調べてみたところ，この形（猪目）について，次のことがわかりました．

  • 幅と高さの比は7:6です．
  • 左上と右上は半円となっており，その半径は，高さのおよそ0.2\sqrt{2}倍です．
  • 対称軸のうち猪目の中の線分の長さ（猪目の最も下のところから上に伸ばして凹みに届くまでの距離）は，高さのおよそ0.8倍です．
  • 猪目の最も下のところから伸びる2つの線分は，直交しています．また猪目の上部の凹みの箇所からも，2つの線分が伸びており（asin:B078K1YSCVより見ることのできる「プリハートDX」には，この直線要素がありません），直交しています．

細かい座標は，プログラムで計算させましょう．描画プログラム(inome-drawer.rb)をGistに公開しました．PNG画像を生成します．実行にはRubyのほか，convertコマンドを呼び出すためのImageMagickも必要です．
出来上がりの画像は次のとおりです．

幅と高さは374x322です．上下左右に5pxずつの余白をとっていまして，それを差し引いた364x312は，「冬は雪の白」の猪目窓のサイズと一致します．
計算において，先ほど測定したものから，少し変更しています．具体的には，(0, 0)-(7, 6)の範囲内で描くこととし（1目盛りの長さは，364÷7または312÷6により，52ピクセルとなりまして，52を，インスタンス変数@unitのデフォルト値としています），点(3.5, 6)から点(6.5, 3)まで線を伸ばしたのち，点(6.5, 3)を始点とする半円を描きます．その半径は，\frac{5}{3}としています（プログラム内の「@radius = @unit * 5 / 3」の箇所です）．
生成した画像と，「冬は雪の白」の画像とを，重ね合わせてみましょう．

$ ruby inome-drawer.rb
convert -size 374.0x322.0 xc:cyan -stroke blue -strokewidth 1 -fill none -draw "line 5.0,5.0,369.0,5.0" -draw "line 5.0,57.0,369.0,57.0" -draw "line 5.0,109.0,369.0,109.0" -draw "line 5.0,161.0,369.0,161.0" -draw "line 5.0,213.0,369.0,213.0" -draw "line 5.0,265.0,369.0,265.0" -draw "line 5.0,317.0,369.0,317.0" -draw "line 5.0,5.0,5.0,317.0" -draw "line 57.0,5.0,57.0,317.0" -draw "line 109.0,5.0,109.0,317.0" -draw "line 161.0,5.0,161.0,317.0" -draw "line 213.0,5.0,213.0,317.0" -draw "line 265.0,5.0,265.0,317.0" -draw "line 317.0,5.0,317.0,317.0" -draw "line 369.0,5.0,369.0,317.0" -stroke red -strokewidth 2.0 -fill none -draw "translate 5.0,5.0 path 'M 182.0,312.0 L 338.0,156.0 A 61.28258770283413,61.28258770283413,0,0,0,215.43482459433176,33.434824594331744 L 182.0,66.8696491886635 L 148.56517540566824,33.434824594331744 A 61.28258770283413,61.28258770283413,0,0,0,26.0,156.0 Z'" -quality 92 inome.png
$ wget http://shoujuin.boo.jp/wp-content/uploads/2017/06/i-fuyu.jpg
$ composite -gravity northwest -geometry +159+131 -compose over inome.png i-fuyu.jpg -quality 92 inome2.jpg


左右の端は，ほぼ一致していますが，上端について，生成した画像の方が少し，低くなっています．半径の変更---計測で得た「高さのおよそ0.2\sqrt{2}倍」を基準とすると，計算で使用した「1目盛りの\frac{5}{3}」は，2%ほど小さくなる---が影響しているものと思われます．
ところで，pathの文字列は，convertコマンド（の中のdraw）だけでなく，SVGでも使用可能です．1目盛りの長さが1のときの文字列は，以下のコマンドで獲得できます．

$ irb
irb(main):001:0> require "inome-drawer.rb"
=> true
irb(main):002:0> d=InomeDrawer.new(unit:1,margin:0)
=> #
irb(main):003:0> d.inome_path
=> "M 3.5,6.0 L 6.5,3.0 A 1.1785113019775793,1.1785113019775793,0,0,0,4.1429773960448415,0.6429773960448415 L 3.5,1.285954792089683 L 2.8570226039551585,0.6429773960448415 A 1.1785113019775793,1.1785113019775793,0,0,0,0.5,3.0 Z"

この結果をもとに，テキストエディタを用いて，以下の内容のファイル(inome.svg)を作成します*1．

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="360px" height="310px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!--rect x="0" y="0" width="360" height="310" fill="cyan" stroke="none" /-->
  <g transform="translate(5,5) scale(50)">
    <path d="M 3.5,6.0 L 6.5,3.0 A 1.1785113019775793,1.1785113019775793,0,0,0,4.1429773960448415,0.6429773960448415 L 3.5,1.285954792089683 L 2.8570226039551585,0.6429773960448415 A 1.1785113019775793,1.1785113019775793,0,0,0,0.5,3.0 Z" fill="none" stroke="red" stroke-width="0.04" />
  </g>
</svg>

ブラウザ上で，猪目の形状が表示できました．

*1:「stroke-width="0.04"」は，「scale(50)」で50倍に拡大したあとの線の太さ指定となり，実際の描画では掛け算によって2pxとなります．