心拍と表情に反応するスマートイヤリングの裏側

Maker Faireでは数多くの光りものが展示されてましたが、sweet electronicsは心拍と表情に反応して光るスマートイヤリングを展示しました。会場では無線が混線して大半の時間は思ったとおりに光ってくれなかったのですが、仕組み自体には多くの人に関心を持ってもらえたので、簡単に紹介します。

全体構成としては、Webサーバとして動作する部分と、ArduinoやTocoStickといったハードウェアとシリアル通信する部分を持っているPythonスクリプトが心臓部になっています。

wearlumination模式図 (1)

Webサーバ側は3つのモードを持っていて

  • 静的なファイルを表示する
  • 指定したコマンドをTocoStickに送る
  • Arduinoから送られてきた文字列をTocoStickに送る

これらのモードをURLで使い分けるように作っています。

ソースコードはこちらから確認できます。

https://github.com/usopyon/wearlumination/blob/master/wearlumination.py

シリアル通信側はArduinoを介して心拍センサの値を拾ってるのと、TocoStickという無線を送出するドングルにコマンドを送っています。会場での配線の取り回しなどを考え、USBハブ付きの10キーを経由してArduinoとTocoStickを接続しています。

2015-07-26 14.51.11

表情に合わせて光らせる

表情の検知はChromeのgetUserMediaでカメラ画像を取得し、Docomoの画像認識APIを使って実現しています。

過去のsweet electronicsの作品「マシュマロカタパルト(二代目)」はPythonでカメラ画像を取得してましたが、これだとハードと一体でしか動かないので展示会場でしか見てもらえませんでした。画像処理をChromeで実行させるとハードウェア制御以外の部分をインターネット経由で楽しんでもらえるかなと2月頃に発表した「判定ショコラティエ」で実験的に取り入れてます。

l_taro_150312kinoko01

https://chocolatier.webcam/imgrec3.php

今回、MakerFaireで見ていただいた画面もChromeから見えるようにしてます。キーボードの「3」を押すと表情の検知が始まるので、怒ったり笑ったししながら「3」を連打してみてください。笑顔が緑、困り顔が赤として表示されます。

http://barcelona-prototype.com/wearlumination

心拍に合わせて光らせる

画像検知をChromeで実行させたとして、センサの値をどうするか悩みました。結局、思いついたのは

  1. ブラウザがWebサーバにアクセスする
  2. WebサーバはArduinoから0.1秒おきに届くセンサの値を1秒分受信し、TocoStickに送信する。(その間、ブラウザには何も返さない)
  3. Webサーバはブラウザにlocation.reload関数を含むスクリプトを返し、1に戻る

というブラウザを作るという方法です。

心拍センサはスイッチサイエンスで入手したものをレーザーカッターで加工した台に置いて、指を置いてもらうようにしてました。下の写真で緑に光ってるところです。

CLX4xVfUMAAQWKk

一応、ちゃんと動くのですが、HTTPのタイムアウトを悪用してるような後ろめたさがあります。

その他、あれこれ

  • JavaScriptで数字の1〜9それぞれに機能を割り当て、9を押すとセンサーの値を取り、3を押すと画像認識するようにしました。
  • MacBookをお客様側に向け、MacBookの背面にテンキーを置き、テンキーからも操作してました。この方法、説明が捗って便利です。
  • 画像処理もシリアル通信も若干のタイムラグがあります。そこでChart.jsを使って、グラフをアニメーション表示することで、体感的な遅さをごまかしました。
  • HTMLで作った利点として、操作画面と説明画面を簡単に配置できるというものがありました。実は展示期間中も説明画面を差し替えたりが簡単に出来ました。
  • TocoStickへのコマンド送信は別途ライブラリ化しました。https://github.com/usopyon/tocotika

心拍、表情に限らず、色々なトリガーで何かを光らせてみたい方がいらっしゃいましたら、ぜひコラボレーションしましょう。

広告
心拍と表情に反応するスマートイヤリングの裏側

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中