画像処理でダーツの軌道を描画してみた話

はじめに

どうも．Life is Tech ! 名古屋 iPhoneメンターのちゃーりーです．ずっとスマブラで遊んでます．
昨日の谷口君の記事，面白かったですね．さすが！僕も負けないように頑張ります．
今日はAdvent Calendar 16日目！クリスマスまであと1週間！
残りのメンターの記事も楽しみですね！！
Advent Calendarお決まりの挨拶をしたところで早速ばちイケな記事をどうぞ．

そもそもなぜこの記事を書いたか

僕は普段大学院で画像処理に関する研究をしています．
画像処理って言うと難しく聞こえるので，身近な例であげると

SNOWのこういうやつとか．

あとは，Photoshopで写真を加工したりとかも例としてあげられます．
さらには，自動車の自動ブレーキシステムにも使われています．
どうですか？意外とみなさんの身の回りは画像処理で溢れていませんか？
少なからずその恩恵を受けているわけです．

そして今回の記事で，画像処理のさらなる楽しさと魅力に気づいてもらえたらなと思っています．
画像処理に全く触れたことのない方のために，難しい説明を省きながら図やイラストを使って説明していきます．

今回の実施内容

今回は，僕の趣味の一つであるダーツに画像処理を落とし込もうと思います．
ダーツ楽しいですよね．この記事を機にダーツの人口が増えることも期待しています．
では，ダーツにどうやって画像処理を落とし込むかですが，今回は，ダーツの軌道を映像上に描画することで，自分の投げたダーツがどんな軌道を描いてターゲットに飛んでいくのかをユーザに提供します．そして，その情報を基にユーザがスロー（投げる動作）を修正することで練習の効率化を図ります．

下手くその 上級者への 道のりは 己が 下手さを 知りて一歩目
安西監督 - 井上雄彦『SLAM DUNK（スラムダンク）』

例えばこちらは何も処理を施していない映像です．

ダーツがどのように飛んでいるかは分からなくはないです．
でも，それがこんなふうに見えたらもっと分かりやすくないですか？

(この軌道は筆者のイメージです)

ちなみに本記事で利用した映像は全て，Bull（まとの真ん中）を狙ったものになります．

今回は画像処理ライブラリのOpenCVを利用して，上記の画像のような処理の実装を目指します．
うーん・・・画像処理って面白そうだね！！！！！！

提案手法

処理の流れはこのようになります．

1. 映像の入力
2. フレームの分割
3. ダーツのフライト領域検出
4. フライトの座標検出
5. 座標を前フレームと比較（進行方向の判定）
6. 映像の出力

こんな感じです！順を追って説明していきます．

1. 映像の入力

そのままです．プログラムに映像を入力します．
今回はこのような映像を入力します．

先ほどにも載せましたね．
30fps程度の映像だと，ダーツの速度が速すぎて捉えきれないので，iPhoneXSで撮影したスローモーション映像を利用します．こちらはgifですが，実際に利用した映像はmp4の映像です．

2. フレームの分割

映像に対して画像処理を施す際，映像を1枚1枚の画像として切り出します．

実は動画というのはこのように，静止画の集まりなのです．
パラパラマンガをイメージしてもらえると分かりやすいと思います．
切り出した1枚1枚の静止画に対して処理を行うため，フレームの分割を行います．

3. ダーツのフライト領域検出

さて，次は切り出したフレームから，どうやってダーツを検出するか です．
実はこれ，めちゃくちゃ簡単にできちゃうんですよ！！
その方法がこちら　

ダーツのフライト（羽部分）を緑にするです．
なぜ，これだけでダーツが認識できるかというと・・・
クロマキー合成って知ってます？映像に携わっている方には身近かもしれません．よく映画とかで使われるあれです．

緑の領域だけを切り抜くことで
手だけの画像にすることができます．

この技術の応用でダーツの位置が認識できてしまいます．
つまり映像上の緑の領域はダーツのフライトの部分だよねとあらかじめ決めてしまうのです．

そして，ダーツのフライトの領域のみを抽出した画像がこちらになります．

どうですか？ちょっと見えづらいですけど，しっかりと飛んでいるダーツのフライトを検出できていますよね．
ちなみに，フライト部分以外はわざと真っ黒に塗りつぶしてあります．

4. フライトの座標検出

先ほどのフライト領域のみを抽出した画像を二値化します．
二値化画像とは，画素の色が二種類の画像のことです．基本的には関心を当てたい部分を白，それ以外の部分を黒とします．
今回の場合は

このようにフライトの領域を白，それ以外の部分を黒としました．

しかし，このままではフライトの座標は特定できません．
なぜなら，現状ではフライトのある白い部分を塊とは認識していないからです．
そこで，二値化画像に対してラベリング処理を施します．
ラベリング処理とは，画像中の隣合った画素を抽出する解析手法です．

するとこちらのような特定の領域（今回は白い部分）を一つの塊として認識してくれます．
そうすれば，OpenCVの関数で特定領域の重心座標を検出することができます．
あとはその座標を配列に加えてあげることで，フレームごとのフライトの座標が配列に記録されていきます．

5. 座標を前フレームと比較

次は前後のフレームで座標を比較します．ターゲットの方向を正，反対を負とした時，ダーツが正の向きに動いているか負の向きに動いているかを判定します．この処理は実装しなくてもシステムとして成り立ちますが，描画した時に分かりやすいと思うので実装してみます．

では具体的にどうやって実装するかですが，あるフレームnに着目して説明します．

フレームnにあるフライト座標はこうなっています．

そして，フレームnの前フレームにあたるフレームn-1のフライト座標はこうです

では，フライトの座標を記録している配列の中身はどうなっているでしょうか．

このようになっているはずですね．
なので

// indexには現在のフレーム番号が入っている
if ( フライト座標配列[index - 1].x < フライト座標配列[index].x ) {
// 正の向きに動いている
} else {
// 負の向きに動いている
}

と比較してあげれば前後の位置関係から描画の処理を分岐することができます．
後は，描画する色を変更すれば視覚的にも進行方向の違いを提示することができます．

6. 映像の出力

最後に一連の処理を施したフレームを映像として記録していきます．

こういうイメージです．

これでダーツの軌道を描画した映像ファイルが出来上がるわけです．

実験結果

では，これらの処理を施した映像がどうなったかというと・・・

見事！ダーツの軌道を描画することに成功しています．

最初に予測して書いてみた画像に比べると，違った軌道で飛んでいることが分かりますね．

また，狙ったターゲットよりも少し上に外してしまった時（右側画像）と比べてみると，投げ始めの軌道が若干高い位置にあることがダーツの軌道から分かります．

いや〜！すごい！ダーツ × 画像処理を実現することができました！
まさかプログラミングでスポーツが上手くなるキッカケを作れるとは！！！！
どうです？画像処理ワクワクしませんか？

今後の課題(解決したい優先順位順)

実装から実験まで行い，思ったことです．結構真面目な話なので読み飛ばしてもらって構いません．

動画分割の自動化

現状，撮影した動画のスローイングシーンをトリミングしてプログラムに入力しています．
ぶっちゃけ，それがめちゃくちゃ手間です．
なので，オプティカルフロー（物体の動きをベクトルで表したもの）を利用して，スローイング動作，ダーツの飛行の特性を明らかにすることで動画の分割を自動化できないかと思っています．

描画できていない時がある

結果画像からも分かる通り，軌道が一部歯抜けになっているところがあります．
原因は部屋の照明によって，フライトの色が白とび，もしくは緑以外になっていることが挙げられます．
これは割とどうしようもない外的要因です．
解決するとしたら色のみではなく，フレーム間差分や背景差分を利用して動的物体を抽出し，その上で色情報を基にダーツを検出するのがいいのではないのかと思います．
その場合，スローイングしている人をどう考慮して例外処理するかが難しそうです．

終わりに

ここまで読んでくださり，ありがとうございます．
画像処理って簡単で楽しいものとわかっていただけたと思います．
明日はおしゃれイケメンスーパーデザイナーりゅーじん君の記事です！

高まる期待 明るい未来 見ろよ絶対 はやく読みたい りゅーじんQiita チェケ
MC ちゃーりー

それでは．