collect, analyze, and visualize data
/ produced by Hiroyuki Shinoda
collect, analyze, and visualize data
Article
2016.8.8
RaspberryPiとNode.jsとcreate.jsを使用した心拍数連動漫画システム

※本稿は「GoogleCloudVisionとRaspberryPiを用いた感情連動漫画システム」に続きます。


映画や漫画では、いかに物語に没入できるか、
が面白さにとって重要なファクターとなります。
そうであれば、物語の鑑賞中、自分の感情を”強制的かつリアルタイム”に、
物語の主人公と同じに、することができればいかがでしょうか。
たとえば、物語の進行に連動した決められたシーケンスによって、
脳に刺激を与えるなどです。
とはいっても、もちろん、現在のブレインマシンインタフェースでも、
まだそんなことは(多分)できません。


そこで、本稿では
“RaspberryPiとNode.jsとcreate.jsを用いて、
シーンごとに決められた値に自分の心拍数を上げ下げすることで
ページが進む心拍数連動漫画システム”

を構築します。
心拍数を高めないとページが進まない、
あるいは逆に心拍数を落ち着けないとページが進まない、
ことで、結果的に(後追いで)物語の主人公と同じ感情(心拍数)になり、
物語に没入できる、というものです。


最終的に作成したものは下記となります。
ちなみに、漫画は本稿用に私が描き下ろしました。
タイトルは『データサイエンティストたちの黙示録』
です。


| (1) 心拍センサとラズベリーパイを接続


まずは回路を組んでいきましょう。
今回はラズベリーパイで構築しようと思います。
下記のものが必要となります。
・raspberry pi
心拍センサ(スイッチサイエンスなどで購入可)
ADC MCP3002(※アナログデジタルコンバーター。秋月通商などで購入可)
・その他、ブレッドボード、ワイヤー


心拍センサは、アナログ値を返しますが、
ラズベリーパイはデジタル値しか扱えませんので、
ADCをかまして、回線を組みます。
ADCは0,1の2つのチャンネルを持ちます。(下図参照)


今回は、ラズベリーパイの3.3V電圧を使用して、
ADCのchannel:0を用いることにした場合、
下記のようになります。(適宜変更可)
※ADCの向きにご注意ください。(下図では半円の向きが右)

raspberrypi_shinpaku

正しく接続できると、写真のように、LEDが点灯します。
こちらの記事を参考にさせていただきました。


| (2) 心拍センサから心拍数を取得


通常、RaspberryPiの処理はPythonでプログラミングしますが、
今回は、node.jsを用いてRaspberryPiを動かします。
下記のようなフローを構築します。

raspi_flow


まずはADCを使用するために、SPI通信を有効にします。
viなどで「config.txt」を開き、

「config.txt」内で下記の行を探し、

先頭のコメントアウト「#」を削除し、有効にしたのち、再起動します。

再起動後、SPI通信が有効なったかを念のため確認しておきましょう。
下記のように、spiが表示されれば正しく設定できております。


次に、node.jsを記述していきます。


まずは、spi通信を開始するための決まり文句です。
ついでにもろもろ必要なrequireも記載しておきます。

次に、値を取得してボルトに変換します。


返答の値のうち、前半の6bitはヘッダみたいなもの(適当)なので無視し、
必要なのは、前半の最後の2bit以降(前半の最後の2bit + 後半の8bit)と
なりますので、前半8bit分と「00000011(つまり10進数では3)」との
論理和をとると、前半の最後の2bit分のみ取り出せます。

ちなみに、<<はシフト演算子で、<<8だと8桁左に移動させます。
・data[1]&3 前半の最後の2bitを取り出す。
・<<8 上記を8桁あげた上で、
・+ data[2] 後半の8bitを加える。
ここまででアナログ計測値が取得できます。
ただし、アナログ値は0〜1023までの値ですので、
「* 3.3 ) / 1023」とすることで、 0〜3.3Vまでの値に変換します。
※もしラズパイの電源を5Vに接続していたら0〜5Vに変換


| (3) 心拍センサの値をhtmlで描画


まずは、node.jsのsocket.ioを通じて、
定期的にセンサの値を取得する処理を書きます。
クライアントから送るデータは何でもいいのでここでは「1」としています。


次に、そのデータをcreate.jsで都度、描画していきます。
stage2というcanvas要素を作成し、そこに値に応じて棒グラフを描画します。

各タイミングで、決められた心拍数以上(あるいは以下)だったら、
次の画像に切り替えます。


| (4) シーンごとに決められた値に自分の心拍数を上げ下げすることでページが進む心拍数連動漫画システム


では結果を見てみましょう。


まずはキャラクターと感情をシンクするために心拍をあげましょう。
腹筋、スクワット、あるいは、昼間の不条理なデータ集計業務を思い出しましょう。


次は冷静にならなければならないシーンです。
座禅、素数を数える、ろうそくの火を見つめる、などが効果的です。もちろん、全てを組み合わせてもよいでしょう。


再度、心拍数をあげましょう。


いかがでしたでしょうか。
以上、『RaspberryPiとNode.jsとcreate.jsを使用した心拍数連動漫画システム』でした。
ちなみに、万が一、ご要望があるようでしたら、
漫画『データサイエンティストたちの黙示録』を描きあげて
追ってフリーで公開いたします。
そのためには、まずはデータ集計業務をこなさなければならず、
心拍数があがるばかりの日々ですが。

※本稿は「GoogleCloudVisionとRaspberryPiを用いた感情連動漫画システム」に続きます。

人気記事: