S.F. Page

Programming,Music,etc...

PCグラフィックス

DDAとブレゼンハム・アルゴリズムの違いは「考え方の違い」? - PCグラフィックスを懐かしむ。楽しむ。(25)

DDAの整数化とブレゼンハム・アルゴリズム。違いについての比較表が下のサイトに載っている。 Difference Between DDA Line Drawing Algorithm and Bresenhams Line Drawing Algorithm | DDA Algorithm vs. Bresenhams Algorithm – FreeFeast.info : Intervi…

ブレゼンハム・アルゴリズムによる線分描画を原典にそこそこ忠実に実装してみる - PCグラフィックスを懐かしむ。楽しむ。(24)

今回はブレゼンハム・アルゴリズムをJSで実装してみる。 前回の記事にそこそこ忠実に実装してみたのが下のコードである。もうちょっと最適化できるような気もするけど、とりあえずということで。 // ブレゼンハム・アルゴリズムによる線分描画 var clineB0 =…

ブレゼンハム・アルゴリズムの原典を読み、理解する - PCグラフィックスを懐かしむ。楽しむ。(23)

さて、ブレゼンハム・アルゴリズムである。 ブレゼンハム・アルゴリズムは整数化・加減算およびシフト演算のみで実装できるということでよく紹介されているけれども、ブレゼンハム・アルゴリズムやDDAの文献を読んでみて、実はそこがポイントではないのでは…

DDAの整数化 - PCグラフィックスを懐かしむ。楽しむ。(22)

前回に引き続き、線分描画に取り組む。 今回はブレゼンハム・アルゴリズムに取り組もうと思っていたが、私の認識が誤っていたことに気がついた。 私はこのポストに書いているものがブレゼンハム・アルゴリズムだと今の今まで思っていたようである。どうもこ…

Digital Differential Analyzer (デジタル微分解析) でWebGL + GLSLで作ったレトロPC風画面に線分を描く - PCグラフィックスを懐かしむ。楽しむ。(21)

私はこれをブレゼンハム・アルゴリズムと同じだと思っていたけど、違っていた。 昔のPCはグラフィックプリミティブの描画が遅かったので、曲線は線分で近似していた。 例えば下の絵の顔の輪郭は曲線に見えるが、実際は線分である。 (http://85data-blog.coco…

OpenCVを使って顔付近を抜き出す。- PCグラフィックスを懐かしむ。楽しむ。(20)

ということで、OpenCVを使って動画から顔付近を抜き出してみることにした。以外に簡単にできた。 動くサンプル: http://github.sfpgmr.net/graphics/devver/20160429/ ソースコード: GitHub - sfpgmr/graphics at 25bfdd0467a1dbc61670c3dcbe9ddce496b2d048 …

OpenCVを使って顔認識を試みようと思う - PCグラフィクスを楽しむ。懐かしむ(19)

40x25サイズのキャラグラでなんとか動画表示ができた。 blog.sfpgmr.net 元となる動画は五十音を順にしゃべる女性だ。これを各音ごとに細切れにして、カタカナをあたえればその通りに発音できるようにしたいと考えた。自作音源をバックにラップさせてみたい…

WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで動画表示を行う - PCグラフィックスを懐かしむ。楽しむ。(18)

40x25の8色キャラ画面で、チェッカーキャラクターを使った動画表示を行ってみた。 動くデモ: http://github.sfpgmr.net/graphics/devver/20160423/ ソースコード: GitHub - sfpgmr/graphics at d2cd41906d229c3244c4725b37e3b8dbeb8877e3 動画の素材は以下…

驚くべきascii artの世界。

ascii artをまさぐっていて見つけたもの。いやーすごいですわ。 3Dポリゴンをascii artによる表示。 ascii artによる流体シミュレーション。 このエンドウさんという方、只者ではないですな。 しかしソースコードが読めん。。難読なコードを平易化するユーテ…

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

正多角形の描画は何とかできた。 動くデモ: http://github.sfpgmr.net/graphics/devver/20160422/ ソースコード: GitHub - sfpgmr/graphics at a5818c1534ff5922243f6c3c8a8b990a02ab169d 指定した角数の多角形を描くようなコードにしてみた。三角形未満は…

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

今回は正方形を回転させつつ、グラデーションするアニメーションをやってみた。 動くデモ: http://github.sfpgmr.net/graphics/devver/20160421/ ソースコード: https://github.com/sfpgmr/graphics/tree/b64b9550597aee383242780c800fcf76c6b536ae パター…

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

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

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

MZ-700の文字キャラクタを表示するようになってやる気が少し出てきている。といいつつ音源整備に力を入れてしまうというあまのじゃくさ。 ここ数日MZ-700界隈の記事を読んでいて、キャラグラというのに非常に興味を持った。このキャラクタを使って現在のJS環…

Web Audioで作った波形メモリ風音源にドラム音を加えてみた。 -PCグラフィックスを懐かしむ。楽しむ。(13)

4bit/8Khzのサンプリングドラム音を加えてみた。かなりローファイな音がする。 デモページへのリンク: http://github.sfpgmr.net/graphics/devver/20160418/index.html ソースコード: GitHub - sfpgmr/graphics at f5d09ee938bf9f32afae30161edf7207e04a170…

WebGL + GLSLで作ったグラフィックス画面に、Web Audioで作成した波形メモリ風音源を加えた。 - PCグラフィックスを懐かしむ。楽しむ。(12)

少し時間がかかったが、音源を加えることができた。まだとりあえずのバージョンで、ドラム音はまだ鳴らない。 デモページ: http://github.sfpgmr.net/graphics/devver/20160417/index.html ソースコード: GitHub - sfpgmr/graphics at fffaeab29fb72ccd4d1…

WebGL + GLSLで作ったレトロPCグラフィックス画面に、Web Audioで音源を加えることにする。 - PCグラフィックスを懐かしむ。楽しむ。(11)

ちっともプリミティブの描画に移らないところが私らしいというか。 MZ-700フォントを表示してキャラグラ的なものに少し目覚め、ちょっとしたデモを行き当たりばったりに作ってみようとしている。 下は作りかけ。 デモページへのリンク: http://github.sfpgm…

WebGL + GLSLで、レトロPC風の文字キャラクタを表示する - PCグラフィックスを懐かしむ。楽しむ。(10)

プリミティブの描画の前に、この環境での文字表示を作るのを忘れていたので、作ることにした。 VRAMプレーンで行ったことを応用すればできるはずだ。 デモページ: http://github.sfpgmr.net/graphics/devver/20160410/index.html ソースコード: https://git…

WebGL + GLSLでレトロPC風グラフィックスメモリ(RGBプレーン)の再現ができた - PCグラフィックスを懐かしむ。楽しむ。(9)

RGBのプレーンの再現だがなんとかできた。 デモページ:http://github.sfpgmr.net/graphics/devver/20160408/index.html ソースコード: GitHub - sfpgmr/graphics at 98af700d92b169b8449067b619c8c5baa7310d30 以下のような仕様でソースを書いてみた。 R/G…

WebGL + GLSLでレトロPCグラフィックスメモリのRGBプレーンの再現ができないか? - PCグラフィックスを懐かしむ。楽しむ。(8)

ようやく8色パレット描画のエミュレートができたが、これで満足したわけではない。今の仕組みではピクセルあたり1バイトを割り当てていて、これの0-7だけ、つまり3ビットだけ使っている。この無駄を減らしたいし、もう少し昔の環境に近づけたい。なのでなん…

WebGL + GLSLによる8色パレットカラーエミュレート画面がようやく完成 - PCグラフィックスを懐かしむ。楽しむ。(7)

いろいろなサイトを参考にしながらようやく完成した。runをクリックすると、8色の縞模様がスクロールしているように見えるはずだ。 デモページ: http://github.sfpgmr.net/graphics/devver/20160406/index.html ソースコード: github.com このようなデモを…

8色パレットカラーをWebGLでエミュレートするアイデアその3 - PCグラフィックスを懐かしむ。楽しむ。(6)

8色パレットカラーをWebGLでエミュレートするアイデアだが、どうもその2もうまくいかなそうである。 私はフラグメント・シェーダーでuniform変数の配列でパレットを持てばよいと考えていた。でも残念ながらフラグメント・シェーダーでは配列のインデックス…

8色パレットカラーグラフィックスをWebGLでエミュレートするアイデアその2 - PCグラフィックスを懐かしむ。楽しむ。(5)

寝ても覚めてもというほどでもないが、極力GPUを使って8色パレットカラーをエミュレートする方法を考えている。 ビット演算をJavaScriptにさせるアイデアはコストが高い感じがする。Chrome CanaryやFirefoxではオプション設定でWebGL 2.0を動かすことが…

WebGL 1.0のGLSLでは整数ビット演算を自在に行うことはとても難しい。- PCグラフィックスを懐かしむ。楽しむ。(4)

そういうことで、WebGLをセットアップし、三角形1枚を描いてみた。 window.addEventListener('load',function(){ var cont = document.getElementById('g20160330'); if(cont.offsetWidth > 700){ cont.height = 810; } else { cont.height = 550; } }); ソ…

レトロPC風環境再構築のためにWebGLを学び、8色カラーグラフィックスをGLSLでエミュレートするアイデア - PCグラフィックスを懐かしむ。楽しむ。(3)

レトロな8色パレット、320x240pxの画面を作成すべくWebGLを下記サイトで勉強している。最新のWebグラフィックAPIをうまく使ってレトロな画面をどうにかして作れないかという、本末転倒な感じがなんとも。画面サイズはひょっとしたら256x192ドットにするかも…

WebGLでのレトロPC風8色カラーグラフィックス環境に作り直す - PCグラフィックスを懐かしむ。楽しむ。(2)

タイニーPのブログを読んでいる。 tiny-p.cocolog-nifty.com 1980年~1985年あたりが一番面白い。やっぱり一番PCに熱中した時代だから。私の知らないPCの話も出てきて、私の知識なんてまだまだ甘いなぁとか思ったり。 これを読んでいると8色パレット付きのグ…

WebGLでレトロPC風のグラフィックス環境を作る - PCグラフィックスを懐かしむ。楽しむ。(1)

昨日はグラフィックスを懐かしむための環境作りを行っていた。以下の画面がそうである。実行するとカラーパターンのようなものが表示されるだけだが。これを使って過去に勉強したことを振り返りつつ実装した結果を実行可能な形で残していこうという試みであ…