ドット絵の円は「数字」で描ける：32px = 83121 12138

ピクセルアート、ドット絵の話です。
いかに効率的に円を描くか。

検索をすれば、以下のような画像は出てきます。

見比べながら進めていけば、再現することは可能です。

が、少しずつたどっていくのはなかなか大変。

効率のためには、数字をまとめておくべきではないか？　と考えましたので、まとめてみました。
（最後に再掲しますので、一旦飛ばしていただいて大丈夫です）

何のことか、なんとなく気づいた方もいらっしゃるでしょうか？
以下、説明していきます。

ためしに、直径32pxの円を描いてみましょう（32という数字は美しいですね）。

キャプチャ画面のアプリはdotpictです。

PCが使えるときはPiskelにもお世話になっていますが、基本的にスマホでdotpictを使っています。

というわけでdotpictで、直径32pxの円を描いていきましょう。

参照すべき数字は、上掲画像の32pxの行にある以下の並びです。

83121 12138

まず「8」です。
円なので多角形ではありませんが、いちばん長い辺のようなイメージです。

どんなサイズの円でも、まずこのいちばん長い辺が、上下左右の4か所にあります。

ピクセルアート、ドット絵の面白いところで、円なのに、上下左右は半固定で、90度の倍数以外は回転させることができないのです。

さて、お好みでよいのですが、今回は上から描いていきましょう。

8です。
続いて3121までいきましょう。

次の数字にいくときに、一段ずつずらしていくわけですね。

キャプションに数字を入れていて気づきましたが、右回りに描いていったほうがわかりやすかったかもしれません･･････。

ただ、個人的に左回りでないとどうもしっくりこないというか（汗）。
ごめんなさい、このままいきます。

83121、から折りかえしての1213です。

お気づきでしょうか。折りかえしてからの1213は、縦にドットを打っています。

今回は83121 12138ですが、直径32pxの場合にかぎらず、数字の並びにはかならず折りかえしがあります。

直径が偶数の場合は、今回のように左右対称になっていますし、直径が奇数の場合には、折りかえしポイントの数字があります。

そしてその折りかえし後には、縦横を切りかえて打っていくことになります。
横から縦、縦から横。

言葉にするとなんだかややこしいですが、やってみたら本当にかんたんです。

まずは横（左）に進んでいたのを、45度の部分（折りかえし）を過ぎたら、縦（下）に向かわせるというだけの話ですね。

そして、次の「8」までたどり着きました。

ここからは同じことをくりかえすだけです。

そのまま縦の動きで、下に向かっていきましょう。

折りかえして横（右）へ向かいます。

もうこの先は、左側を見ながらまねしていくほうが早いかもしれません。

ここまでくると、ちゃんと円を閉じられるかどうか、どきどきしてきます。

できました！　ちゃんと円環がつながりました。

ほかのサイズの円も、下記の数字でおなじように描けます！

補足

折りかえしポイントのところで、直径が奇数の場合のお話をしました。

※桜井政博さんは、奇数のほうがきれいに描けるとおっしゃっています。

直径が偶数の円だけなら、いちばん長い辺は半分の数字で認識したほうが美しくはあります。
（今回の場合、43121 12134。さらに折りかえし前の43121だけをメモしておけばいいのではないかとも考えましたが、折りかえし部分が奇数になる場合もあるんですよね･･････）

いちばん長い辺が奇数の場合もあるとすると、中心にドットを打つか、半分に分けた左右どちらにドットを打つか、などなどややこしくなってくるので、今回のまとめ方をしました。

どこで折りかえしているかは、人間の目でもわかりますよね。

8から8へ。

83121 12138

4辺をつなぐことができれば、円はつながります。

おまけ

というか、dotpictでは図形ツールで円が描けるんですね。
大きさの調節もとてもやりやすいです。

上記の数字も無駄にはならないと願いますが･･････。

手描きの円を使って、こんなアートワークも描いてみました。

緑と黄色の境界線をピンクにすることで、淡くぼやかしています。

ピクセルアート、ドット絵の「ひとつのドットが、隣接する複数のドットの干渉を受ける」という性質を利用したのですが、そこはまたの機会にくわしくまとめたいです。