コントローラの動きをグラフに記録しながら、ココロキットを動かしてみよう!(テキストプログラミング編)
今回の記事は、先日に記事を書いた Dnotebook という JavaScript だけでテキストプログラミングができる環境を使って遊んでみた記録です。
この記事の成果物としては、次のようなものができます。
JavaScript を知っている人向けの記事ですが、こんなこともできるんだ!と知ってらえたら嬉しいです😁
この記事に必要なもの
・ココロキット
・ゲームパッド(パソコンにUSBでつなげるもの)
・Dnotebook の使い方を知っていること(👇の記事を読んでくださいね)
はじめに、Dnotebook を読み込む
今回は、既に用意している Dnotebook を読み込んじゃいましょう。
次の動画のように、右上の「Options」から「Upload Notebook」を選んで上のファイルを読み込みます。読み込みが成功すると、プログラムが書かれたセルが表示されるので「Close」を押して閉じます。
読み込んだら、セルを順番に実行する。
Notebookを読み込んだら、上から順に実行していきましょう!
💡 実行するときのポイントは次の2つです。
・ココロキットの接続には時間がかかるので待つ
・Gamepad をつなぐために、何かしらボタンを押す
ゲームパッドでココロキットを動かせたでしょうか?🙋
内部のプログラムについて
動かしてみることができたところで、今回の内部の動きについて少しお話できたらと思います。
グラフの描画には、「plotly.js」という高機能なライブラリを利用しました。
plotly.js の機能の1つとして、リアルタイムのデータ描画が出来るのでそれを利用して、コントーラの値を取得して描画しています。
読み込んだ Dnotebook の中の、5,6,7番目のセルが plotlyの描画に関わっている部分です。
そして、ゲームパッドの操作を JavaScript で読み取るために、「joypad.js」というライブラリを利用しています。
読み込んだ Dnotebook の中の、4番目のセルがゲームパッドの値読み取りと、ココロキットへの命令に関わる部分です。
おわりに
Dnotebook は、このような感じで JavaScript だけの知識で色んなライブラリをつなげて遊ぶことができる環境です。ココロキットとココロキット+は、Webブラウザ上で動くように作られているので、Dnotebook と組み合わせて遊ぶことができます✋
・ココロキット+のセンサの値をグラフ描画する
・Plotly.js を使って、キーボードの操作を表示する
などゲームパッドにとらわれずにいろんなことを試して見てください!
この記事が気に入ったらサポートをしてみませんか?