四角いドットで、
なぜ丸く見えるのか？

丸さをつくるのは、段差の並び

ドット絵で円を描いても、輪郭そのものが曲線になるわけではありません。縦と横のマス目を選び、曲線に近い形を表します。離れて全体を見ると、個々の角よりも輪郭の流れを捉えやすくなります。

上の見本では、円の上側に横長の線があり、端に向かうにつれて短い段差へ切り替わります。同じ長さの段差を繰り返すと、まっすぐな斜め線に近づきます。円では場所に応じて段差を変えることがポイントです。

もう一つの手がかりが対称性。最初は左右と上下を見比べると、意図せず出たふくらみや欠けに気づきやすくなります。これは正面から見た円の練習方法です。斜め向きのコインや手描きの表情まで、すべて左右対称にする必要はありません。

16×16の円を描いてみる

まずは輪郭だけで試します。下の見本PNGは16×16ピクセル、背景は透明です。拡大された図のマス目は、PNGには含まれません。

1. 16×16の作品を用意する。見本を見ながら描くか、ダウンロードしたPNGを開いて練習します。
2. 上・下・左・右の端をそろえる。見本には外側に1マスの余白があります。端の位置を決めると、縦長や横長へのずれを見つけやすくなります。
3. 端の間を短い段差でつなぐ。一気にぐるりと描かず、まず右上を見本と比べてから、ほかの部分をそろえます。
4. 拡大表示と小さい表示を行き来する。大きくして配置を確認し、小さくして丸さを見る。1マス変えたら、全体も見直します。

慣れたら輪郭の内側に色を置き、コインやボタンにしてみましょう。同じ輪郭でも、明るい色を置く場所で印象が変わります。

コンピューターはどう円を描いてきた？

「どのマスを選べば円に近づくか」は、手描きだけでなく、コンピューターグラフィックスの技術課題でもあります。

1977年、Jack Bresenhamは、円弧をドットや段差として描く計算法を発表しました。繰り返し処理で使うのは、主に加減算と符号の判定。毎回、三角関数を計算することなく、円に近い格子点を選びます。論文はCRT、デジタルプロッターなどを対象にしています。［1］

ただし、これは「ドットで円を描く表現が1977年に初めて生まれた」という意味ではありません。特定の計算法の発表年と、表現全体の起源は別です。このページの見本も、論文の計算法を再現した結果ではなく、描き方の比較用に制作したものです。

計算で近い位置を選ぶことと、絵として気持ちのよい輪郭に整えること。その両方を考えられるのが、ドット絵の面白さです。