ProcessingでNanoBoardAGを使う実習用の学習スライドです（今後も更新予定 ）

1. NanoBoardAGで
Processing 入門
Kazunari ITO
1

2. Processing とは？
• アートやデザイン関係で広く用いられて
いるプログラミング言語
– 画像や動画、ウェブカメラ
– インタラクション（クリックしたら…とか）
h$p://processing.org/

3. Processing のダウンロード
http://processing.org/download からダウンロード可能
ver.3 が最新(2016年11月現在)

4. まずは何ができるか
サンプルを見てみよう
メニューバーの 「ファイル」 -> 「サンプル」 を選択するとサンプルファイ
ル一覧を表示したウィンドが表示される．

5. 初めてのProcessing
1. line(0, 0, 100, 200);
– (0, 0)から(100, 200)まで
線を引く
2. 実行ボタン をクリック
3. 原点の位置とx軸・y軸の
向きを調べる

6. ProcessingはJavaの
フロントエンド
import processing.core.*;
import processing.data.*;
import processing.event.*;
import processing.opengl.*;
import java.util.HashMap;
import java.util.ArrayList;
import java.io.File;
import java.io.BufferedReader;
import java.io.PrintWriter;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.IOException;
public class sketch_141002a extends PApplet {
public void setup() {
line(0,0,100,200);noLoop();
}
static public void main(String[] passedArgs) {
String[] appletArgs = new String[] { "sketch_141002a" };
if (passedArgs != null) {
PApplet.main(concat(appletArgs, passedArgs));
} else {
PApplet.main(appletArgs);
}
}
}
実際にはJavaのコードを生成している．

7. 基本図形の描画
size(300, 300); //キャンパスサイズ
background(255, 255, 255); //背景は白
fill(255, 0, 0); //R=255, B=0, G=0で塗る
ellipse(100, 100, 50, 100); //楕円
fill(255, 0, 0, 50); //透明度
rect(0, 0, 200, 200); //長方形

8. リファレンスの参照
• メソッド名やク
ラス名をダブル
クリックすると
ハイライトされ
るので，右ク
リックで「リ
ファレンスから
探す」を選択

9. リファレンスの参照(2)
• メソッドやクラ
スの使い方や説
明，仕様などが
ブラウザに表示
される

10. アニメーション

11. Processingのアニメーション
//最初に1回だけ呼ばれるメソッド
void setup() {
size(300, 300);
background(255);
}
//毎フレーム呼ばれるメソッド
void draw() {
fill(color(
random(256), random(256),
random(256), 60));
float x = random(300);
float y = random(300);
float w = random(100);
float h = random(100);
rect(x, y, w, h);
}

12. 動いているように見せる
int t=0;
void setup() {
size(300, 300);
fill(0);
}
void draw() {
background(255); //キャンバスを白で塗りつぶす
t=t+1; //少しずつずらして描画する
ellipse(t, 150, 20, 20);
}
●
●
●
●
●

13. 画像の表示
1. Processingのウィンドウに画像ファイル
のアイコンをドラッグ＆ドロップする
2. Pimage img=loadImage(“ファイル名”);
でロードする
3. Image(img, x座標, y座標);
で描画する

14. 画像ファイルの表示例
size(200, 200);
PImage imageB = loadImage("bird.png");
PImage imageM = loadImage("man.png");
image(imageB, 20, 20);
image(imageM, 80, 80);

15. クラスの定義
class Human { // 基本はJavaと同じ，ただしpublic宣言できない
private String name; // 名前
private double shincho; // 身長
private double taijyu; // 体重
private PImage stand = loadImage("goseicho1.png");
private PImage bow = loadImage("goseicho2.png");
private PImage goseichoText = loadImage("goseichoText.png");
private int step;
Human() {
this.name = null;
this.shincho = 170.0;
this.taijyu = 65.0;
}
Human(String name) {
this.name = name;
this.shincho = 170.0;
this.taijyu = 65.0;
}
Human(String name, double shincho, double taijyu) {
this.name = name;
this.shincho = shincho;
this.taijyu = taijyu;
}
void start(){
step = 0;
}
}
新しくラベルとクラス名とするタブを作成し，
そこに記述するのが一般的

16. インスタンスの生成
Human taro;
void setup() {
size(500, 1000); // 画面のサイズ．
background(255); // 背景の色．今回は白を指定
taro = new Human("Taro", 175, 65);
taro.start();
}
void draw() {
background(255);
taro.update();
}

17. クラス記述
public class A {
}
class B {
}
class C {
}
通常各クラスは，それぞれ独立している．

18. インナークラス
public class A { // アウタークラス
class B { // インナークラス
}
}
インナークラスはアウタークラスの内部で定義される．
インナークラスからアウタークラスで生成されたインスタンスや定義されたメ
ソッドにアクセスすることができる．

19. Processing で定義されるクラスは
インナークラスになっている
public class sketch_141121a extends PApplet {
class Human {
}
class Car{
}
}
void setup(){
}
void draw() {
}
1タブ目
2タブ目
3タブ目
実際は，PAppletクラスを継承したクラス(ここでは， sketch_141121a )が
一つと0個以上のインナークラスから構成されている．よって実体は
sketch_141121a.java という名称のjava ファイルが一つだけである．

20. • Scratch入門のサンプルプログラムとして有名な猫逃げ(青山学院
大学社会情報学部客員教授 阿部和広先生作：
https://scratch.mit.edu/projects/2720899/
)と同様のプログラムをProcessingで実装
ピクトグラム逃げforProcessing
キャラクターは
人型ピクトグラムを利用
https://github.com/goseicho/
AwayFromPictoForProcessing
よりダウンロード可能

21. 実習
• ピクトグラム逃げのプログラムを変更し
てオリジナルの作品を作ろう．

22. NanoBoardAGを使った
Processing プログラミング

23. • MIT Media Labが開発したScratch用センサーボード
（PicoBoard）の互換機
センサープログラミング
NanoBoardAG
v 光センサー
v
抵抗センサー
v スライダー
v
音センサー
v タッチセンサー
v モーター
センサーボード NanoBoardAG

24. センサープログラミング
NanoBoardAG（１モータの接続）
M１と書かれた2本のピンにメスのケーブルを差し込む

25. センサープログラミング
NanoBoardAG（２モータの接続）
M１，M２と書かれた4本のピンにメスのケーブルをそれぞれ
差し込む

26. センサープログラミング
NanoBoardAG（モータの接続）
モータから出ている4本のピンの両端の２本のピンに
ケーブルをそれぞれ差し込む

27. ２モータモードの設定の仕方
vッェD
っちせんさ タッチセンサー
LED
USBケーブルをPCに接続した時に，LEDが何回光るかでモードがわかる．
PCに接続時にLEDが１回光ったら１モータモード，２回光ったら２モータモード
タッチセンサーを押しながらUSBケーブルをPCに接続するとモードが変わる．

28. • Processing側でScratch SensorBoard のプロトコルに準じた通信
でNanoBoardAGを制御，動作するNanoBoardAGクラスを独⾃に
実装
• テスタークラスNanoBoardAGTesterクラスを含む
• 各種センサー値を表⽰をProcessingとScratchで類似の画⾯構成
NanoBoardAGforProcessing
「ピクトグラム逃げ」と同様に
キャラクターは
⼈型ピクトグラムを利⽤
https://github.com/goseicho/NanoBoardAGForProcessing
https://github.com/goseicho/NanoBoardAGForProcessing
よりダウンロード可能

29. NanoBoardAGクラス
コンストラクタ
NanoBoardAG(PApplet p, int num, boolean
is2motor){
String port = Serial.list()[num];
myPort = new Serial(p, port, 38400);
this.is2motor = is2motor;
}
p に Papplet クラスのインスタンス 通常はthis で
よい.
num に NanoBoardAGのデバイスの COMポー
ト番号を指定して呼び出す.is2motorにtrueを指定
すると2モータ制御となる．is2motorにfalseを指
定，あるいは引数is2motorを省略すると1モータ
制御となる．

30. NanoBoardAGクラス
コンストラクタ
• NanoBoardAGを複数コンピュータに接
続し，それぞれのCOMポート番号に応じ
た NanoBoardAGクラスのインスタンス
を作成すれば，複数のNanoBoardAGを
同時 に計測制御可能である.詳しくは
NanoBoardAGSampleクラスを参照せ
よ.

31. NanoBoardAG クラス メソッド
（センサ関係）
// スライダーの値の取得 0-100
double getValSlider(){
return valSlider;
}
// 光センサーの値の取得 0-100
double getValLight(){
return valLight;
}
// 音センサーの値の取得 0-100
double getValSound(){
return valSound;
}
// ボタンが押されているか? 0 押されていない, 100 押されている
double getValButton(){
return valButton;
}

32. NanoBoardAG クラス メソッド
（1モータ関係）
// モーターパワーのセット 0〜100, 100が最速
void setMotorPower(double power){
motorPower = (byte)(power * 1.28);
}
// モーターの回転方向を反転
void reverseMotorDirection(){
motorDirection = (byte)((motorDirection + 1) &
0x1);
}

33. NanoBoardAG クラス メソッド
（２モータ関係）
// モーターAパワーのセット 0〜100, 100が最速
void setMotorPowerA(double power){
motorPowerA = (byte)(power * 1.28);
}
// モーターAの回転方向を反転
void reverseMotorDirectionA(){
motorDirectionA = (byte)((motorDirectionA + 1)
& 0x1);
}
// モーターBパワーのセット 0〜100, 100が最速
void setMotorPowerB(double power){
motorPowerB = (byte)(power * 1.28);
}
// モーターBの回転方向を反転
void reverseMotorDirectionB(){
motorDirectionB = (byte)((motorDirectionA + 1)
& 0x1);
}

34. NanoBoardAG クラス メソッド
（データ送受信）
// NanoBoardAGにモータの制御情報を送出
void sendData(){
if (is2motor){
myPort.write(motorDirectionA << 7 |
(motorPowerA >> 4 ) << 4 | motorDirectionB << 3 |
motorPowerB >> 4 );
} else {
myPort.write(motorDirection << 7 |
motorPower);
}
}
// NanoBoardAGから各種センサデータを受け取ったら呼ばれるメソッド
void serialEvent(Serial p){
// 省略
}
NanoBoardAGでは1バイトのモータの制御情報
を受け取ると，18バイトの各種センサ情報をPCに
対して送出する．つまりSendData()を呼ばないと
センサ情報は更新されない．

35. NanoBoardAGSampleクラス
の使用例

36. NanoBoardAGSampleクラス
使用COMポートの確認

37. メッセージパッシング
インスタンス名 taro nb
クラス名 Human NanoBoardAG
taro.setX((int)(nb.getValSlider()*5)+100);

38. メッセージパッシング
taro.setX((int)( 30.45 *5)+100);
インスタンス名 taro nb
クラス名 Human NanoBoardAG

39. メッセージパッシング
taro.setX((int)( 152.25 )+100);
インスタンス名 taro nb
クラス名 Human NanoBoardAG

40. メッセージパッシング
taro.setX(252);
インスタンス名 taro nb
クラス名 Human NanoBoardAG

41. 実習
• NanoBoardAGforProcessingのプログ
ラムを変更してオリジナルの作品を作ろ
う．