静止画をドット絵風の低画質に変換にする「低画質画像メーカー」を作った
概要
静止画をドット絵風の低画質に変換にする「低画質画像メーカー」を作った。
内容は先日画像をドット絵風の低画質に変換するTwitter Bot「低画質」を作ったで書いたとおり。
こういう画像を
こうする。
この画像*1が
こうなる。
世の中の画像が低画質のドット絵風味の画像になる。
やったぜ！
使い方
使い方は、
- ①「ファイルを選択する」から変換したい画像を選択する
- ② デフォルトのパラメーター(ドットサイズ4x4, 色数6色)で画像が生成される
- ③ 「ダウンロード」ボタンが現れるのでそれを押すと画像が保存される。
という感じ。画像アップしたらひょいっとできる。
その他にも各スライダーを動かしながら自由にドットサイズや色数も調整できる。
ドットのサイズは小さくなればより高画質に、
色数は小さくなればより単色に
近づいていく。
コツ
良い感じの低画質画像を生み出すためにはいくつかコツが有る。
1. 写真などの色数の多い高画質画像の場合
写真などの色数の多い高画質画像はドットサイズを2~6くらいの小さめにしたほうがよい。
ドットサイズを大きくしてしまうとただのモザイク画像になる。注意。
また色数は10以上のほうが雰囲気が保たれる。これは好みの問題かもしれない。
2. 書き込みの多いイラストの場合
細かく書き込まれたイラストなどのドットサイズは2。
これは2が良い。4もいいけど2のほうが良い感じのドット絵感がでる。
色数は少ないとファミコンっぽい感じになるし、多いとこれはこれで出来の良いドット絵感がでる。
Pixivの絵師の人でイラスト書けてドット打てない人は楽しめると思う。
3. 低画質の画像の場合
元々低画質の画像は変換してもあまり面白みが無い。
4. いらすとやの場合
いらすとやの画像も変換が割とうまくいくことが多い。
ドットサイズは4。
色数は最大10くらいかな。これ以上やってもあんまり面白みがでない。
まぁ基本的にどれも好みの問題だからなんとも言えないな...。
注意
一つ注意があって、それは画像の縦横サイズがドットサイズで割り切れないとうまく変換できないということ。
9x9の画像を2x2のドットで全体を加工していくと途中でフィルタがはみ出るよね。こういうことが起きるので画像によって利用できるドットサイズとそうでないドットサイズがある。基本画像の縦横サイズは偶数が良いかもしれない。
あとブラウザもマシンパワー考えるとPCでChromeとかFirefoxとかが良い気がする。
まとめ
- 静止画をドット絵風の低画質に変換にする「低画質画像メーカー」を作った
- 画像によってドットサイズや色数のパラメーター調整をできる
- 画像ごとに良い感じになるコツが有る
- 画像の縦横サイズがドットサイズで割り切れないとエラーになる
BotはPythonで書いたけど、今回はJavascriptで書いた。
理由はwebサービスとして公開するときはできるだけサーバーへのリクエストを減らしたいから。画像の変換をサーバー側でやるとなるとキューに突っ込んでワーカー動かしてポーリングして変換待ちして〜みたいなだるいことが多い。全部クライアント側でやってくれると気楽でいい。
また昨日も紹介したがJavaScriptで画像のクラスタリングによるドット絵風加工にある手法と公開されているライブラリを大いに活用させてもらった。
ただこのライブラリには透過対応のコードがなかったのでそこは自分で書いてインターフェースを整えるなどした。あとでプルリクでも送るかも。
それと余談だが、このドット絵風低画質画像を作ってるときに静止画じゃなくてアニメGIFにも使えないかな〜と思って色々パラメーターいじって実験してるときに奇跡的にできたGIFをのせておきます。ワンパンマンのワンシーンなんだけど流石にこれは良いのでは...と感動した。
自動でドット絵GIFアニメの生成してぇなぁ。。。今のところこんないい雰囲気でできることはくっそ稀。。
ということで、長くなりましたがお好きにお使いくださいませ〜。
あ、あと不具合とか感想とかは#低画質画像メーカーでつぶやいてくれたらありがたいす。
※モバイルだとダウンロードできない不具合があるので後で直します...
