Help us understand the problem. What is going on with this article?

写真からマインクラフトのドット絵に変換するwebアプリを作った話

mona.png
タイトルの通り,写真からマインクラフトのブロックドット絵に変換するwebアプリを作成しました.
こちのらリンクから飛べますので遊んでみてください!
pic2minecraft
さらに機能を追加した新バージョン
(20/08/14 リリース)

(20/06/08 16:47追記)
要望がありましたので,使用ブロックの表示を日本語にしました.

作った経緯

画像処理系のアプリを何か作りたいなーと考えていました.そしてマインクラフトのドット絵に変換するものがあったら面白いなーと考えて作りました(唐突)

使っている技術

このwebアプリはフロントエンドのみで動いてます.なので画像処理を含めた全ての処理はローカルマシンで動かしています.画像処理の部分はJavascript(OpenCV.js)で書きました.ホスティングサーバはFirebaseを利用しています.

OpenCV.jsとは

OpenCV.jsとはJavascript用のOpenCVライブラリです.

OpenCV.js導入

公式ドキュメントによると,ビルドが必要だそうです.色々試したのですが,うまくいきませんでした(T ^ T)
仕方がないのでビルド済みのコードを直接とってくることにしました.
こちらからビルド済みのコードが手に入りますのでcurlでとってきました.

 curl https://docs.opencv.org/3.4.1/opencv.js -o opencv.js

別に直接とってこなくてもHTMLに

<script src="https://docs.opencv.org/3.4.1/opencv.js"></script>

と記述すれば使うことができます.

ホスティング

ホスティングにはFirebaseを用いています.FirebaseはGoogleアカウントがあれば簡単にデプロイできます.今回のアプリのようにサーバーを必要としないアーキテクチャとも相性がいいですね!

Firebaseで初めてのデプロイ

変換アルゴリズム

では実際にどのようなアルゴリズムで変換しているかについて紹介していきます〜

  1. 画像をブロック数の画素数になるようにリサイズする
  2. 元画像とマインクラフトブロックのLab値を計算
  3. 元画像のLabとマインクラフトのブロックそれぞれとのLabのユークリド距離を計算
  4. 差が最も小さいブロックを生成画像に配置

image.png

変換アルゴリズムはシンプルなんですが,RGBでなくLabで色差を計算しているところがキモです.RGBで色差を計算すると人が感じる色の違いとは少しずれたものになってしまいます.対してLabでは,人の見えに近い色差を計算できます.これはLabが人の錐体細胞の反応を元に設計された色空間だからです.

色差を求めるアルゴリズムによる違いは以下の記事に分かりやすくまとめられています.分かりやすく可視化されていてとても面白いので是非ご覧ください!
色差アルゴリズムの違いをビジュアル化してみた

このアプリのソースコードはGitHubに公開しています.
変換アルゴリズムの詳細はこちらから確認してください.(main.jsに変換アルゴリズムが書いてあります)
https://github.com/kult0922/minecraft_dot

色差の計算に使う色空間の違いによる生成結果

ここではRGBとLabで色差の計算を行った場合の結果について比較していきます.

元画像 RGB Lab
https___qiita-image-store.s3.amazonaws.com_0_128670_3e29cc44-62e3-8dec-ab14-3b6476c233b7.jpeg ダウンロード.png minecraft_dot (5).png
ocean.jpg ダウンロード (1).png minecraft_dot (4).png
monsan.jpg ダウンロード (2).png minecraft_dot (3).png
fuji.jpg ダウンロード (3).png minecraft_dot (2).png

あまり違いがないように見えますが,1段目のカラー帯の画像を注意深く見ると,RGBよりもLabの方が元画像に忠実であることが分かります.また,最下段のRGBの結果は桜のピンク色を再現できていません.

オプション機能

ガラス,石,木のブロックのみを使ってで変換する機能もあります.もちろん画像によっては全く再現できないものもあります.モナリザの画像では石ブロックのみでは全く再現できていないのが分かります.灰色の多い画像ならそれなりにうまくいくと思いますが...ガラスは実際にマインクラフトで作ると背景が透けて見えるので面白そうだなーと感じています(実際に作ってはない) 木ブロックは意外と再現できていますね.

元画像 ガラス
minecraft_dot (2).png minecraft_dot (1).png minecraft_dot (3).png

使用するブロック数を変えた例です.数字は長辺のブロック数を表しています.流石に16ブロックだと何のドット絵か分かりません.

元画像 128 64 32 16
minecraft_dot (4).png minecraft_dot (5).png

使用したブロックは使用個数が表示されます.
image.png

まとめ

ちゃんと変換できるアプリができたので個人的には満足です.今後,使うブロックなどを選択できるようにする機能などもつけていきたいと思っています.OpenCV.js便利ですね.フロントで画像処理をするときは重宝することになる気がします.
以上写真からマインクラフトドット絵に変換するアプリの話でした.是非ドット絵を作成する際はご活用ください!!

参考

Firebaseで初めてのデプロイ
OpenCV.jsをサクッと試す
色差アルゴリズムの違いをビジュアル化してみた

kult
深層学習を用いた動画生成系の研究をしています
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away