しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

imgToAsciiでAAを自動生成

imgToAsciiというJSのライブラリで画像をAA化してみました。

github.com

使い方

ライブラリはimgToAscii.jsの1ファイルのみで、100行くらいのシンプルなライブラリです。

<script src="./imgToAscii.js"></script>

下のように画像を指定してdisplayメソッドを呼び出すだけでAAを表示する事ができます。

<script>
  let ele = new imgToAscii('./img.jpg', 0.3);
  ele.display();
</script>

AA化したのは下の猫画像です。
ぱくたそのものを利用しました。

f:id:llcc:20181018185850p:plain

AA化の結果は下の通りです。
綺麗にAAにする事ができました。

f:id:llcc:20181018185925p:plain

imgToAsciiの第2引数はAAの拡大率です。
デフォルトは1なんですが、それだととても大きくなってしまうので0.3にしています。

let ele = new imgToAscii('./img.jpg', 0.3);

AA化の仕組み

仕組みはとてもシンプルで「各ピクセルの色の明るさに応じた文字を割り当てる」という形です。
具体的には明るさに応じて下の文字を割り当てています。
左が一番暗くて右は明るい色です。

["@","%","#","*","+","=","-",":","."," "]

明るさは下の公式を使って算出しています。
rgbは画像のピクセルのRGBの値です。

(r * 0.2126) + (g * 0.7152) + (b * 0.0722)

この公式については下ページが詳しかったです。

グレースケール - Wikipedia