HOTMOCK

 
  • 【WEBと連携】 あみぐるみのクマをカスタマイズしてみよう!

  • 制作事例

2015年07月28日


WEB上で、あみぐるみを自分の好きなようにカスタマイズできるツールがあったら便利なんじゃないか。自分で編んだような気分を味わえるかも!? もしかしたら、あみぐるみ注文ツールのような使い道もあるかもしれない。

そんなことを思いつつ、HOTMOCKを使って「リアルのぬいぐるみを触りつつ」「バーチャルのクマをカスタマイズする」ツールを作ってみました。実物のクマのあみぐるみを触りながら、画面上のクマをカスタマイズしていきます。

 

HOTMOCKクマ

 

操作によって表情・色・形が変化するので、ただ触るだけでもたのしめます。更にTwitterとの連携で、人と見せ合うたのしみ方もできそうです。

 

[触ってみよう] 実物のクマを使って画面上のクマをカスタマイズ

さて、実物のクマを触ることで画面上のクマがどうなるかというと、こうなります。

カスタマイズ後

これは試しにつくった2種類のクマです。耳の形や身体の色、表情が違いますね。というか右のはウサギですね。各パーツを好きなように組み合わせてカスタマイズできます。

カスタマイズ可能なパーツはこの5種類です。

  • 耳(色が変わる、うさぎのように伸びる、大きくなる)
  • パンツの色
  • 身体の色
  • 眉の形

 

 

 

[考えてみよう] クマをどう触ったらどう変わるのが分かりやすい?

この画像だけだと、コントローラーが右のクマ、出力内容が左のクマ……というのがちょっと分かりにくいかもしれませんが、左のクマに仕込んだスイッチやセンサーを使い、右のクマをカスタマイズしていきます。

 

コントローラーと出力内容

 

たとえば「目を触ると目が変わる」「耳を触ると耳が変わる」というような直観的な操作なら分かりやすいですが、スイッチの種類とカスタム可能なパーツの対応づけがなかなか難しそうです。

そして、肝心のHOTMOCKですが、身体の中にピッタリと仕込める作りになっています。中はコードでグチャグチャですね。

ぐちゃぐちゃ

各パーツに対して、スイッチやセンサー類を仕込めるようにしてあります。

腕にコードも入る

操作する側とされる側の対応づけが難しく、どうすればいいものか迷います。そこで、次のような手順で操作のやり方を決めていくことにしました。

 

■ わかりやすいルールを決める

複雑な操作をしていくためには、ある程度は操作のルールを決める必要がありそうです。以下の2段階を基本的な操作と決めて、進めます。

  1. どのパーツをカスタマイズしていくか決める
  2. 選んだパーツの状態(色や形)を変えていく

たとえば、「右目のスイッチでパーツを選ぶ」「鼻のダイヤルで色や形を決める」というように、状態を変えるときに触るパーツの種類を限定させておけば操作しやすくなります。

 

目と鼻で操作

 

■ 直観的な操作も取り入れたい、仕草によって表情を変化させたい

「つまんだら形が変わる」というような、私たちが暮らしの中で当たり前に体験しているような動作も取り入れてみます。

たとえば、右耳に圧力をくわえると耳が大きくなったり、左耳に圧力をくわえると耳がうさぎのようにのびたり。(先ほど紹介した動画で実際の操作の様子もご覧いただけます)
これについては、圧力センサーを使います。

耳を変えたいとき

ほかには「クマにある仕草をさせるとそれっぽい顔になる!」という仕草による反応も取り入れてみました。

今回は、腕をガッツポーズさせるとキリッとした顔に、腕を無茶な方向にひねると嫌がるという操作にしましたが、他にもこのような仕草による表情の変化を取り入れてみても面白そうです。

表情を変化させる

腕を曲げる

 

あとは、お尻の部分に照度センサーを仕込んでおり、上半身と下半身を離すとものすごく怒ります。(先ほど紹介した動画で実際の操作の様子もご覧いただけます)

上半身と下半身鬼が出るぞ

逆に置いても問題なく機能はします。

身体反るクマ

 

 

[考えてみよう] もし注文できるとしたら……?

ここまでの話はクマ側の操作についてでしたが、次は画面側。「たとえばおもちゃ屋の店頭で、クマをカスタマイズして注文できたら面白いよね」という話から、注文できそうなデザインの画面をFlashで作成しました。今までの作成履歴も閲覧できるようになってます。

クマゾン

 

ちなみに実物のクマと握手をすると、画面上で作ったクマを確定(注文?)が決定! ということにしました。「クマと合意した」という雰囲気が出ていいかな、と。ここではクマの手に極薄シールスイッチを入れています。

ボクと握手

「店頭で作ったものをその場で注文」に関しては、手編みとなるとなかなか難しそうですが、量産のぬいぐるみならば実現可能かもしれないですね。

 

 

[みんなに見せよう] Twitterへの投稿機能をつけました

画面上で作ったクマをTwitterにも投稿できるようにしました。握手する操作で、ホロンフィジカル研究部:@holon_physical(HOTMOCKを開発しているHolonCreateの社内サークルアカウントです)に画像やメッセージ(自動)が投稿されます。

注文画面の右上に名前やTwitterIDを入力すると、名前、ID入りの投稿がされます。(空欄でも大丈夫です)
ハッシュタグ#クマゾンでこれまでの投稿がご覧いただけます。HOTMOCKに関する情報は#hotmockをご覧ください。

 

なまえ入力

 

Maker Faire Tokyoでの展示について

このクマは昨年、Maker Faire Tokyo 2014 に展示し、今年のMaker Faire Tokyo 2015 にも展示予定です。昨年との違いは上でも紹介したTwitterへの投稿機能の追加です。

2014年の秋に初めてMaker Faire Tokyoへの出展をしました。2日間とも絶え間なくお客さんに来ていただいたので、他の展示を見る時間が少なかったのがちょっと残念でしたが、面白い展示がたくさんありました。

 

Maker Faire Tokyo 2014

 

このときは [リアルとバーチャルの「あいだ」を作ってみた] というテーマで、インプット(操作)とアウトプット(結果)の関係性(どちらかがリアルでどちらかがバーチャル)を逆にした2作品を展示しました。

 

キャプション
(クリックすると拡大します)

 

 

2014年の展示の様子

 

クマと射的、という展示内容だったせいかとても子供ウケが良いブースになりました。(その分大変でしたが……)
射的のほうも昨年の展示でいただいた意見を元に改良を進めています。みなさんのお越しをお待ちしております!