昨日はグラフィックスを懐かしむための環境作りを行っていた。実行するとカラーパターンのようなものが表示されるだけだが。これを使って過去に勉強したことを振り返りつつ実装した結果を実行可能な形で残していこうという試みである。JSFiddleとか最初使おうかなと思ったけど、ちょっと望み通りのことができなかった。
動作サンプル
ソースコード・リソース
/dev/graphics/devver/20160327/css/sfstyle.css
/dev/graphics/devver/20160327/index.html
/dev/graphics/devver/20160327/js/bundle.js
/dev/graphics/devver/20160327/test.html
この環境での表示画面は以下の仕様で作られている。
- 320x240ピクセル(px)、ピクセルごとにR/G/Bそれぞれ256階調・アルファ(透明度)256階調の設定が可能。
- デスクトップなどの大きい画面だと640x480pxに拡大して表示する。
画面描画周りの仕様は、以下のとおりである
- 非表示の
canvas画面を1つ持つ。このサイズは320x240pxである。 - 表示用に
canvas画面を１つ持つ。この画面は実画面サイズに合わせて、320x240pxもしくは640x480pxにサイズが切り替わる。 - 非表示の
canvas画面と同じサイズのImageDataオブジェクトを持つ。実際の画面描画はこのオブジェクトに対してピクセル単位で操作することにより行う。結果ソフトウェア操作ですべての描画が行われる。 - 表示は、まず
ImageDataオブジェクトで描画したした結果を非表示のcanvas画面にputImageData()する。さらに非表示のcanvasを表示用のcanvasにdrawImage()することで表示される。この描画操作はrequestAnimationFrame()の呼び出し間隔で行われる。
画面サイズは、ピクセルを際立たせるためにあえて小さいサイズにして、レトロな時代の雰囲気を作るようにしている。でも1980年当時くらいからしたら、フルカラー＋αでピクセル操作できる時点で驚愕のグラフィック仕様だし、JS+Webの環境で動かしても当時アセンブラで動かしていたときよりも高速に動かすことができるだろう。8色+パレット機能くらいが始めるにはよさそうだけど、ちょっと面倒なので妥協した。ただこの仕様だとパレット機能とか、当時のPCのグラフィックス機能を使った技法の再現ができない。再現不可の機能は別途そういう環境を作って再現しようと思う。WebGL+シェーダーを使えばエミュレートは可能なのでないかと思っているし、レトロＰＣのソフトウェア・エミュレータもたくさんあるので、そのような環境を使って再現しても面白いかもしれない。
今後であるが、線描画、矩形描画、円描画、楕円描画とかプリミティブなものをピクセル単位でどのように描画するかを過去の経験とか文献とかを調べてこの環境でできる限り再現していくことにする。 飽きるまでだけどね。