demouth::blog

javascriptでアスキーアート生成

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