カメラに映っているものを、その場で3×3のパズルにするWebアプリを作りました。
名前はAir Puzzle。
両手で撮りたいものを囲むと、
その部分を撮影して9分割します。
あとはバラバラになったピースを、正解に合わせて指でつまんで元に戻すだけです。
撮った写真でパズルをする｜指で動かす3×3パズル Air Puzzle｜LYNROAD目の前のものを両手で囲むと、その場で3×3の写真パズルに。親指と人差し指をつまんでピースを交換する無料のブラウザゲーム、Air Puzzle。撮影方法、操作のコツ、完成までの流れを紹介します。リンク先を開く何を撮るかで難しさが変わる
これ、作ってから気づいたんですが、撮るものによって難しさが全然違いますね、これ。画質もものをいうかも。
色がはっきり違うものとか、文字が入っているものは簡単です。
逆に、
木目
壁
床
同じ模様
同じような色が多いもの
この辺は結構むずかしいです。
写真を撮ったときは簡単そうに見えても、9分割すると急にわからなくなります。
なので、何を撮るか考えるところも地味に面白いです。
指で「つまむ」はどうやってるのか
操作はマウスではなく、指でやります。では、どうやって「つまんだ」と判断しているのか。
カメラに映した親指の先と人差し指の先の距離を測っています。
2本の指が近づいたら、
「つまんだ」
離れたら、
「離した」
と判定しています。
その状態で手を動かせば、ピースも一緒に動く。
ざっくりそんな仕組みです。
カメラから手の位置を取って、指先の座標を使って距離を計算しています。
こういうのも、実際に動くところを見ると結構面白いです。
意外と調整がいる
単純に「指が近かったらつまむ」だけでも一応動きます。
ただ、それだと結構ガタガタします。そうですよね、
１ｐｘもずれずに静止など人間にできるはずもない
手の認識位置は少しずつ揺れるので、頻繁に
つまんだ 離した つまんだ 離した
みたいなことが起きます。
なので、つまんだと判定する距離と、離したと判定する距離を少し変えたりして調整しています。
こういうのは実際に触ってみないとわからないですね。
カメラ画像は保存しません
公開はしましたが、気になるのは画像をサーバーに送っているのかということでしょう。
撮影した画像や手の位置情報を、こちらのサーバーに送信・保存する処理は入れていません。
パズルの処理も手の判定もブラウザ側でやっています。
撮った画像も保存されません。
ページを閉じれば終わりです。気になる場合はデベロッパーツールで通信内容などを確認してもらえるとよいと思います。
もともとは講義で見せるために作った
もともとはWebアプリの講義で使うために作ったものです。
HTML、CSS、JavaScriptを勉強していると、最初のうちはどうしてもボタンとかフォームとか、そういうものが中心になります。
それはそれで大事なんですが、
「Webってこんなこともできるんだ」
というのを見せて興味を持ってもらいたかったんですよね。持ってもらえるかなぁ。持ってもらえるといいなぁ。
ただ、スマホだとちょっと重いです。
SE2だからかなぁ。
カメラを使って、手を認識して、それをゲームの操作UIにする。
ちょっとでも「なんか面白そう」と思ってもらえればいいかな、という感じで作りました。
実際に使ってみると・・・
いろんな講義で見せたり、知り合いに見せるとびっくりしてくれます。つかみはOKって感じです。＾＾
AIって今の時代、LMは有名なんですが、物体認識とかってあまり知られてないし仕組みも浸透していないんですよね。そこから「AIは歴史もあってジャンルもたくさんあって・・・」と話しを膨らませることができます。
また、カーナビや顔認証で使われている技術を実際に目で見える形で見せることができるので、学生や参加者の腑に落ちる度合いが深いのかなと考えています。
ぜひこのアプリを利用して、みんなの心をつかんでみてください。
まだなんかできそうです。
最初は講義で見せるために作っただけなんですが、こういうのを触っていると、
カメラが使える。 手の位置が取れる。 指先の位置も取れる。 距離も測れる。
じゃあ、これを使って他に何ができるんだろう、となってきます。
ゲームでもいいし、操作方法として使ってもいい。
まだいろいろできそうですし、この技術を応用したアプリ案を考えさせるのも盛り上がりそうです。
撮った写真でパズルをする｜指で動かす3×3パズル Air Puzzle｜LYNROAD目の前のものを両手で囲むと、その場で3×3の写真パズルに。親指と人差し指をつまんでピースを交換する無料のブラウザゲーム、Air Puzzle。撮影方法、操作のコツ、完成までの流れを紹介します。リンク先を開くあと、ほかにもカメラで体験できるものを作ってみましたのでぜひなんかの形でお楽しみください。
カメラに手を映して遊ぶ｜炎魔法・パズル・指タイマーなどの無料アプリ｜LYNROADカメラに手を映して遊べる5つの無料アプリです。炎魔法、写真パズル、拡大鏡、四角形、指で操作するタイマーをブラウザで試せます。登録・インストールは不要です。リンク先を開くLYNROADでは、こんなツールを作っています
LYNROADでは、講義を盛り上げたりちょっとした不便を便利にするツールを製作して公開しています。
当ブログの以下のカテゴリで画像加工やカメラを使ったツールなどを公開しています。すべて無料、ほとんどが登録不要で安心してお使いいただけますよ。
[ほかのカメラツールを見る]
カメラに手を映して遊ぶ｜炎魔法・パズル・指タイマーなどの無料アプリ｜LYNROADカメラに手を映して遊べる5つの無料アプリです。炎魔法、写真パズル、拡大鏡、四角形、指で操作するタイマーをブラウザで試せます。登録・インストールは不要です。リンク先を開く[ほかの自作Webツールを見る]
https://lynroad.com/category/make
カテゴリー: 作る自作のサービスやツールなど。便利なものから楽しめるものまで！リンク先を開く現在は、本業を続けながらブログやWebツールなどの「Web上の資産」を育て、副収入を作ることを目標にしています。
興味があれば、ほかの記事も読んでみてください。
[LYNROADの記事を見る]
ウェブ五万｜自作プロダクトで月5万円を目指す在宅副業IT講師・フリーランスのエンジニアが自分の代わりに働くWeb資産を育てて月5万円の収入を得るまでの実践記録。副業で月5万円を目指して、ブログ・Webツール・アフィリエイトを実際に試す記録。失敗したこと、かかった費用、改善したことまで残しますリンク先を開く
