🖼️

ドット絵のドットの大きさを自動認識する

2022/09/18に公開

入力したドット絵をターミナルに表示するコマンドを生成するWebアプリを以前開発したのですが、1ドットが1ピクセルの原寸大のドット絵にしか対応しておらず、不便でした。
そこで、1ドットが数ピクセルに引き延ばされたドット絵を元の大きさに戻してからコマンドを生成する機能を追加しました。

ANSIアートコンバーター

元の大きさに復元するには1ドットの大きさがわかっている必要がありますが、自力で数えるのは面倒なので自動的に認識する機能を実装しました。

方法

左端のから順に隣り合った列の色を比較し、1ピクセルでも違えばそこで縦に分割します。
すると、図のように色が同じ列の区間に分けることができます。
行に対しても同じ操作をし、横方向の区間に分けておきます。
縦横の区間の幅を L_1、L_2、……、L_n とします。

ドット絵において色の変化が起こるのはドットの境目のみなので、
L_iは1ドットの大きさの整数倍になります。
なので、L_1 ~ L_n の最大公約数が1ドットの大きさになります。

実装

JSで実装したものがこちらです。
引数にimagedata_オブジェクトを渡して使用します。

https://github.com/nishi-yuki/ansiconverter/blob/0cd1d37c094ce531280ffb5ef5e148cc04fb5286/main.js#L115-L165

Discussion