全文検索(S)

拡大縮小でそれなりに見える簡単アニメの理論と実践

マクロスFrontier第17話のOPは、一人で描けそうな簡単なアニメでもここまで楽しく出来るのだという素晴らしい見本だと思う。

まだご覧になってない方は、多分“macross frontier 17”などのキーワードでyoutubeを検索すると見られると思うのだけどそれは大声で言わないでおいて、まあ、がんばって見て聞いてください。

俺がこのOPでとても関心したのは、「拡大・縮小」や「回転・左右反転」などの単純な画像処理の手法を使って、見事に楽しいアニメーションにしているところだ。ちゃんとランカや携帯クン(緑の生き物)が踊っているように見える。

気になったので早速コマ毎に画像をキャプチャして、動きを確認してみた。ランカが踊っている繰り返し部分では、大体、以下のように元のSDキャラを拡大・縮小する動きのループになっている。

  1. 横100%×縦100%(=原寸), 5フレーム
  2. 横100%×縦100.1~100.2%, 1フレーム
  3. 横102%×縦98.5%, 1フレーム
  4. 横100%×縦98%, 1フレーム
  5. 横100%×縦99%, 1フレーム

これでちゃんと踊っているように見える! これはすごいぜ! プロがやると、FlashやGIFアニメみたいな素材と単純な拡大・縮小でも、ここまでそれっぽくなるんだなぁ。

多分コツは、1番目で5フレーム分「タメ」ることと、横に少し広がる3番目の部分(ここら辺で少しモーションブラーがかかってるようにも見える)だと思う。この5フレーム「タメ」るっていう緩急の付け方が、俺のような素人にはなかなか難しいところだ。

というわけで、早速MIAUのオフィシャルキャラクターみゃうたんのSDを描いて、同じ手法でふにふに躍らせてみた。

ダンシングみゃうたん

うむ、とてもみゃうみゃうである。

1枚元絵があれば後は単純な計算で出来る動きだから、ゲームなどには使えそうだなぁ。っていうか、既に色々使われているんだろうかな。

(128)

著作者 : 未識 魚
最終更新日 : 2008-09-01 12:01:04

パンツは白で塗れ

俺が描いているような絵では、印象派に代表されるような芸術的な絵画の手法では考えられないような、誇張した塗りを行わないと、かえって不自然になるという事例が存在する。

とりあえず、この写真を見てもらおう。念のため、この写真は18禁ではない。一応、全年齢閲覧可能なパンチラ画像である。正直なところ、こういう画像をAmazonで探してくるのがこのエントリの苦労の大半だったのだが、まあそれはおいておこう。

倉田みな DVD moecco vol.05 『はじめてのSexy』

しかし、このエントリを書こうとしたときには、この商品ちゃんとAmazonに存在していたのに、今は商品情報が消されてしまっている。画像が残ってるのに商品DBから存在が消えてしまうというのは、びっくりだ。どっかのPTAに児童ポルノと看做されたのだろうか。まあ無理も無いが。

話を戻そう。ここからは純粋に作画技術的な話だ。とりあえず、でかい画像でパンツの色を眺めてくれ。この写真の女の子パンツは何色だろうか。こう尋ねたら、100%の人間が「白」と答えるだろう。だが、実際にパンツの部分の色を調べてみると、白ではない。実際のパンツの色は、一番明るい部分でも ■ #ac7056 という茶色、暗い部分ならば、 ■ #623629 というような黒に近いこげ茶色なのである。この色だけを見たら、白だと主張する人間はいまい。グレースケールにしてみると、一番明るい部分でも、黒50%を超えるグレーであることが分かる。かなり暗い色だ。つまりこのパンツ部分は、どちらかといえば白より黒に近いのである。なぜこんなこげ茶が白に見えるのだろうか。

これを説明する手がかりは、写真の世界で「記憶色」や「期待色」と呼ばれる現象にある。パンツの物理的な色は、光や陰によってさまざまに変化し、単純な白になることは現実の世界では絶対にありえない。しかしながら、我々は経験的に「パンツは白いものだ」と記憶し、写真でもそういう色であることを期待してしまっている。

このように、写真の実際の被写体の色と、我々が脳内で想定している色とでは、齟齬をきたすことがある。例えば、綺麗な青空を撮ったはずなのに、後で見返してみるとよどんだ灰色に写っていたり、色白美人を撮ったはずなのに土気色で汚らしい肌であったりするという現象だ。そのため、写真では「レタッチ」を行って、「欲しい色」へ近づける作業が必要になる。テレビに出るタレントがドーランを塗りたくるのも、これと同じ理由による。

参考:
記憶色、期待色の表現が印刷のクオリティを決める
http://ave-a.com/web/page/digital2.html

上記のパンツ写真の場合、人間が不自然に感じるほど暗い色にはなっていないので、我々は脳内の記憶どおり、パンツの色を即座に「白」だと指摘することができる。でも、その「白」は、物理的な色とは異なっているのである。このパンツ写真は、パンツの部分を白くレタッチした方が脳内で想像している発色に近いことになる。

人間の思い込みによる色の錯覚を分かりやすく示す有名な例として、MIT の Edward Adelson によるチェッカーボードの錯視がある。

Grey square optical illusion by Edward Adelson

図が示すとおり、Aで示されるグレーとBで示されるグレーは、物理的には同じ色であるにもかかわらず、左の図ではどう見てもBの方がAよりずっと明るく見える。彼が挙げているこの錯視の理由2点をまとめると、以下のようになる。

  • 濃い色と薄い色が繰り返すチェック柄という「文脈」によって、AよりBが明るいと思い込んでしまう
  • フチのぼんやりした陰のような、緩やかな明るさの変化は無視してしまう

我々は、正確に眼前の色そのものを、絶対値として見ているわけではない。被写体となっている色がどういう意味を持つのかという「文脈」を考慮して、その物体の模範的な色を勝手に脳内で当てはめている。人間は、色を見るのではなく、意味を見ていると考えられる。

写真やイラストは、現実の世界より抽象性が高い。写真が抽象的だ、という考え方に疑問を持つかもしれないが、カメラは世界の全てでも視界の全てでもなく、限定的な3次元の空間を2次元に透視した小さな図を見せてくれるに過ぎない。現実世界の情報量とは比較にならない。絵は、言うまでも無いだろう。

そうした「情報量を減らしている表現」においては、その情報を受け取る人間に、伝えたい情報をあらかじめ強調しておくことで、受け手に情報を伝達しやすくする必要がある。こうした強調が、写真では「レタッチ」、絵では「デフォルメ」と呼ばれる。

では、先ほどの写真を、萌え絵にしてみよう。もしゃもしゃしてやった。今は後悔してない。

もしゃもしゃしてやった!

模写とはいえ、実は俺は今年まだノースリーブ以外の服を描いてなくて、こんなところでソデを描くのも癪だから、ノースリーブセーラー服に魔改造してみた。まあそれはいいや。

この絵におけるパンツの明るい部分は本当の「白」、16進数で言えば #ffffff である。これがもし写真と同じような暗さの色だったりしたら、この絵はパンツ絵としては成立しない。試してみよう。

moeccoreprogrey

パンツを写真と同じ程度の暗さ(50%グレー)程度にしてみると、これが白のパンツには絶対に見えないことが分かる。もはや黒パンツであろう。しかしながら、先ほどのチェッカーボードの事例で考えてみれば、単にグレーだからグレーのパンツに見えるのではなく、周囲との文脈によってそう見えているのだと考えられる。つまりこれは、周囲の明るい肌の色とのギャップが際立っているからグレーに見えるのである。肌色をこのパンツより暗い色にすれば、この色でもパンツは白く見えるだろう。

実際、写真におけるパンツ周辺の肌は、■ #2b0500 というような、かなり黒い色だ。この色との対比によって、写真のパンツは白く見えているのだ。一方、絵の方は、陰の部分でも ■ #f6c6ac  という明るい色で塗られている。だから、同じ明るさのグレーでも白には見えない。

では、絵でも肌を暗く塗れば好いのだろうか。だが、我々の「綺麗な肌の色」を好ましいと感じる感覚というのは、ほとんど絶対的に動かしにくい認識なのだ。ファンデーションやドーランやフェイスライトという存在は全て、脳内で想定される理想の肌色に近づけるための努力の結晶である。他と比べて明るく、色にムラの無いことが綺麗な肌の条件である。背景などを持たない人物単体のイラストレーションカットにおいて、暗い色で肌を塗ったり、陰の部分をうんと暗くしたりするのは、少々無謀である。綺麗に見せ辛いからだ。受け手にストレートに情報を与えるための「デフォルメ」という視点から考えても、肌は明るい色で塗った方が良い。

また、写真を見ると分かるように、肌の陰部分は緩やかに暗くなっていく。これは、人間の体にはキツい鋭角が存在しないからだ。チェッカーボードの錯視がおきる理由で述べたように、緩やかに変化する明るさは、人間は無視してしまう。だから、肌の暗めの陰色の部分は、無視してもかまわないのである。

以上のような理由から、萌え絵の肌は基本的に明るい色で塗られるので、必然的に、パンツも白で塗るしかないのだ。

パンツは自身で発光する

その昔、アリンコが描いたこの4コマの通りの会話を交わしたことがあるが、これは決して誇張ではない。パンツが白いのは萌え絵の文脈において正しい。

(744)

著作者 : 未識 魚
最終更新日 : 2011-03-09 02:53:19

ベッキーの髪の陰は何故ピンクなのか

図0:陰を入れる前のベッキー
図0:陰を入れる前のベッキー
『ぱにぽにだっしゅ』ヤバい、超ヤバい。このアニメについてはあまぞんのレビューで絶賛しておいたけど、もう1つ俺的に評価しておきたい点がある。それは、主人公ベッキー・宮本の金髪の陰の部分をピンクで塗っているというところだ。金髪の陰をピンクで塗ることの何がどうすごいのか、ベキ子の髪をいじりながら説明してみよう。


図1:明度を下げるのみ
図1:明度を下げるのみ
じゃあそもそも、陰(シェード)の色ってのは、普通どうやって決まるんだろうか、というところから考えてみよう。

真っ先に思いつくのは、単純に髪の地の色の明度を下げればいいんじゃないかというところだ。明度を下げて陰色を塗ってみたのが図1だ。

よく見て欲しい。陰の部分が緑っぽく(あるいは青っぽく)見えると思う。そのままの色相で明度を下げただけなのに、色味(色相)が変化している。なぜだろう。答えは、「錯覚」だ。


図2:色陰現象とその補正
図2:色陰現象とその補正

この錯覚は、色陰現象と呼ばれる。彩度の高い色の隣に彩度の低い色があると、彩度の低い色の方は補色に近づいて(補色との加法混色に)見えるのだ。


図3:明度を下げ色相を赤方向に
図3:明度を下げ色相を赤方向に
そのため俺たち絵描きは普通、明度自体はそれほど下げずに、“補色に引きずられる色とは逆の色(色相環の反対側にある色)寄り”に、陰の色を設定する。そうすると、例えば図3のような色合いになる。これくらいが、金髪の陰として無難なところだろう。
以上が、一般的な陰色の決定のメソッドだ。もちろん、絵師はこんなめんどくさいことをいちいち考えているわけはなく、経験と勘でやっているのだけれど、言語化すればこんな感じだろう。


さて明度を下げただけの図1と、明度をそれほど下げずに色相をずらした図3の画像は、実は、グレイスケール化すると、全く同一になる。というか、そうなるように色を選んでみた。

図4:図1及び図3の輝度成分は同一
図4:図1及び図3の輝度成分は同一
図1:明度を下げるのみ
図1
図3:明度を下げ色相を赤方向に
図3


どういうことかというと、どちらの画像も、輝度成分、つまり「人間の目が感じる明るさ」は、計算上等しい、ということを意味している。
図5:グレースケール化した色相環
図5:グレースケール化した色相環
しかし図1図3を並べてみると、とても明るさが等しいとは思えない。どうも図1の方が暗く見える。なぜか。それは、先ほども述べたように、左の画像は色陰現象によって青味がかった色合いに見えるため、髪全体の見かけ上の輝度が下がっているのだ。青はとても暗い色である。その青に引きずられるせいで、全体が暗く見えるのだ。
実は、色には「色自体の持つ明るさ」がある。図5を見て欲しい。これは、図2で用いた色相環をグレースケール化したものだ。赤(rgb:ff0000)と緑(rgb:00ff00)を加法混色した黄色(rgb:ffff00)が最も明るく、青(rgb:0000ff)が最も暗い色であることが分かるだろう。
人間の目は光の三原色のうちの緑を突出して強く認識する。同じ強さで赤の成分があっても緑の半分以下の明るさとして認知するし、青は緑の1割くらいでしかない。なぜそうなのかといえば、人間の目がそう感知するからとしか言いようがないのだが、テレビのNTSCにしろ画像ファイルのJPEGにしろ、輝度(人の目が感じる明るさの情報)を利用するシステムは、この人間の目の特徴に依拠している。
ここまでをまとめよう。
  • 彩度の高い部分の陰の色は、地の色相と同じではマズい
  • 陰の部分は、色陰現象を打ち消し、全体の色調を整える色相へズラさねばならない
  • 色そのものの明るさを把握すると、単に明度のみによってではなく、色相の変化によっても輝度を下げることができる
もっと分かりやすく一言でまとめるとこうなる。
  • 陰の部分は、単に地の色の明度を下げただけの色で塗ってはいけない


さて、本命アニメ版の色指定を参考にして、というか、TV画面キャプチャしてレベル補正してスポイトで色拾って陰色を置いてみたのが図6である。目を引くカラーリングだ。
図6:アニメ版のベッキーは色相を赤方向にずらすのみ
図6:アニメ版のベッキーは色相を赤方向にずらすのみ
図7:図6の輝度成分
図7:図6の輝度成分
図4:図1及び図3の輝度成分
図4:図1及び図3の輝度成分


この陰色、実は明度は全く下げずに、色相を赤方向へずらしただけなのである。そのため、この画像の輝度成分(図7)を見てみると、図4に比べて明るいことが分かる。こういう塗り方は、多分7、8年くらい前に、「ハイエンド系」とか呼ばれてた人達の塗りを極端にしたものだと思われる。例えば、ハラダヤの原田さんとか、一見不可思議な色で陰を塗っていたように思う。


参考までに色相を全くいじらずに同じ輝度成分を持つよう陰部分の明度だけを下げてみると、図8となる。輝度差がないため、陰部分との色の違いが分かりにくく、図1よりいっそうぱっとしない。そしてやっぱり色陰現象によって緑色がかって見える。
図8:色相そのままで図6と同じ輝度を持つ
図8:色相そのままで図6と同じ輝度を持つ
図1:明度を下げるのみ
図1


それでは、図6図8を比較してみよう。この2つは同じ輝度であるのだから、人間の目は同じ明るさを感じるはずだ。しかし、図6の方に強い色味を感じていると思う。ということはこれも錯覚だ。どういう理由なのだろうか。
図6:アニメ版のベッキーは色相を赤方向にずらすのみ
図6:アニメ版のベッキー
図8:色相そのままで図6と同じ輝度を持つ
図8:色相そのままで図6と同じ輝度を持つ


図9:色相対比で中心は赤っぽい
図9:色相対比で中心は赤っぽい
図10:色相対比で中心は黄っぽい
図10:色相対比で中心は黄っぽい
この錯視は、多分色相対比で説明できると思う。色相対比とは、周囲の色相の影響を受けて色相が変化して見える錯覚のことである。図9の中心の丸は赤っぽく見え、図10のは黄色(あるいは白)っぽく見えるが、実際には両方とも同じ、ベッキーの髪の陰に使われている色だ。


図11:陰色の色相
図11:陰色の色相
そういえば、さっきからベッキーの陰色を「ピンク」と言っていたが、実はこの陰色の色相は、全然ピンク(マゼンダ系)ではない。単色で見れば、薄いオレンジ、それも朱色というような色である。それが黄色との色相対比によって、色相環の赤系の方向へ引きずられるため、ピンクっぽく見えるのである。さらに、色相対比によって低い輝度の色へシフトして見えているから、髪の毛全体の見かけ上の暗さも増しているのだ。図8が色陰現象で暗く見える度合いより、図6の色相対比の効果の方が強い。すげえ、すげえよこの配色!!


利点を整理しよう。ベッキーの髪は、薄い黄色とオレンジを利用して塗られているが、錯視を活かして髪を実際よりずっと濃い色に見せかけている。しかし、実際に輝度が低いわけではない。だから、ベッキーの顔がアップになって画面が髪だらけになっても、画面全体の印象が重く(暗く)なることはないのだ。
この塗りから得られる教訓を挙げてみよう。
  • 色相そのものがもつ明るさを利用することで、陰が表現ができる
  • 陰の部分が大きくても、色相差を用いれば画面全体の明るさを維持できる
  • 色の錯覚を利用して、実際の輝度より明るく見せたり、暗く見せたりすることができる
色って面白いねぇ。
この文章の要旨:『ぱにぽにだっしゅ』は最高。
(1830)

著作者 : 未識 魚
最終更新日 : 2015-09-06 15:01:17

ウマー

上手い絵ってなんだろう。上手いといわれる人の絵には何かの特質があるが、それを表立って記号化してる人はあまりいない。まあ、その手の解説書などを紐解いてみれば、デッサン、デフォルメ、構図、彩色、デザイン、描き込みなど幾つかのポイントがあることは誰でも知ることが出来る。ただし、そのうちのどれか、あるいは多くが欠けていても上手いと思われる絵はある。多分、最も重要なのはある種の驚きだろうと思う。驚きとは、自分が気付いていなかったことを気付かせることだ。驚けない絵は上手いと感じられない。まとまってるな、とは思うけど。

(76)

著作者 : 未識 魚
最終更新日 : 2006-10-14 18:20:03


<TOP>

[ Copyright 1996-2017 Mishiki Sakana. Some Rights Reserved. ]