読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで円を描く - PCグラフィックスを懐かしむ。楽しむ。(15)

PCグラフィックス JavaScript WebGL HTML5 GLSL 古典的グラフィック技術を懐かしむ

そういうわけで流れはキャラグラへ。まず作ってみたのがこれ。円と矩形が交互に描画される。静止画だと「なんだこれ」だけど、動くものを見てもらうと残像の効果によってグラデーションがかかっているように見える。

https://41.media.tumblr.com/e16c2048a070e575b02be56fd2052810/tumblr_o5vs2sDLe51s44dwzo1_1280.png

でも矩形はいまいちだなぁ。

https://41.media.tumblr.com/0986116468e9a14467c5a87606ff2358/tumblr_o5wc2ywSq01s44dwzo1_1280.png

動くデモ:

http://github.sfpgmr.net/graphics/devver/20160419/

ソースコード:

GitHub - sfpgmr/graphics at ba973e695625fb69bebaf3c0d1e53c1c42c4ff87

こういうのはシェーダーのサンプルとか,昔のデモとかで見かける。それをキャラグラで実装してみた。チェッカー模様で中間色を作り、それを使ってアニメーションしてみている。 JSから書き込む描画バッファはMZ-700のテキスト、アトリビュートRAMの構成とほぼ同じなので、チェッカー模様を画面一杯に敷き詰め、色だけを変えてアニメーションしている。

色の組み合わせの理屈がよくわかっていなくて、狙った色が出せないのが今のところの課題。