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

S.F. Page

Programming,Music,etc...

HTML5

Webデザインは迷走中

迷走中の画面はこちら。 試作物はgithub pagesにアップしてチェックしている。一応HTML5 ValidatorはPassしている。 ウーム。Webデザインは難しい。。 クロスブラウザ的な思考は捨てて、できる限り規格通りの実装を試みようとしているのが今の段階である。 …

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 動画の素材は以下…

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)

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

敵エディタを作る - three.jsで2Dシューティングゲームの続きを作る(13)

非常にゆっくりだが、敵エディタの実装を続けている。もう少しでできそうな気もするが、まだまだな気もする。 ジェネレータの使い方がまだいまいちで、変なコードになってきている。が、まあそれは二の次にしておこう。とりあえずエディタを完成させて、ゲー…

敵エディタを作る - three.jsで2Dシューティングゲームの続きを作る(12)

敵エディタをぼちぼち作っている。 ギャラガタイプのシューティングゲームなので「敵編隊」と「敵1つ1つの動き」の編集が必要だ。まずは編隊の情報を編集する画面を作っていて、ある程度めどが立った。画面自体にはWeb Audioのシーケンス・エディタで作った…

three.jsで2Dシューティングゲームの続きを作る(11)

開発支援ツールを動かすときはElectronで動かすようにしてみた。作成したデータを保存する必要があるし、そうしたほうが何かと便利そうなので。 ブラウザ版とソースコードをできる限り共通化して、開発支援ツールはブラウザ版ではインクルードせず動作するよ…

three.jsで2Dシューティングゲームの続きを作る(10)

ちょっとまだBUGが残っているが、面を先に進めることができるようになった。20面を超えるあたりでは難易度が鬼のようになっていることが判明した。

three.jsで2Dシューティングゲームの続きを作る(9)

開発を支援するツールを作成し始めた。亀のように鈍い進み具合だが。そういう言い方は亀に失礼か。。 敵の動きをエディットするツールを作る前に、ゲームの任意の面で開始したり、ポーズしたり、リセットしたりする機能を実装している。それはもうちょっとし…

three.jsで2Dシューティングゲームの続きを作る(8)

今週はあまり時間がなかったので、先にゲームパッド対応をしてみた。 github.sfpgmr.net XInput対応のゲームパッドであれば動くはずだ。一応Chrome,Firefox,Edgeで動くことは確認した。 このゲームパッドAPI、ブラウザの実装度は低いと思ってたけどそんなで…

three.jsで2Dシューティングゲームの続きを作る(7)

とりあえずジェネレータ化は終えた。いまいちな実装であるが、ゲーム内容の充実に時間を割きたいので先に進むことにする。 github.sfpgmr.net とりあえず敵の動きのパターンを増やすためのユーティリティを作ることにする。今のままでは敵の動きを作るのが面…

three.jsで2Dシューティングゲームの続きを作る(6)

ジェネレータでタスクシステムの書き換えを行っているところ。この休日でほぼほぼ終わりそうだ。だがジェネレータの良さを生かしているとちょっと疑問なコードとなっているが、まあそれはおいおい手直しすることにしよう。 これが終わったら敵の配置や動き作…

three.jsで2Dシューティングゲームの続きを作る(5)

今コードをジェネレータを使って書き換えている。やっぱりジェネレータを使ったほうが状態保持のための変数を用意・管理しなくていいしね。これをしなくていいのはジェネレータがyieldを発動した時点の状態を保持してくれるからだけど。面倒な部分を言語が肩…

three.jsで2Dシューティングゲームの続きを作る(4)

新しいフィーチャーを追加しようとしたが、敵の移動データを入力するのが面倒なので、どうしようか思いつつ、コードがちょっと汚いというか古臭いという感じなので書き換えていた。といってもそれで洗練されたかというとそうではないのだが。自機のデザイン…

three.jsで2Dシューティングゲームの続きを作る(3)

続きを作ると宣言したものの、これといったアイデアは依然としてない。考えていることを列挙すると ボーナス・ステージの内容をどうしようか。ギャラガとかギャプラスのボーナス・ステージは楽しかったな。 1-3面を通常、4面をボーナス、5面をボス敵にし…

three.jsで2Dシューティングゲームの続きを作る(2) - gulp + babel + browserifyでビルドするように変更し、コードを修正した。

表題の通り、シューティングゲームのビルドをgulp + babel + browserifyで行うように変更した。 コードはファイルで分割していたものの、モノリシックな構成になっていたので、ファイル単位でモジュール化を行った。 といってもファイル間で疎に保てているか…

three.jsで2Dシューティングゲームの続きを作ることにする

2Dシューティングゲームの続きを作ることにする。 この作りかけは現時点ではギャラガの劣化版となっているが、何か新たなアイデアを追加してそこそこ遊べるようなものにしたいと思う。 といってもまだこれといったアイデアはないのだが。ちょっと隕石のよう…

2Dシューティングゲームを修正する

DownWellに触発され、ゲーム作りをしたくなってきた。まずは以前作ったギャラガもどきの2Dシューティングゲームを手直し。 動くものは下記。Chrome/Firefox/Edgeでの動作は確認した。 github.sfpgmr.net このゲームはthree.jsを2Dレンダリングエンジンとして…

馬のアニメーションをVR対応(Side By Side 3D方式)にする

ics.media THREE.JSで簡単にVR対応できるというので以前作りかけて放置していた馬のアニメーションでやってみた。確かに簡単だった。 馬の3Dアニメーション(VR対応) ただ上記をiphone 6で実行してみたけども相当動きがつらかった。。

Seascape

私の好きな波面のデモ。こういうのはずーっと観てられるという。 これは私のPCでも60FPSで動く。意外と軽いからねえ。複雑そうだけど。GTX960だと楽々だ。iphone6でも50FPS超えだった。いやぁ、軽いねぇ。恐るべきシェーダーパワー。

Snail

Snailは世界最高峰の GLSL シェーダデモらしい。 webgl.souhonzan.org 私のPCで実行したら30FPS程度であった。GTX960でも60FPSいかない。970以上じゃないときついのかな。やっぱり。ただ思ったほど虫は動かない。カタツムリだから当然か。 このShadertoyと…

HTML909

Web AudioによるTR909のクローン。懐かしいねぇ。といっても実物を触ったのは中古楽器屋の店頭以来だが。20年以上前だろうか。 icon.jp html909.com 大阪の昭和町に中古楽器屋さんがあって、そこによく通ってた。そこでYAMAHA C-1の中古とか買った。ある時…

レイトレーシング - 格子柄の地面と鏡面の球体のデモはいつから始まったのか。

WebGLによるリアルタイム・レイトレーシングの記事。 qiita.com ブラウザ上でリアルタイムでレイトレーシング(レイマーチング)を行い表示するというもの。ブラウザからGPUをいじれかつ、リアルタイムでレイトレできる時代が来ようとは。 PCでレイトレーシ…

Web Audio APIのモジュラー接続デモを作ってみる(20) - 範囲選択機能の実装

ますます実装スピードが遅くなっている。今週は範囲選択機能を実装中。 シーケンスデータを実装するのにジェネレータをコルーチン代わりに使用しているが、関数の実行途中でyieldできる利点を生かした実装とは言い難いものがあったのだが、ちょっとだけ利点…

Web Audio APIのモジュラー接続デモを作ってみる(19) - 小節単位の移動機能を実装する

小節管理部分と、小節単位の移動機能を実装した。これで小節管理は一段落だ。 次に任意選択&カット・コピペを作ろうかなと。おっとコマンド機能を実装するのを忘れているな。全体として2割程度の実装状況だから、まだまだ作らねばならない部分がたくさんあ…

Web Audio APIのモジュラー接続デモを作ってみる(18) - 小節管理部分を作り直す

引き続きエディタを作成中である。少し前に入力や上下カーソルを移動すると音が鳴るようにしてみた。これでかなりMC-4っぽくなってきた。 ただ小節管理がちょっとこのままではまずい気がした。例えばリピートやセームメジャーの処理をするときとかね。なので…

Web Audio APIのモジュラー接続デモを作ってみる(17) - localStorageを使ってデータ保存・読み込みを作る

コードを改良するたびにテスト用のモジュラー接続を作ったりデータ入力をするのが面倒なのでlocalStorageに保存するようにしてみた。Bugはあるがとりあえず保存・読み込みができるようになった。データ形式はJSONである。例によってChromeのみで動作する。 h…

Web Audio APIのモジュラー接続デモを作ってみる(16) - シーケンスエディタ作成中

ぼちぼち作っていますよ。 現状の動くバージョンはこれ。Chromeでのみ動作する。 https://sfpgmr.github.io/webaudiomoduler/dist/20151205/ どの程度実装できたのは以下の通り。まだまだ全然である。この一覧はSTED2のHTMLマニュアルを元にしている。 キー …