カメラで遊べる無料アプリ
両手の指で四角形を作る
両手の親指と人差し指をカメラに映すと、4つの指先を線で結びます。指を動かすと、四角形の形や大きさが変わります。
ここで遊ぶ
無料・登録不要
カメラの許可が必要です。マイクは使いません。
カメラは停止しています。
使い方
-
カメラを起動する
「カメラを起動して遊ぶ」を押し、ブラウザのカメラ利用を許可します。顔を映す必要はありません。
-
両手を映す
左右の親指と人差し指を離し、4つの指先が画面に収まるようにします。片手だけのときは、もう片方の手を映す案内が表示されます。
-
形を変えてみる
指の間隔や手の位置を変えてみてください。黄色い点が指先、青い線が4点を結んだ形です。
最初は両手を離し、親指を内側に向けると形を作りやすくなります。手を交差させると線も交差することがあります。正しい図形を判定する教材ではなく、4点の動きを見る実験です。
どんな仕組み？
手の認識にはml5.jsのHandPose、映像と線の描画にはp5.jsを使っています。検出した両手から親指と人差し指の先端を取り出し、画面上の左右の位置で並べて結んでいます。映像も座標も左右を反転し、鏡を見る感覚で動かせるようにしています。
この体験は、ml5.jsとp5.jsを使って制作しています。手の認識は環境によって揺れたり途切れたりするため、正確な計測や判定には使用しないでください。
困ったときは
片手でも四角形は作れますか？
この体験では両手が必要です。それぞれの親指と人差し指、合計4つの先端を使います。
線が交差するのはなぜですか？
4つの指先を決まった順で結ぶため、手の向きや重なり方によって交差します。両手を左右に離すと、形を整えやすくなります。
カメラが起動しない・手が認識されないときは？
HTTPSのページで開き、ブラウザのサイト設定からカメラ利用を許可してください。他のアプリがカメラを使っている場合は終了します。明るい場所で、指先まで画面に収め、手と背景が重ならないようにすると認識しやすくなります。通信制限や拡張機能によって認識モデルを読み込めない場合もあります。
スマートフォンでも使えますか？
カメラに対応するブラウザを想定していますが、端末やブラウザによって動作速度・全画面表示の対応は異なります。両手を使う体験では端末を安定した台に置いてください。SNSアプリ内のブラウザで動かない場合は、通常のブラウザで開き直してください。
映像や音声は送信されますか？
本アプリには、カメラ映像・切り取り画像・手の座標をサーバーへ送る処理を設けていません。手の認識と描画はブラウザ内で行い、マイクは使用しません。ただし、ライブラリや認識モデルの読み込み、Google Analyticsによる利用状況の解析のため、外部サービスへ接続します。詳細は「カメラとデータについて」をご確認ください。