JavaScriptで画像処理100本ノックに挑戦してみた

目次

1. 画像処理100本ノックについて
2. javascriptで挑戦してみる
3. フロントの実装について
4. 問題の解説
5. jsで挑戦するメリットデメリット
6. 関連

画像処理100本ノックをJavaScriptで挑戦してみました。 Qiitaでバズってるのを見かけて作りたくなりました。 「ブラウザ上で完結したら面白いな」 & 「デモを共有できたら面白い」という動機ではじめました。 まだいくつか問題を残していますが、ここまで解いてみた所感を書きます。

画像処理100本ノックについて

https://github.com/yoyoyo-yo/Gasyori100knock

画像処理が初めての人のための問題集です。 あの「自然言語処理100本ノック」をリスペクトしているのでしょうか。 Qiitaでの紹介記事

https://qiita.com/yoyoyo_/items/2ef53f47f87dcf5d1e14

ソースは全てPythonです。C++版の制作も進んでいるようです。

何よりも解説が日本語で書かれているところがありがたいです。

JavaScriptで挑戦してみる

この画像処理100本ノックをJavaScriptで挑戦してみました。 Canvasを使って画像配列を操作できるので基本的な実装は難しくありませんでした。

デモサイト

GitHub Pages に置きました。

https://s-yoshiki.github.io/Gasyori100knockJS/

GitHub

https://github.com/s-yoshiki/Gasyori100knockJS

現在(2019/03/26)、約2ヶ月かけて40問目までクリアしましたが、後半に重い問題が多く残っているため、 100本クリアにはこれまで以上に時間がかかりそうです。

フロントの実装について

フレームワークにVueJSを使っています。VueRouterなども用いてSPAとして動かしています。

問題の解説

https://tech-blog.s-yoshiki.com/2019/04/1103/

https://tech-blog.s-yoshiki.com/2019/04/1111/

https://tech-blog.s-yoshiki.com/2019/04/1115/

https://tech-blog.s-yoshiki.com/2019/04/1120/

https://tech-blog.s-yoshiki.com/2019/04/1125/

https://tech-blog.s-yoshiki.com/2019/04/1142/

https://tech-blog.s-yoshiki.com/2019/05/1225/

https://tech-blog.s-yoshiki.com/2019/05/1245/

JSで挑戦するメリット・デメリット

ブラウザ上で動かせるのがJSを使う最大のメリットだと思います。 加えて、チャート系のライブラリが豊富なので、matplotlibに比べ、グラフィカルな表現がしやすいのも良い点だと感じました。

一方で、行列演算に関してはJSではnumjsやmath.jsといったものはありますが、 Numpyほど簡潔に行列の処理を書くことはできません。

(※今回のデモではアフィン変換などの行列演算を多用する箇所で math.js を使いました。)

また、フーリエ変換を実装しようとした際に複素数を利用しますが、 Pythonは「j」で扱えるのに対し、JSの場合は実部と虚部をそれぞれ実装する必要がありました。

改めてPython、Numpyの偉大さには感謝したいと思います。

関連