Pixelizer
アイデア
data:png;base64画像を埋め込む代わりに色がついた文字を表示すればいいのでは？
ラスター画像とベクター画像のいいとこどりできたら最高
写真をsvg pathで書くのは無理
しかし拡縮に強くあってほしい
少し工夫を凝らしたカラフルなAAをSVGで表現してみるか！ なぜ文字を表示する？
＝ 色がついたsvg rectを散りばめるのではだめ？
文字を使うねらい
拡大したときにピクセル補完が効く
rect散りばめ作戦だと拡大に弱い
文字だと曲線パーツを容易に導入できて、連続中間色を得られるので拡大に強いはず
着目ドットに隣接ドット色で文字を重ねることで、境界を滑らかにできそう
完全に塗りつぶしな文字を避ければ、3個くらいは重ねられるだろうという予想
ぱやQの隙間に異なる色の・やiを覗かせられる
x, y を直接指定する必要がないのでラク
各行でspanで囲んでおくだけでいい
できた daiiz.icon
遊び方
$ python svg_c.py raw/pancake.jpg "@飯"
文字画像が html/pancake.a.svg として生成される
画像ファイルの各ピクセルを文字列「@飯」で表現する
何文字でもいいが、重ね合わせの性格上多すぎるとぼやける 絵の部位によって文字を変える必要はなく、全ピクセルでこの文字列を使う
入力画像が大きすぎる場合は適当にresizeされます
おすすめ文字
対象画像によって異なるが、経験上このへんの文字はハズレがない
斗, 飯, @, #, 井, ゑ, Φ, Q, U
着色されてない横縞が現れてしまった場合は p, q などの下に突き抜けている文字を加えるといい
曲線を含み、各文字を重ねたときに互いに干渉しないかなどを考えながら選ぶdaiiz.icon
いっそのことpixelizerに向いているフォントを作ってしまえばいい？ 生成物
スマホ含めて他の端末は問題ないので端末固有の問題？
付属viewページの様子
左はrawを単純に拡大、右がrawから生成した文字画像
https://gyazo.com/878cfcba6acda5279f43d6db92e06112/raw
width=1000~2000px の拡大にも耐えられる
https://gyazo.com/8337dd6950840d65653947fc77d32c6d/raw
拡大
https://gyazo.com/84a23e89b2c7facc911d0d3882976b30/raw
クリックして拡大すると@を観察できる
さらに拡大
https://gyazo.com/4654f0b79b8324168ad090f5effebc87/raw
@に飯のが重なっているのがうっすら見える
互いに相手が持たない字形パーツを補い合っている
おわり
いまのところ実践可能な使いみちは思いついていない
生成物のファイル容量が想像より大きかった
画像を文字で表現できるので差分のgit管理や可視化に使える？ とりあえず文字画像Tシャツつくろう
