2012-01-24
いろんなサイトの文字を崩壊させる
いろんなサイトの文字をマウスオーバーで崩壊させる事ができるブックマークレットを作成して見ました。
下記の「ブックマークレット」というリンクをブックマークに追加して、いろんなサイトで実行してみよう！
いろんなサイトで実行してみる
Yahoo!JAPANで寺門ジモンさんのニュース記事本文にマウスオーバー！
注意
Chrome・Firefox・IE9で動きます。IE9の場合でも、ページにX-UA-Compatibleが指定されていれば動かないかもしれません。
なお、当ブログ（はてなダイアリー）ではエラーが発生してしまい動きません（prototype.jsが原因？）。
実装について
このブックマークレットはすべてjsで実装してあります。
ブックマークレットを実行するページのpタグとdivタグを取得して、その中のテキスト要素を1文字ずつcanvasタグに変換しています。canvasに変換する際にはdocument.defaultView.getComputedStyle()でfontSizeとfontFamilyを取得して、なるべく見た目が変換前に近くなるようにしています。さらにfontFamilyにはプロポーショナルフォントが指定されている事も考慮してmeasureText()でcanvasサイズを変更しています。
また、ページによっては文字数が多くてブラウザが固まってしまうケースがあるのでブックマークレット実行後5秒間経過したら処理を中断するようにしています。
圧縮前のソースはこちらです。
Permalink | コメント(0) | トラックバック(0) | 08:37 
2012-01-17
javascriptでアスキーアート生成
javascriptでこんなアスキーアートを自動的に生成できないかな、と考えて2つの実装方法を試して見ました。
実装方法1
まず実装が簡単そうな1ドット1文字で、等幅フォントを使用する方法を試して見ました。
この実装は、
var master = [ ["$","M","@"], ["M","W"], ["%","#"], ["8","9"], ["D","S","Q"], ["Z","V","E"], ["U","O","C"], ["b","d","k"], ["+","t","y"], ["(","/",")"], ["[","]"], ["i","l"], ["^","~"], ["`"], [" "] ];
といったマスターを用意しておき、1ドットの明るさを元にマスターから黒っぽい文字や白っぽい文字を選択します。
↓次のような小さめの画像を
↓こんな感じのアスキーアートにjavascriptで変換しています。
一応何のアスキーアートかは分かるレベルではないでしょうか？
↓jsdo.itに投稿してあるので実際に動いているところを確認できます。
こちらの実装方法だと大分それらしいアスキーアートにはなるのですが、前述のポルナレフのアスキーアートとはイメージが違います。そこでもう1つの実装を試して見ました。
実装方法2
こちらの実装は複数のドットを1文字で表現します。こちらの実装方法は、
.,|-/^$ _[]\'"#;:io=`¨二一ー／ヽヾｌ⊇〉ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾜｵﾝabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ┼+・∵●ω≧≦∀≡∪∩
といった文字を予めcanvasで描画しておき、アスキーアートに変換したい画像と描画しておいた文字をひたすら比較して近い文字を探していきます。
↓例えばこんな画像で
↓こんなアスキーアートができます・・・
似てない・・・分からなくもないけど・・・
↓こんどは違う画像でしてみようか・・・
だ、駄目だ・・・
↓jsdo.itに投稿してあるので実際に動いているところを確認できます（生成に5秒位かかるので注意）。
もっとそれらしくアスキーアートを生成できる実装方法があれば教えて下さい・・・
Permalink | コメント(0) | トラックバック(0) | 07:32 
