WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで正方形を描き回転させる - WebGLでレトロPCグラフィックスを楽しむ(16)

公開:2016-04-21 05:55
更新:2017-11-15 21:58
カテゴリ:PCグラフィックス,javascript,webgl,html5,glsl,WebGLでレトロPCグラフィックスを楽しむ

今回は正方形を回転させつつ、グラデーションするアニメーションをやってみた。

パターンは2つ。

https://68.media.tumblr.com/6f5b6bafefbffce4cbe0928d8c260641/tumblr_o5y7ipGAIT1s44dwzo1_540.png

https://68.media.tumblr.com/57f6021d2e01b8b851db8371f87c625b/tumblr_o5y7ipGAIT1s44dwzo2_540.png

前回の円のアニメーションもそうだが、描き方としてはちょっと変わったことをやっている。普通は「正方形なり円を中心から回転させながら描く」ようなアルゴリズムを考えるが、そうではなくて「40x25の領域を順に走査し、その座標のキャラクタがどのような色になるかを計算」している。このやり方は全画面を必ず書き換えるようなものだと非常に効率がいい。

この手のものは三角関数をよく使う。学生のころ三角関数をこんなおっさんになっても使うとは思いもしなかった。当時はこんなもの習ってなんの役に立つのだろうと思ったものだが、実際社会人になるとこの関数をしばしば使う場面が出てきて非常に重宝する。

{x2 = \cos \theta \times x1 - \sin \theta \times y1}

{y2 = \sin \theta \times x1 + \cos \theta \times y1 }

上は2Dの回転だけど、基本的な画像操作アルゴリズムには三角関数はしばしば登場する。

次は任意の正多角形のアニメーションを作ろうといろいろ思案しているところである。私にとってはちょっと考えを巡らせないとできないことである。

40X25、8色チェッカーキャラクタのアニメーションを作ってみて思うのは、結構表現力があるなということ。これはまあ、今どきの(私のPCのCPUは5年くらい前のものだが)PCスペックをもってすれば、遅いJS上でも昔のPCの何十倍ものスピードで動くからこそできるものではあるが。MZ-700実機でやろうとすると、sin関数のテーブル化とかなんとかいろいろな最適化をしないと実現できないだろうね。もしアセンブラでやるなら乗算から考えないといけないしね。CPUパワーのおかげでやりたいことに実装を集中できるのが現代のマシンの良いところ。

任意の多角形ができたら、動画再生をやってみたいんだよね。

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/dev/graphics/devver/20160421/css/sfstyle.css

/dev/graphics/devver/20160421/index.html

/dev/graphics/devver/20160421/js/bundle.js

/dev/graphics/devver/20160421/res/bd1_lz.json

/dev/graphics/devver/20160421/res/bd2_lz.json

/dev/graphics/devver/20160421/res/closed_lz.json

/dev/graphics/devver/20160421/res/cowbell_lz.json

/dev/graphics/devver/20160421/res/crash_lz.json

/dev/graphics/devver/20160421/res/handclap_lz.json

/dev/graphics/devver/20160421/res/hitom_lz.json

/dev/graphics/devver/20160421/res/lowtom_lz.json

/dev/graphics/devver/20160421/res/midtom_lz.json

/dev/graphics/devver/20160421/res/open_lz.json

/dev/graphics/devver/20160421/res/ride_lz.json

/dev/graphics/devver/20160421/res/rimshot_lz.json

/dev/graphics/devver/20160421/res/sd10_lz.json

/dev/graphics/devver/20160421/res/sd11_lz.json

/dev/graphics/devver/20160421/res/sd1_lz.json

/dev/graphics/devver/20160421/res/sd2_lz.json

/dev/graphics/devver/20160421/res/tamb_lz.json

/dev/graphics/devver/20160421/test.html