Embedded Files
音楽を操作した後は、手の動きでディスプレイ上のクルマを操作してみましょう。
まず左右にのみ動く車を考えます（下の図）。手の左右の位置に応じた速度でこの車を動かすことを考えます。左に移動するときは左向きに、右に移動するときは右向きに車の図形を表示します。
この車を手の位置による速度制御で動かすことを考えます。図のように手の外接四角形を作り（各関節の位置の最外部にある点の位置から作成）、その中心位置（緑の円）を手の位置とすることにします。
音楽の時と同様に真ん中に緩衝領域を設定し（下の図参照）、それより右側になったら車に右方向の速度を与えます。車を表示するためには車の位置を求めないといけません。そのため、車の位置を表す変数（今はｘ座標値のみを考えればよい）をcarXとします。最初、車は画像中心0の位置にいるとして、carXの初期値を0とします。
その後、手の動き（図の緑色の点の位置）に対応した速度指令が与えられることになります。下の図のspeedの100はその車の100%の速度、すなわち最高速度を表します。自分の環境に応じて調整して、手の操作でうまく車を操れるようにしましょう。
p5.jsのdraw関数の中で手の位置を計算しているので、速度指令speedが与えられる周期はframeRate()関数で得られる値の逆数となり、1/frameRate()で計算できます。よって1回の計算で車が移動する量は speed/frameRate() で計算できることになります。これを使って車の位置を計算すると
carX += speed/frameRate()
とすれば、速度を積分して位置を出す計算が出来ていることになります。
Page updated
Google Sites
Report abuse