【鎌倉研修日記 vol.34】

12回目は、インターフェース開発がテーマということで、様々なプログラミング言語の話から始まり、今まで見たことのなかったデジタルの表現技術なども紹介されていました。何となく画面上の表現の話というイメージがありましたが、物理的な部品も踏まえた話もありました。その様子をお伝えいたします。

授業動画 #12: インターフェースアプリケーションプログラムの製作方法

interface and application programming (videoreview)

2020年4月4週目_写真1_

p5.jsで作られたカラーホイールのサンプルプログラム

p5.jsというjavascriptのライブラリを利用し、今週の課題であるインターフェースの制作に取り掛かりました。p5.jsは、描画が得意なJAVAベースのプログラミング言語であるProcessingをjavascriptに移植したものです。javascriptなので開発環境の準備も簡単ですし、そのままインターネット上で使用することも容易です。オンライン上にはこのp5.jsを使用して作られた有志によるサンプルコードがたくさん公開されており、今回私はslow_izzmさんという方によって制作されたカラーホイールのプログラムをベースにして自分なりのインターフェースを開発することにしました。このプログラムは画像中央にあるカラーホイールにカーソルを載せると、その部分の色とカラーコードが表示されるというものになっています。

2020年4月4週目_写真2_

rocessingで自分なりのカスタマイズ

インターネット上のp5.jsのエディタで、自分なりのカラーホイールプログラムを作成できました。第一段階としてパソコンとマイコンとをUSBケーブルで通信させてみたいと考えました。そこで、パソコン上のアプリケーションであるProcessingで制作をした方が良いという判断になり、再度作り直しました。p5.jsはJavaScriptなのでそのままのコードではProcessing上ではうまく実行できず、改めてコードを書き直したのですが、ところどころ書き方が違い、思ったほど楽に連携はできないんだなという印象を受けました。また、次にマイコンとの通信を行う必要があるので通信ができるように数値データであるカラーコードをテキストデータとして格納できるように工夫をしました。このテキストデータを送信しマイコン上で再び数値データに変換して利用することになります。

2020年4月4週目_写真3_

neopixelの色を変化させるテスト

USBケーブルを通してのシリアル通信を行い、Processing(パソコン)からカラーコードをマイコン(ESP32)に送信しneopixel(LED)の色を変化させるテストを行いました。しかし送信されてきたデータに反応はあるものの、色が微妙にずれてしまったり、点灯しないLEDが出てしまったりと最初のうちはうまくいきませんでした。時間をかけて色々と試してみたところ、neopixelの光の強さを設定する記述をマイコン側にプログラムに書き足したことで、その症状が改善されうまく光らせることができました。

2020年4月4週目_写真4_

来上がったインターフェースを使用している様子

パソコン画面左側がカラーホイールインターフェースのプログラムを実行しているProcessingのIDE(統合開発環境)で、右側がマイコンを制御しているArduinoのIDEで、中央が実際に操作するインターフェースです。カラーホイール上にカーソルを置くとその右側にカーソルが指している色とそのカラーコードが表示され、その状態でクリックをするとその色の情報がマイコンに送信され、その情報をマイコンが受け取り、そして画面手前に置いたneopixelの色が選択した色に変化するという仕組みになっています。問題なくスムーズに動作するものを作ることができました。ファイナルプロジェクトでは今回使ったUSBケーブルは使えないので、今回作ったプログラムを無線で接続するバージョンに作り変えていこうと思っています。

 

 

 

[FabAcademy Week 13 Interface and application programming Local session]

最初はESP32とパソコンをインターネット経由で接続しようと考えながら制作を行いましたが、ひとまず少し難易度を下げてUSBケーブルを通しての接続を行いました。これによりわかりやすい表現で操作できるようにするというインターフェースの週の本来の目的に集中できたと思います。既存のカラーホイールのプログラムを通信できるように改変しうまく機能させることができました。

 

[FabAcademy Week 13 Interface and application programming Asia review]

週の課題でうまくいっていない部分を相談したところ、ブレッドボードでの開発をしていることに対して、ブレッドボードは通電しない箇所があったり必ず正常に働くわけではないので注意が必要とのアドバイスをいただきました。今後不具合があった時には特に気にするべきデバッグ対象の一つとしてみていきたいと思います。

コメントを残す

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中