Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

まよいの墓(レゴ編)

265 views

Published on

2017/2/4-5で開催されたHackDay2017で作成した作品の解説です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

まよいの墓(レゴ編)

  1. 1. まよいの墓(レゴ編) 2017/2/23 Image Recognition (failure) Specialist at Studio Arcana 勝見 幸弘
  2. 2. 参加しました
  3. 3. 作りました
  4. 4. 全体図
  5. 5. 全体図 ココらへんを担当
  6. 6. やったこと
  7. 7. レゴで迷路を作る レゴをカメラで撮影 撮影画像から2次元配列データを作成 配列データをサーバに送信
  8. 8. 撮影(webカメラ) 画像解析 サーバに送信 VRとかの処理 迷路作成(レゴ) 担当部分
  9. 9. 前提 • ブラウザ上で実装する。 • 画像解析などもjavascriptで行う。 webVRだしね
  10. 10. 撮影(webカメラ) 画像解析 サーバに送信 VRとかの処理 迷路作成(レゴ)
  11. 11. 個別に解説
  12. 12. 迷路作成(レゴ)
  13. 13. 迷路作成(レゴ) • 下地として白のレゴを敷き詰める。白のレゴ が通路となる。 • 赤のレゴを置く。赤のレゴが壁となる。 • 左上・右下に青のレゴを置く。左上がスター ト、右下がゴールとなる。
  14. 14. 迷路作成(レゴ) • 青や赤のレゴは白のレゴの上に置く。 • レゴの凸1つを1マスとし、全体は16×16マス の迷路とする。
  15. 15. 迷路作成(レゴ) こんな感じ
  16. 16. 迷路作成(レゴ) こんな感じ スタート ゴール 通路 壁 16個 16個
  17. 17. 撮影(webカメラ)
  18. 18. 撮影(webカメラ) • レゴを撮影する。 • 撮影の際はカメラを持つ手などの影が映らな いようにする。
  19. 19. 撮影(webカメラ) こんな感じ
  20. 20. 撮影(webカメラ) こんな感じ カメラ
  21. 21. 画像解析
  22. 22. 画像解析 • レゴを撮影した画像を2次元配列のjsonデータ にする。 • jsonデータはレゴと同じ16×16として、レゴの 状態を表現する。 • 赤いレゴを1、その他の色のレゴを0とする。
  23. 23. 画像解析 こんな感じ { data: [ [ 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0 ], [ 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 0 ], [ 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 1, 1 ], [ 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0 ], ・・中略・・ [ 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0 ], [ 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1 ], [ 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1 ], [ 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0 ] ] } 16行 16列
  24. 24. サーバに送信
  25. 25. サーバに送信 • 画像解析で生成したjsonデータを送信する。 • websocketで行う。
  26. 26. サーバに送信 こんな感じ var socket = io(‘http://xxxx.xxx.xx‘); socket.emit('maze_update', json_data); ここはサーバ実装者に言われただけな のでほぼノータッチ
  27. 27. 全部を組み合わせる
  28. 28. こんな感じ
  29. 29. ではテスト
  30. 30. レゴの迷路
  31. 31. 変換
  32. 32. 変換 jsonだとわかりにくいのでmapぽく変換
  33. 33. 比較
  34. 34. 比較
  35. 35. おしい!
  36. 36. おしい! いない。。
  37. 37. いけるんじゃない?
  38. 38. 簡単じゃん!
  39. 39. では状態を変えて再テスト
  40. 40. レゴの迷路
  41. 41. 変換
  42. 42. 全然駄目!!!!!!
  43. 43. 全然駄目!!!!!! • 10回やったら成功パターンは2回程度 (´・ω・`).;:…
  44. 44. 全然駄目!!!!!! • 10回やったら成功パターンは2回程度 • 大体駄目なパターンになる (´・ω…:.;::..
  45. 45. 全然駄目!!!!!! • 10回やったら成功パターンは2回程度 • 大体駄目なパターンになる • そもそも きれいな正方形に撮影することが困難 (´・;::: .:.;: サラサラ..
  46. 46. まよいの墓 材料 まずレゴをデータにしま・・・ ああ・・・ あああああ ああああああああああああ ああああああああああああ もういい。。
  47. 47. 問題1
  48. 48. レゴの高さが無視できない
  49. 49. レゴの高さが無視できない レゴを横から見る
  50. 50. レゴの高さが無視できない 光
  51. 51. レゴの高さが無視できない 光 影
  52. 52. レゴの高さが無視できない 光 影 影の部分をブロックに 誤認識してしまう
  53. 53. レゴの高さが無視できない ひどい。。。。
  54. 54. 問題2
  55. 55. レゴの高さが無視できない2
  56. 56. レゴを真上から見たとき 理想
  57. 57. レゴを真上から見たとき 現実(雑)
  58. 58. レゴを真上から見たとき 現実(雑) レゴのマスが正常に測定できない
  59. 59. レゴの高さが無視できない2 上に乗ってるレゴと下のレゴで面積が違う
  60. 60. レゴの高さが無視できない2 上に乗ってるレゴと下のレゴで面積が違う めっちゃせまい狭い。。。。。。。
  61. 61. 解決策
  62. 62. そんなものは無かった
  63. 63. たぶん • 光いっぱい当てる • 平面で撮れるようにカメラのセッティングを 努力する 。。とかでできるんじゃないですか?
  64. 64. 他にも レゴも何種類化の色を使って道と壁以外の表現 をしたかった。
  65. 65. 使いたかった。。
  66. 66. 他にも レゴも何種類化の色を使って道と壁以外の表現 をしたかった。 撮影のタイミング次第でレゴの色がかわってし まうため諦め。。。
  67. 67. まとめ • レゴの高さが無視できない(影ができる) • レゴの高さが無視できない(レゴの1マスを1 マスと認識できない)
  68. 68. まとめ • レゴの高さが無視できない(影ができる) • レゴの高さが無視できない(レゴの1マスを1 マスと認識できない) 当日解決せず!
  69. 69. 簡単にできると思ってた。。
  70. 70. http://news.infoseek.co.jp/article/prtimes_000000034_000014803/ とある記事
  71. 71. http://news.infoseek.co.jp/article/prtimes_000000034_000014803/ とある記事
  72. 72. http://news.infoseek.co.jp/article/prtimes_000000034_000014803/ とある記事
  73. 73. 本当すいません!

×