S.F. Page

Programming,Music,etc...

JavaScript

ES2015 ModuleのLoaderの件

ECMA Script 2015 Module (ESM)はまだ未確定の部分があるとのこと。 先日読んだ「ES Modules と Node.js について - from scratch」を引用するに、 そもそも ECMAScript 2015 自身で定義されたのは構文だけなので、構文はともかく、どうやってモジュールを取…

ES2015 Modulesの実装がなかなか進まない件

標題の件、なんでだろうねえとちょっとググったら、素晴らしい記事が。前読んだような気もするけど。。 yosuke-furukawa.hatenablog.com そもそも ECMAScript 2015 自身で定義されたのは構文だけなので、構文はともかく、どうやってモジュールを取ってくるか…

bl.ocks.org/sfpgmr/ を手直しする。

ドメインを変えたり、APIが変わったり、バグっていたりでほとんどのコンテンツが動かなかくなっていたhttp://bl.ocks.org/sfpgmr を手直しした。 内容的には Web Audio APIのモジュラー接続の作りかけ ブロック崩し SVGファイルをthree.jsのshapeに変換して…

rollup.jsを使ってみる

モジュールのインポート周りをES2015化して、gulpも併用して、rollup.jsでelectron用とモダン・ブラウザ用にバンドルするようにしてみた。 github.com electron用とブラウザ用がまったく同じコードで動くわけでもなく、コードも2種類用意するのだが、共通す…

近頃のモダンブラウザのES2015対応具合とrollup.js

近頃のモダンブラウザのES2015対応具合はEdge14でも9割を超えており、もうES5に変換する必要はなくなりつつある。 つまりはES2015規格レベルではBabelは近い将来必要なくなるということだ。ただJSはこれからも進化していくので、機能の先取りという役割でBab…

rollupというツールを発見した。

まあちょっと、three.jsでエフェクトコードを書いているけど、electronだけでなくブラウザでも動かしたくなってきている。electronではcommonjsモジュールが使えるからガシガシモジュールを作ってrequireしているけれども、ブラウザではその手は使えない。Br…

three.jsのgpgpu Birdsのコードを読む。

RYDEENカバー用の動画を作るためにthree.jsを復習していて、ようやくシェーダー・マテリアルの使い方がわかってきてちょっと楽しくなってきている。 ただまだまだ表現として稚拙だし、サンプルのパラメータやコードを少し変えてみている程度なので、もうちょ…

JavaScriptの黒魔術的な側面についてちょっと書く

なぜかQiitaに去年投稿したevalハックのポストにまたストックが増えてきてなんでかなぁ?と思ったら人気ポストにリンクされていたからだった。 qiita.com 私がこのevalハックを思いついたわけではなくて、knockoutのコードを眺めてたら偶然見つけただけなの…

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)

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

はてなブログのカスタマイズ - カテゴリをブログの下につけてみる。

ちょっとカスタマイズ熱に火がついて、いろいろいじってみている。今日はブログ下にカテゴリを追加してみた。 最初はタグ・クラウド風にしてみたが、なんかいまいちで、今はBootstrapのボタンとバッジというスタイルにしている。カテゴリを見てみるといい加…

はてなブログの自作テーマのメニューで不具合が発生 - とりあえず復旧

とりあえず復旧させた。ソースコードは下。きわどいが。 github.com ついでにjqueryベースだったのをd3ベースに書き換えた。そのおかげでInsider Build 14271のedgeではメニューが表示されなくなった。 カスタマイズスクリプトをできる限り最後に読み込ませ…

はてなブログの自作テーマのメニューで不具合が発生

まあこれは自業自得なのだが。 最近はてなブログの内部実装が変わったらしく、私のブログのナビゲーションバーのアーカイブメニューをクリックしても年・月別のアーカイブメニューが表示されなくなった。 そもそもこのテーマははてなブログ臭さを消去するた…

ブラウザ上で動くx86エミュレータ上で動くWindows 98とIE4

これもたまげたなぁ。。JSで動くエミュレータ上で動くWindows 98。IE 4.0が懐かしい。。Dynamic HTMLとか、Netscapeと競っていたころだよね。。それとアクティブ・デスクトップね。 Virtual x86 ネットワークはつながらないので、IE4でブラウジングすること…

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

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

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

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

JSSpeccyというSpectrumエミュレータを試す。

JSで作られたSpectrumエミュレータ。ソースコードも公開されていて、結構まともに動いている。 github.com jsspeccy ゲームをいくつかやってみたけど、懐かしさ炸裂だ。。 あとJS版以外のWorld of Spectrumのエミュレータダウンロードページを覗いてみたけど…

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)

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

ChakraCore

マイクロソフトが自社のJSエンジンChakraCoreのソースコードを公開した。 github.com ChakraCoreは下図の紫色の部分らしい。 他OSへのポートやNode.jsのエンジンとしても使えるようにするらしい。V8のAPIをエミュレーションするレイヤを挟み込んで対応するよ…

Edge13のES2015対応具合が結構すごい。

ECMA Script compatibility tableを見ていると結構頑張っているなと思った。 ECMAScript 6 compatibility table ただこれはabout:flagsで「試験的な JavaScript 機能を有効にする」にチェックを入れた時の場合なのだが。それにしてもすごいなと思った。IEも…