カメラで遊べる無料アプリ
撮った写真でパズルをする
カメラで撮った画像を9つに分けて、パズルにします。親指と人差し指でピースをつまみ、場所を入れ替えて元の画像に戻してください。
ここで遊ぶ
無料・登録不要カメラの許可が必要です。マイクは使いません。
カメラは停止しています。
使い方
-
両手で撮りたいものを囲む
カメラを起動し、親指と人差し指の4点で対象を大きめに囲みます。細かい模様や色の違いがあるものがおすすめです。
-
約0.9秒、手を止める
十分な広さの範囲を作って静止すると、進行表示が100%になり自動で切り取ります。映像を正方形に変換し、3×3に分割してシャッフルします。
-
ピースをつまんで入れ替える
片手の人差し指をピースに合わせ、親指とつまんで持ち上げます。移動先で指を離すと、その場所のピースと入れ替わります。盤面の外で離すと移動を取り消します。
-
元の絵に戻す
左上の見本を見ながら9枚を正しい場所に戻しましょう。正しい位置のピースは緑の枠になります。完成すると手数と時間を表示。「シャッフル」で同じ写真、「新しく撮る」で別の写真に挑戦できます。
空白のマスに滑らせるスライドパズルではなく、2枚を直接交換するパズルです。手が見えなくなると、持っているピースは元の場所に戻ります。切り取った画像やスコアは保存されず、カメラの停止やページを閉じる操作で失われます。
どんな仕組み?
選んだ四角形の映像を360×360の画像に変換し、9分割しています。ピンチは親指と人差し指の距離を手の大きさで割って判定するため、カメラとの距離の違いをある程度吸収します。つまみ始めと解除の基準を分け、細かい揺れでピースを落としにくくしています。
この体験は、ml5.jsとp5.jsを使って制作しています。手の認識は環境によって揺れたり途切れたりするため、正確な計測や判定には使用しないでください。
困ったときは
うまくピースをつかめません。
まず指を開いた状態で、人差し指のカーソルをピースの中央に合わせてください。そのあと親指と人差し指をつまみます。開始直後の演出が終わるまで、少し待ってから操作してください。
撮影が始まりません。
両手を離して範囲を大きくし、4つの指先を画面に収めてください。手を動かすと待ち時間がリセットされるので、進行表示が100%になるまで静止します。
写真や記録を後から見られますか?
保存機能はありません。画像・手数・時間はその体験中だけ保持し、サーバーへのアップロードは行いません。
カメラが起動しない・手が認識されないときは?
HTTPSのページで開き、ブラウザのサイト設定からカメラ利用を許可してください。他のアプリがカメラを使っている場合は終了します。明るい場所で、指先まで画面に収め、手と背景が重ならないようにすると認識しやすくなります。通信制限や拡張機能によって認識モデルを読み込めない場合もあります。
スマートフォンでも使えますか?
カメラに対応するブラウザを想定していますが、端末やブラウザによって動作速度・全画面表示の対応は異なります。両手を使う体験では端末を安定した台に置いてください。SNSアプリ内のブラウザで動かない場合は、通常のブラウザで開き直してください。
映像や音声は送信されますか?
本アプリには、カメラ映像・切り取り画像・手の座標をサーバーへ送る処理を設けていません。手の認識と描画はブラウザ内で行い、マイクは使用しません。ただし、ライブラリや認識モデルの読み込み、Google Analyticsによる利用状況の解析のため、外部サービスへ接続します。詳細は「カメラとデータについて」をご確認ください。