Processingとの通信方法【micro:bit】

はじめまして、フリーランスのますみです!

一人一人が自立・共存・革新している「クリエイターエコノミー」を創る。』というビジョンに向けて活動しています。

micro:bitで操作をすると、シリアル通信でProcessingとやりとりをするシステムを作る記事です。具体的には、マイクロビットでボタンが押されたら、Processingの画面でオブジェクトが表示されるようにしていきます。

全体のシステム

以下のように、MakeCodeというMicrosoftのソフトで、micro:bitのコーディングを行い.hexファイル形式で、micro:bit本体にインストールします。そして、micro:bitからポートを用いたシリアル通信でProcessingに信号を送ります。

この記事では、信号を受信したProcessingでデジタルアートを描きたいと思います。

micro_proc_figure

手順

1. micro:bitの準備

まずは、micro:bitとマイクロUSBケーブルを用意し、パソコンと接続します。

setup

2. micro:bitのコーディング

2-a. 新しいプロジェクトの作成

まずMakeCodeのmicro:bitのウェブサイト(こちら)にアクセスをして、新しいプロジェクトを作成しましょう。

new_project

2-a. 接続テスト

まずボタンを押したら、micro:bitの画面に文字が表示されるか実験してみましょう。

以下のようにプログラミングをしてましょう。

それぞれ基本と入力のブロックを使っています。

first_pgm

プログラムができたら、ダウンロードをして、.hexファイルを出力しましょう。

出力ができたら、以下のように.hexファイルをMICROBITへドラッグ&ドロップして、コピーします。

download_hex

この状態で実行して、以下のように文字が表示されれば、接続テスト完了です。

2-b. シリアル通信のプログラム

続いて、シリアル通信のプログラムを追加していきます。以下のようんブロックを追加してみましょう。シリアル通信ブロックは、高度なブロック > シリアル通信の中にあります。

final_pgm

これで再びダウンロードをして、MICROBITへコピーしたら、microbitのプログラミングは完了です。

3. Processingのコーディング

3-a. Processingのダウンロード

Processingのダウンロードサイト(こちら)よりダウンロードしましょう。

processing_download

ダウンロードができたら、アプリケーションを起動しましょう。

new_proc

3-b. シリアル通信受信のコーディング

起動ができたら、以下のようにコーディングを行なっていきます。下半分は円を綺麗に生成するためのスクリプトなため、完全に理解はできなくても大丈夫です。

3つの重要な箇所だけソースコードの後に解説します。

import processing.serial.*;
Serial microbit;
int _num = 10;
Circle[] _circleArr = {};
void setup(){ size(640, 480); background(255); smooth(); strokeWeight(1); fill(150, 50); String portName = Serial.list()[1]; println(portName); microbit = new Serial(this, portName, 115200); microbit.clear(); microbit.bufferUntil(10);
}
void draw(){ background(255); for (int i=0; i<_circleArr.length; i++) { Circle thisCirc = _circleArr[i]; thisCirc.updateMe(); }
}
void serialEvent(Serial microbit){ String str = microbit.readStringUntil('\n'); str = trim(str); int[] str_split = int(split(str, '\n')); println(str_split[0]); if (str_split[0] == 0){ println("red"); drawCircles("red"); }else if(str_split[0] == 1){ println("blue"); drawCircles("blue"); }else if(str_split[0] == 2){ println("end processing."); exit(); }else{ println("else"); drawCircles("else"); }
}
void drawCircles(String col_type) { for (int i=0; i<_num; i++) { Circle thisCirc = new Circle(col_type); thisCirc.drawMe(); _circleArr = (Circle[])append(_circleArr, thisCirc); }
}
class Circle { // properties float x, y; float radius; color linecol, fillcol; float alph; float xmove, ymove; Circle (String col_type) { x = random(width); y = random(height); radius = random(100) + 10; if (col_type == "red"){ linecol = color(random(150,255), random(100,150), random(100,150)); fillcol = color(random(150,255), random(100,150), random(100,150)); }else if(col_type == "blue"){ linecol = color(random(100,150), random(100,150), random(150,255)); fillcol = color(random(100,150), random(100,150), random(150,255)); }else{ linecol = color(random(100,255), random(100,255), random(100,255)); fillcol = color(random(100,255), random(100,255), random(100,255)); } alph = random(255); xmove = random(10) - 5; ymove = random(10) - 5; } void drawMe() { noStroke(); fill(fillcol, alph); ellipse(x, y, radius*2, radius*2); stroke(linecol, 150); noFill(); ellipse(x, y, 10, 10); } void updateMe() { x += xmove; y += ymove; if (x > (width+radius)) { x = 0 - radius; } if (x < (0-radius)) { x = width+radius; } if (y > (height+radius)) { y = 0 - radius; } if (y < (0-radius)) { y = height+radius; } for (int i=0; i<_circleArr.length; i++) { Circle otherCirc = _circleArr[i]; if (otherCirc != this) { float dis = dist(x, y, otherCirc.x, otherCirc.y); float overlap = dis - radius - otherCirc.radius; if (overlap < 0) { float midx, midy; if (x < otherCirc.x) { midx = x + (otherCirc.x - x)/2; } else { midx = otherCirc.x + (x - otherCirc.x)/2; } if (y < otherCirc.y) { midy = y + (otherCirc.y - y)/2; } else { midy = otherCirc.y + (y - otherCirc.y)/2; } stroke(0, 100); noFill(); overlap *= -1; ellipse(midx, midy, overlap, overlap); } } } drawMe(); }
}

3-c. 重要箇所の解説

(1) シリアル通信の設定

冒頭のコードで、processingのシリアル通信パッケージをインポートして、micorbitというシリアル型の変数を作成しています。

import processing.serial.*;
Serial microbit;

(2) シリアル通信用のポートの指定

シリアル通信を行うためのポートをSerial.list()から探し、その中で1番目(javaの配列は0始まりなので、正確には2番目)のポートを変数に保持しています。115200は、baudRate(ボーレート)と言われる値(1秒間に何回、デジタルデータを変復調できるかを示す値)を表します。microbit.bufferUntilの10は、line feed(改行)を表します。

void setup(){ size(640, 480); background(255); smooth(); strokeWeight(1); fill(150, 50); // Find Port String portName = Serial.list()[1]; println(portName); microbit = new Serial(this, portName, 115200); microbit.clear(); microbit.bufferUntil(10);
}

(3) 通信の値に応じた処理の実行

改行コードを受信するまでシリアル通信を読み込み、読み込まれたらそのコードをコンソールに表示します。そして、そのコードが0か1か2で場合分けをしています。

0の時(Aが押された時)は、redとコンソールに表示し、暖色系の円を生成します。

1の時(Bが押された時)は、blueと表示し、寒色系の円を生成します。

2の時(A+Bが押された時)は、end processingと表示し、processingを終了します。

void serialEvent(Serial microbit){ String str = microbit.readStringUntil('\n'); str = trim(str); int[] str_split = int(split(str, '\n')); println(str_split[0]); if (str_split[0] == 0){ println("red"); drawCircles("red"); }else if(str_split[0] == 1){ println("blue"); drawCircles("blue"); }else if(str_split[0] == 2){ println("end processing."); exit(); }else{ println("else"); drawCircles("else"); }
}

4. ポートの確認

A. Macの場合

terminalでls -l /dev/tty.*と打ち、ポートを表示しましょう。

この場合、Bluetooth-Incoming-Portではなく、usbmodem14102の方になります。

$ ls -l /dev/tty.*
crw-rw-rw- 0,0 root 30 5 19:40 /dev/tty.Bluetooth-Incoming-Port
crw-rw-rw- 0,8 root 30 5 19:43 /dev/tty.usbmodem14102

B. Windowsの場合

少しだけ環境作りが複雑なため、こちらの記事を参考にしてみてください。

シリアル通信【Windows編】

5. 実機テスト

Processingを実行して、microbitでAボタンやBボタンを押してみましょう。

以下のように円が生成されれば、シリアル通信成功です。

その他

サンプルコードもこちらに掲載しておきました。

最後に

いかがだったでしょうか?
この記事を通して、少しでもあなたの困りごとが解決したら嬉しいです^^

おまけ(お知らせ)

エンジニアの仲間(データサイエンティストも含む)を増やしたいため、公式LINEを始めました🎉

「一緒に仕事をしてくれる方」「友だちとして仲良くしてくれる方」は、友だち追加をしていただけますと嬉しいです!(仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆)

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました!

友だち追加後に、アンケートに回答してくれた方へ「エンジニア図鑑(職種20選)」のPDFをお送りします◎