スポンサーリンク

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

スポンサーリンク
JavaScript
スポンサーリンク

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

スポンサーリンク

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

yoyoyo-yo/Gasyori100knock
画像処理100本ノックして画像処理を画像処理して画像処理するためのもの For Japanese, English and Chinese - yoyoyo-yo/Gasyori100knock

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

画像処理100本ノックを作ったった - Qiita
画像処理が初めての人のための問題集をつくったりました。(完成!!) 研究室の後輩用に作ったものです。 自然言語処理100本ノックがあるのに、画像処理のがなかったので作ってみました。 画像処理の基本のアルゴリズム理解につながると思いま...

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

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

JavaScriptで挑戦してみる

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

デモサイト

GitHub Pages に置きました。

画像処理100本ノックJS
画像処理100本ノックJS : 画像処理100本ノックにJavaSCriptで挑戦してみました。

GitHub

s-yoshiki/Gasyori100knockJS
画像処理100本ノックをJSで解いてみる. Contribute to s-yoshiki/Gasyori100knockJS development by creating an account on GitHub.

現在(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の偉大さには感謝したいと思います。

関連

タイトルとURLをコピーしました