昔のCRTっぽい画面をWebGLで作る - ABAの日誌
マイコンをつないだテレビみたいな画面を作りたいと思ってLocatePrintっていうコードを書いた。 こんな画面が作れる、し遊べる。locate, print, colorなどの命令でテキストを書けます。というかテキストしか書けない。 こういうブラウン管っぽい画面を作るにはWebGLをポストプロセスとして使うのが便利。 WebGL Fake CRT Effect for HTML5 Games この記事に必要なことはほとんど書いてある。glfx.jsっていうWebGLのイメージエフェクトライブラリを使って、ブラウン管の丸みっぽく画面を歪ませ (bulgePinch)、ふちをちょっと暗くすれば (vignette)、昔懐かしのテレビっぽい絵になる。 ただこの記事だとスキャンラインはPNGイメージを重ねることで実現しているけど、これもできればWebGLのシェーダーでやりたい。あとパピコンやAp
物理エンジンMatter.jsをテキストでレンダリング - ABAの日誌
CRTっぽいテキスト画面をWebGLで作るLocatePrintを使って物理エンジンをレンダリングするというデモも作った。 物理エンジンはMatter.jsを使っている。Matter.jsはもちろん自前のレンダラを持っているんだけどそれを他のレンダラで差し替えられる。 差し替える独自レンダラはMatter.jsのRender.jsを参考に作れば良い。特にRender.bodyWireframes関数にボディの頂点を線でつなぐ一番単純な描画方法が実装されているので、これを真似るのが簡単だ。 デモのコードでは、頂点を線でつなぐ部分でテキストを書くようにした。画面をテキストの幅と高さ（40キャラ x 20キャラ）のグリッドに分割し、線とグリッドが交わるポイントをリストアップする。グリッド内の各キャラについて、それらポイントがどこにあるかに応じて書くテキストを変える。例えば上端右と下端左にポイント
詳細PDF入門 ー 実装して学ぼう！PDFファイルの構造とその書き方読み方 - プログラムモグモグ
PDFのファイル構造を理解すると、テキストエディタでも直接PDFファイルを作ることができるようになります。このエントリーではPDFファイルの基礎要素を説明し、簡単なPDFファイルを例にしてファイル構造を説明します。更に、テキストを渡すとPDFファイルを吐いてくれる簡単なプログラムや、PDFを読み込んで簡単な解析をするプログラムを書いてみます。 目次 目次 まえがき オブジェクト 間接参照 ファイル構造 Hello, world! ヘッダ トレーラ 相互参照テーブル 本体 PDFを生成するプログラム 日本語の扱い方 日本語を含むPDFを生成するプログラム グラフィックス PDFを読むプログラム あとがき まえがき 1990年代前半、アドビシステムズは、どのプラットフォームやデバイスでも文書を確実に表示・共有できることを目的としてPDFファイルフォーマットを開発しました。 PDFの表示ソフト
Polymer 1.0をさわってみて - console.lealog();
さて、ここにこういうサイトがあります。 nodefest.jp 実はこのサイト、噂のPolymerの1.0をふんだんに使ってます。 というわけで、そんなそこまでがっつり使い込んだわけではないですが、知見らしいものが一応たまったので・・。 まだ見ぬ未来のポリマリストのために書いておきます。 Polymer Starter Kit github.com こういうのがありまして。 とりあえずcloneしてきてビルドすればそれっぽい雰囲気はすぐにつかめると思うので、さわってみたい人はここからはじめると良さそうです。 Gulp まずは外堀から埋めていきます。 # localhost:3000 で開発(ビルドしない) gulp serve # localhost:3000 で開発(ビルドしたものは`dist`配下に) gulp serve:dist # ビルドするだけ(`dist`配下に) gulp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
