コントローラの動きをグラフに記録しながら、ココロキットを動かしてみよう！（テキストプログラミング編）

今回の記事は、先日に記事を書いた Dnotebook という JavaScript だけでテキストプログラミングができる環境を使って遊んでみた記録です。

この記事の成果物としては、次のようなものができます。

JavaScript を知っている人向けの記事ですが、こんなこともできるんだ！と知ってらえたら嬉しいです😁

この記事に必要なもの

・ココロキット
・ゲームパッド（パソコンにUSBでつなげるもの）
・Dnotebook の使い方を知っていること（👇の記事を読んでくださいね）

ココロキット

Logicool G ゲームパッド F310r 有線 usb PCゲーム用 FF14 Windows版推奨 国内正規品

はじめに、Dnotebook を読み込む

今回は、既に用意している Dnotebook を読み込んじゃいましょう。

note.json

2370 Bytes

ファイルダウンロードについて

ダウンロード

次の動画のように、右上の「Options」から「Upload Notebook」を選んで上のファイルを読み込みます。読み込みが成功すると、プログラムが書かれたセルが表示されるので「Close」を押して閉じます。

読み込んだら、セルを順番に実行する。

Notebookを読み込んだら、上から順に実行していきましょう！

💡 実行するときのポイントは次の２つです。
・ココロキットの接続には時間がかかるので待つ
・Gamepad をつなぐために、何かしらボタンを押す

ゲームパッドでココロキットを動かせたでしょうか？🙋

内部のプログラムについて

動かしてみることができたところで、今回の内部の動きについて少しお話できたらと思います。

グラフの描画には、「plotly.js」という高機能なライブラリを利用しました。

Plotly

plotly.js の機能の１つとして、リアルタイムのデータ描画が出来るのでそれを利用して、コントーラの値を取得して描画しています。

読み込んだ Dnotebook の中の、５，６，７番目のセルが plotlyの描画に関わっている部分です。

Streaming

そして、ゲームパッドの操作を JavaScript で読み取るために、「joypad.js」というライブラリを利用しています。

読み込んだ Dnotebook の中の、４番目のセルがゲームパッドの値読み取りと、ココロキットへの命令に関わる部分です。

ArunMichaelDsouza/joypad.js

おわりに

Dnotebook は、このような感じで JavaScript だけの知識で色んなライブラリをつなげて遊ぶことができる環境です。ココロキットとココロキット＋は、Webブラウザ上で動くように作られているので、Dnotebook と組み合わせて遊ぶことができます✋

・ココロキット＋のセンサの値をグラフ描画する
・Plotly.js を使って、キーボードの操作を表示する

などゲームパッドにとらわれずにいろんなことを試して見てください！