ドット絵で30度の斜線を引くには

ドット絵で中途半端な角度の斜線を引くための計算メモ．数学的に考えると，極座標系のグリッド化問題になる？

結論からいくと，

単純に30度を引くには，「2,2,1,...」の周期並びで問題ない． arctan 3/5 ≒ 31度になる．+1度の誤差が発生するが，ジャギ消し分含めるとあまり問題ないはず
画像サイズが大きくもっと精度良くしたい場合には，『「2,1,...」の周期並べx4，「2,2,...」の均等並べx13, 「2,1,...」の周期並べx4』の周期並べが良さげ． arctan 58/100 ≒ 30.1度で+0.1度まで誤差を抑えられる．でもジャギ消しで見え方変わるのでここまでこだわる必要があるかはなんとも言えない．

f:id:cartman0:20211007220039j:plain — 30°の表現2パターン

環境

Windows10 64bit
- edge 1.29b

ドットの並べ方技法

まず，「ドット絵プロフェッショナルテクニック, 秀和システム, 2005」で名づけられいる斜線の並べ方をまとめる．

ドット絵プロフェッショナルテクニックドット打ちからアニメーションまで (Game developer books)

作者:高野隼人
秀和システム

Amazon

規則並べ

例えば，横に2ドット並べた後に縦に1ドットずらして均等に並べていく技法．上記の本では「2,2, ...」のように表記されている．

f:id:cartman0:20211007201527p:plain — 規則並べ

周期並べ

一方で，「2,1,2,1, ...」のように周期的に並べていくのが周期並べになる．

f:id:cartman0:20211007201540p:plain — 周期並べ

計算方法メモ

上記を踏まえて30°の斜線を引くことを考える．

今回は，単純にtanで横縦比を計算する方法でやってみる．手順としては，

tan（正接）で横縦比を計算する．
その比から1周期の横ドット総数と縦ドット総数を決める
その総数になるような配置方法を決める．

タイル配置問題のようなものなので建築や芸術分野でもっと精密な計算方法もありそう?

例：30°の場合

まず，tan30°を計算する．

$\tan{ 30^{ \circ } } = 0.57735026919$

この横縦比を丸める．ここの丸め方で精度が決まる．今回は0.6で丸める．

$\tan{ 30^{ \circ } } \fallingdotseq 0.6$

この比から横ドット数と縦ドット数を決める．

$0.6 = 6 /10 = 3 / 5$

ドットを並べた総数が，横5ドット，縦3ドットになればいいことがわかる．

ここから並べ方を考える必要があり，機械的にやろうとすると配分問題になりちょっとややこしい．

まず，1周期に縦3ドット並べる必要があるので横には3種類並べればいい． [?, ?, ?]

そして，横に並べた総数が5ドットにすればいい．(?+?+?=5)

ここで，5ドットを3種類で割って5÷3 = 1あまり2. 配分として[1, 1, 1] 余り2ドットになる．この余ったドットを配分してやればいい．

今回の場合，配分としては主に2パターン

[3, 1, 1]
[2, 2, 1]

になるがドット数の変化が緩やかなほうが違和感がないので [2, 2, 1]が望ましい．

f:id:cartman0:20211007201258p:plain — 30deg[2,2,1,...]周期並べ

ちなみに，丸めた後の実際の角度を計算するにはarctanで計算できる．

$\mathrm{arctan} 0.6 = \mathrm{arctan} 3/5 = 0.5404195 [rad$ = 30.96 \fallingdotseq 31^{ \circ } ]

丸め誤差を変えて精度を上げると

丸め誤差を変えて同じような計算をする．

$\tan{ 30^{ \circ } } \fallingdotseq 0.58 \\\\ 0.58 = 58 /100 = 29 / 50$

横50ドット，縦29ドットを並べればいい．横の並べ方は29種類になる． [? x 29], sum ? = 50

余りドットを考えると，[1 x 29] 余り21ドット．

余りドットを含めて，[2 x 21, 1 x 8 ].

配置パターンを考える．

[2 x 21, 1 x 8 ]周期並べ
[1 x 4, 2 x 21, 1 x 4 ]周期並べ
[(2, 1) x 4, 2 x 13, (2, 1) x 4 ]周期並べ

この3パターンを比較してみる．

f:id:cartman0:20211007201124p:plain — 3パターンの並べ方（64x64pxを12倍して切り抜いている）

赤： [2 x 21, 1 x 8 ]周期並べ
青：[1 x 4, 2 x 21, 1 x 4 ]周期並べ
緑：[(2, 1) x 4, 2 x 13, (2, 1) x 4 ]周期並べ

で描画している．

スケール等倍も見てみる．

スケール等倍

赤[2 x 21, 1 x 8 ]周期並べの場合: 終端で角度が変わるので違和感がある．
青[1 x 4, 2 x 21, 1 x 4 ]周期並べの場合:始点と終端が揃うが，途中で角度が変わるのでまだ違和感が残る
緑[(2, 1) x 4, 2 x 13, (2, 1) x 4 ]周期並べの場合：始点と終点も周期並べにしてるので青よりも違和感が減る．この3パターンの中で一番違和感がないように見える．

ちなみに，実際の角度を計算すると，

$\text{arctan} 0.58 \fallingdotseq 30.1^{ \circ }$

[(2, 1) x 4, 2 x 13, (2, 1) x 4 ]周期並べにすれば+0.1°に抑えられる．ただ，ジャギ消し用ドットを普通配置するので見え方がまた変わってくるが．．

これを応用すれば基本的にどの角度もいけるはず．

30°近辺のドット並べ方表

以上を踏まえて30°近辺の配置方法をまとめてみる．

並べ方	tan	角度
横2,2,2,...規則並べ	1/2	arctan1/2 = 0.463647609 rad = 26.565°
-	0.57735026919	30°
[(2,1)x4, 2x13, (2,1)x4 ]... 周期並べ	0.58	arctan 0.58 = 30.1°
横2,2,1, ...周期並べ	3/5=0.6	arctan 0.6 = 30.983765 °