kight1.jpg

haraです。
今回は光の表現を試みてみます。

光の表現?

光の表現、もう少し詳しく言うと、「空間を感じさせる光の表現」ですね。

これの難しいところは、単純に「暗い中に明るい色でモチーフが描かれている」だけでは
光を表現した感じにはならず、空間があって、その空間全体に光の影響が出ているところを
見せないといけないところかな、と思います。

今回は、素直にこの発想で試作してみました。


クリックするとじわじわと浮かんでいくパーティクルが発生しますが、このパーティクルの発生と同時に強い光が放たれて、画面全体が照らされたようになります。

どうでしょう、そこそこに光らしく表現できているでしょうか。

 

仕組み

仕組みとしてはごくごく単純で、手前で発生させているパーティクルを背面に配置しているBitmapDataに、拡大率をランダムにずらしながら描写しているというものになります。

動きの素材にしているパーティクルは、大分以前にForkさせていただいたParticle Sample Part2です。

BitmapDataはDisplayObjectの像を転写しますが、この転写というのが反射・屈折の表現に利用できるので、光の表現にはなかなか相性がよさそうです。

より光をリアルに表現するためには、霧、霞のようなものがかかっていてそこだけ明るかったり、光の方向にしたがって物体に影がさしていたりするなどの工夫が必要になってくるでしょうか。


この探求はしばらく続きます。では!

 

HTML5飯