スポーツをITする（３）簡単なフォームチェック tensoleflow.js

スポーツをITする（３）簡単なフォームチェック tensoleflow.js:

前回の記事より、簡単なフォームチェックのロジックを追加してみました。

ボーン座標のズレ

ブラウザのgetusermediaを使って、TensoleJS posenet を適当にVideoタグで表示すると、映し出された映像に描画するボーン座標にズレが生じます。

これは、縦横比の問題であろうと思われ、試行錯誤の結果、iPhone8の場合、横幅340px、縦幅380pxでズレが最小限に抑えられるようです。以下はズレた例です。

フォームチェックのテンプレート

某一流プロゴルファーのボーン座標を写真から取得しました。

ゴルフのアドレス（構え）としては、ちょっとおかしい感じがありますね。

写真を横幅170px、縦380pxにリザイズして、画面上に合うように手作業しました。

フォームチェックのロジック

とりあえず最初は簡単な方法で、と思い、

・テンプレートの目と耳以外の１３箇所それぞれの位置と写した映像のそれぞれの位置の距離を測る。

・その距離が１０ピクセル以下なら１、でなければ０とする。

・最大１３箇所中、何箇所が１になっているか、を百分率する。これを一致率としてみる。

var cnt = 0; 
var max = 13; 
 
var temp = Math.sqrt(Math.pow((tb.nose.x - vb.nose.x),2) + Math.pow((tb.nose.y - vb.nose.y),2)); 
if (temp < 10) { 
    cnt++; 
} 
var temp = Math.sqrt(Math.pow((tb.leftShoulder.x - vb.leftShoulder.x),2) + Math.pow((tb.leftShoulder.y - vb.leftShoulder.y),2)); 
if (temp < 10) { 
    cnt++; 
} 
・・・・・ 
 
var rs = cnt / max * 100; 
 
$('.pa').html(Math.round(rs)); 

もっといい判定方法は無いかな、と思っています。

検証

スマホでは手ブレが激しいので、１３箇所がうまく判定出来ず、常に一致率は０％。

軸にしてみるとか、もう少しチューニングが必要。

映像公開はまた後日。。