ドット絵2

前回のドット絵って奴ですが、ちょっと踏み込んだ説明をします。
あれを一個一個作っていったと思われてもアレなので。

あれはペイントで描いたドット絵をHTMLに変換するプログラムを作っています。
大したプログラムではないんですが。
ちなみに。HTMLってのはウェブサイトを記述する言語で、文字に色をつけたり、画像やリンクを埋め込んだりする事が出来ます。
このはてなダイアリーも一部HTMLを使うことが許されてて、それを利用しています。
今回はFONTタグを利用。↓のように書けば白い■が作られます。
 <FONT COLOR=”#FFFFFF”>■</FONT>

画面キャプチャ↓です。

f:id:HoriKirin:20120304180541p:image

しょっぼいですね。
まぁ、プロトタイプとして作ってて、うまくいきそうならば真面目に作り直そうと思ってたんですが、なにぶん容量の制限がきついので真面目に作るのはやめました。
以前、、、というかまだ学生だった頃に、Perlで同じアルゴリズムのスクリプトを組んだことがあって、それをちょっと改良した感じです。

具体的にどうやって作ってるかってのですが、簡単にいうと以下の流れでやっています。

1 画像を読み込む(BitMap形式)
2 画像の各ドットの色情報を読み出す。
3 2の色情報を元にHTMLのタグを生成。

2で得られる色情報はRGBの形式で得られるので、まんまHTMLに置き換えることが出来ます。R(赤)=255、G(緑)=255、B(青)=255、って感じで。これで、それぞれの色の明るさを示していて、それぞれ0〜255までの範囲の値になります。
上の例だと全部255になってるので、全部明るい→白って事になりますね。
HTMLでは色情報を指定するときに16進数を使用しますので、変換してあげる必要があります。C++ならsprintfとか使ってやると楽ですね。

3では2の情報を<FONT COLOR=”#FFFFFF”>■</FONT>のCOLOR="#"の部分、シャープの後に入れてあげればいいって寸法です。
これをドット分繰り返せばOKなのですが、行の最後の場合改行の<BR>タグを入れてあげる必要があります。

これだけやればとりあえずちゃんと表示されるはずです。
単純ですね。

で、今回容量が大きくなってしまうので使えなかったんですが、一応容量に関しては多少工夫はしたんですよ。
たとえば、HTMLの場合ドット毎にタグを打つ必要はないので、同一の色が続く場合はいちいち打たないようにしたり、出現回数の多い色(正確にはタグを打つ回数の多い色)に関しては先頭でその色を指定して、タグを打つ必要を無くしたりです。

まぁ、そんな工夫も意味をなさないレベルの文字数制限でしたね。
ニコニコの動画説明は 999 バイトまで。
今のマルチバイト文字ってUTF-8とか使ってるようで、1文字4バイトかかります。
まぁ、半角文字ならば1バイトですが。
このプログラムだと1ドットに付き最大33バイトかかります。さらに改行毎に4バイト。
16×16ドットの画像を変換すると、全部異なる色の画像だったりすると、

(16*33+4)*16=8512

むりですね。
ちなみに今回使った画像は48×48です。