二次元美少女グラフィックスにおける眼球、特に黒目部分の構成要素の分解

絵を描きたがる人は最初に目を描きたがるという

当たり前である。楽しそうなことをしたい、自然な欲求だ。それを笑うのは苦労は美徳的価値観に染まりすぎていると思う。

そもそも人が人の体を認識する時に抱く感想の語彙は乏しい。人は人の顔をよく認識できるようにできていて、人の顔に対する感想の語彙は豊富だ。

よく認識できる何かを描けるようになったほうがコストパフォーマンスがいいと言うものだ。

二次元美少女グラフィックスの目のうち、眼球、特に黒目部分の構成要素

画風と言うものに流行り廃りはあるものなので、ここで記すのは概ね2016年のものになる。

まずpixivに行き、トップページにある流行っていそうな画像を5枚ほど開く。

trick or kiss - ソンソソ - pixiv

★ - SUKJA - pixiv

狐白206 - やる気のない夕海 - pixiv

智絵里ちゃん - 蒼都利音@お仕事依頼はHPまで - pixiv

JS観察してたら防犯ブザー構えられた。。。 - かがやんぬ - pixiv

どれも綺麗で良い。

これらをざっと見て、二次元美少女の目、その中でも眼球がどのようなものから構成されているか見ていく。

全体形状

まず、デフォルメの結果、目は大きく見せることになる。一方で、顔のみを切り出した場合、三次元に対して、縦横の比率は概ね維持されている。

以上のような理由により、縦方向に目が引き伸ばされ、特に色がついて見える黒目の部位は縦に引き伸ばされるというより横に押し潰されたかのような形状を取る。

このような形状を再現するため、また座標計算を簡易に行うため、生成時は円形状のものを用い、最終的に縦横比を変更する処理をするのが良いだろう。

光彩と瞳孔

光彩と瞳孔の表現のため、同心円を配置することになる。

この同心円の配色によってキャラクターの個性を表現している。

一般に外側を明るく、内側を暗くした配色を用いる。

同心円には輪郭を付ける場合がある。これはより強く暗くした配色で、若干だけサイズの違う同心円を配置することで代用もできる。

同心円の配色にはグラデーションを上からかぶせ、明るさの配置をなだらかにすることで湾曲した眼球の表面を自然に表現できる。

ある1つの円形状は以下のどちらかの工程から出来上がる。

    • 単色円形状のリサイズとカラーリング
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2あるいは3で作った円形状2つを合成
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2で作った円形状の幅を調整する

1も2も3もどちらも1つの円形状の最終出力になれる。

ガラス的透過表現

目の透き通るような表現をするために、目の下部にさらに円形状を配置する。

これは光彩と瞳孔の表現で作った円形状の外側に近いもの(光彩の表現)で切り取られ、また同様に、その内側に近いもの(瞳孔の表現)の下に配置される。

この円形状の1つ1つは以下の工程から出来上がる

    • 単色円形状のリサイズとカラーリング
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2あるいは3で作った円形状2つを合成
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2で作った円形状の幅を調整する

1も2も3も全て1つの円形状の最終出力になれる。

この円形状の配置は黒目部分の下部に、円形状の上部がかかるような位置になる。

必要な出力は1つの場合が多いが、さらに複雑に光彩と瞳孔で生成した円形状と合成したいときはその限りではない。

ガラス的反射表現

目の輝くような表現をするために、黒目の任意の位置に、任意の幅を調整して、任意の角度をつけて、一般に強い明度で低い彩度の色をした円形状を配置する。

このための円形状の1つ1つは以下の工程から出来上がる。

    • 単色円形状のリサイズとカラーリング
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2あるいは3で作った円形状2つを合成
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2で作った円形状の幅を調整する
    • 3で作った円形状の角度を調整する

1~4どれも1つの円形状の最終出力になれる。

必要な出力は2つないし1つ、多くとも3つのことが多いが、表現の幅によってはさらに多く生成しちりばめたりする。もっとも、それは人力による後処理で行ったほうがよいかもしれないが。

以上をコードに落とすと

次のエントリにしたいと思う。

まだ実装法が未定なので。

たぶん、javascriptで適当につなげられるようなUIを描いたのち、何らかの中間式に変換して、最終的にはImageMagickを動かすシェルスクリプトの形式にすると思う。