grain ASCIIアート生成ツール(画像からテキストへ) star

仕組み

この生成ツールは、画像をキャンバスに描画したうえで、サンプリング用のセルの格子に分割し、各セルの平均的な明るさ(輝度)を計算します。その明るさの値は、あらかじめ定義された文字密度のスケール — たとえば@%#*+=-:.のような — に対応づけられ、視覚的に密度が高く暗い文字(@)から、疎で明るい文字(ピリオドや単なる空白)まで並んでいます。ほぼ黒に近いセルは@になり、ほぼ白に近いセルは空白になり、その中間はすべて、測定された明るさに比例してスケール上のどこかに配置されます。この段階で色情報は捨てられます — どの文字が選ばれるかを決めるのは色相ではなく輝度だけです。

ここで一つ注意点があります。等幅フォントの文字は正方形ではなく縦長の長方形であるため、1ピクセルを1文字にそのまま対応させると、元の写真に比べて結果が縦方向に間延びしてしまいます。このツールはこの縦横比のずれを補正するため、列数のおよそ2倍の行数をサンプリングします — 横方向は1ピクセルにつき1文字、縦方向は2ピクセルにつき1文字 — これにより、最終的なASCIIアートの比率が、不自然に縦長にならず元の画像に近い状態に保たれます。

具体例として、出力幅を100文字に設定して写真をサンプリングすると、縦方向の2:1補正を適用した後で、およそ100列×60〜70行になります。これはプレーンテキストファイルやメール、ターミナルにそのまま貼り付けられるほど小さいサイズでありながら、色の痕跡がすべて失われていても、文字密度の対応づけが元画像全体の明暗パターンを保持しているため、十分に見分けがつきます。

知っておくとよいこと

すべての処理はブラウザ内で完結します。写真はメモリ上の<canvas>要素に描画され、JavaScriptによって1ピクセルずつ読み取られるため、サーバーに送信されることは一切ありません。出力幅を調整することで、詳細さとサイズのバランスを調整できます — 幅を狭くするとコンパクトでより抽象的な結果になり、幅を広くすると細部が保たれる代わりにテキストのブロックがはるかに大きくなります。また、結果を暗い背景(ターミナルなど)に表示するか、明るい背景(印刷したページや白い文書など)に表示するかに応じて、密度スケールを反転させることもできます。