h_nari @ 熊本市のブログ。電子工作、プログラミング、ゲーム、TV、 政治、インターネットなどに日々の思い付きを、 うだうだ~と書いていきたい。
このブログにはコメント欄を設けておりません。 記事への御意見、ご質問はtwitter @h_nari宛に お願い致します。


アーカイブ

メタ情報
RSS
Login

PixelEditorリリース

以前の記事 Virtual秋葉原建設 で紹介した画像編集ツールをリリースした。 写真などを変形し下絵にし、 マインクラフトのビル壁面などのブロック配置を デザインするツールだ。 名前はPixelEditorで ソースは github.com、 ツールそのものは github.io で使用できる。

リリースのネックになっていたのは 「遠近法ワープ(変形)機能」。 前の記事の時はAdobe Illustratorの機能で やっていたが、それではツールとしてリリースしづらい。 その機能は openCV.jsにあるのではないかと調べたところあった。 cv.perspectiveTransform()で座標の変換、 cv.warpPerspective()で画像の変換ができる。 変換には3x3の行列が必要だが cv.getPerspectiveTransform()に 対応する4点の座標を与えるだけで求めてくれる。 至れり尽くせりだ。 詳しい説明は こちらのページ を参照。

プログラムの機能としては、

  1. 画像を読み込む
  2. 長方形が投影された4隅の位置を指定
  3. 変換後の長方形の高さと幅を指定
  4. 遠近法ワープ
  5. 長方形以外はマスクして非表示

というようなことを行っている。

今回、typescriptを使用しているのでopencv.jsは opencv-ts を使用した。 インストールは簡単だし、型定義に加えて opencv.js本体も含まれているので便利だ。 opencv.jsの画像データはopencvのデータ形式で javascript/canvasから見ると特殊だが、 cv.imshow()でcanvasに直接書き込むことができる。 それを直接表示してもいいが、canvasの画像は他のcanvasに 拡大縮小なども含め自由に描画できるので 一旦非表示のcanvasに書込み、設定した拡大率などで表がしてやると 画像の拡大・縮小なども自由にできて便利だ。

PixelEditorには、近い色のブロックを自動配置する機能も実装した。 ビルの画像を1m x 1mのブロックで置き換えるので、元のビルの画像を 再現しているようには見えないが、近い色のブロックを探すのには便利だ。

Virtual秋葉原建設は、ビル建設から秋葉原駅建設に移り、神田川の 掘削などを行った。Java版マインクラフトで F3 + C キーで プレーヤーの座標がクリップボードにコピーされることを最近知った。 このデータを読込みブロックを選択・表示する機能を ChizuCraftに追加したところ大変便利になったので Virtual秋葉原の地図拡張ブームが始まってしまった。 また道路の路側帯等の表示もやりたいが現状では面倒なので これも航空写真を利用した支援機能をChizuCraftに追加したい。 やりたいことをいろいろ思いつくので 長く楽しんで行きたいと思う。

なお、Virtual秋葉原の進捗は #Virtual秋葉原建設 というタグで時々ツイートしている。