Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
NanoBoardAGで
Processing 入門
Kazunari ITO
1
Processing とは?
•  アートやデザイン関係で広く用いられて
いるプログラミング言語
– 画像や動画、ウェブカメラ
– インタラクション(クリックしたら…とか)
h$p://processing.org/
Processing のダウンロード
http://processing.org/download からダウンロード可能 
ver.3 が最新(2016年11月現在)
まずは何ができるか
サンプルを見てみよう
メニューバーの 「ファイル」 -> 「サンプル」 を選択するとサンプルファイ
ル一覧を表示したウィンドが表示される. 
初めてのProcessing
1.  line(0, 0, 100, 200);
–  (0, 0)から(100, 200)まで
線を引く
2.  実行ボタン をクリック
3.  原点の位置とx軸・y軸の
向きを調べる
ProcessingはJavaの
フロントエンド
import processing.core.*;
import processing.data.*;
import processing.event.*;
import processing....
基本図形の描画
size(300, 300); //キャンパスサイズ
background(255, 255, 255); //背景は白
fill(255, 0, 0); //R=255, B=0, G=0で塗る
ellipse(100, 10...
リファレンスの参照
•  メソッド名やク
ラス名をダブル
クリックすると
ハイライトされ
るので,右ク
リックで「リ
ファレンスから
探す」を選択
リファレンスの参照(2)
•  メソッドやクラ
スの使い方や説
明,仕様などが
ブラウザに表示
される
アニメーション
Processingのアニメーション
//最初に1回だけ呼ばれるメソッド
void setup() {
size(300, 300);
background(255);
}
//毎フレーム呼ばれるメソッド
void draw() {
fill(...
動いているように見せる
int t=0;
void setup() {
size(300, 300);
fill(0);
}
void draw() {
background(255); //キャンバスを白で塗りつぶす
t=t+1; //少しず...
画像の表示
1.  Processingのウィンドウに画像ファイル
のアイコンをドラッグ&ドロップする
2.  Pimage img=loadImage(“ファイル名”);
でロードする
3.  Image(img, x座標, y座標);
で描...
画像ファイルの表示例
size(200, 200);
PImage imageB = loadImage("bird.png");
PImage imageM = loadImage("man.png");
image(imageB, 20, ...
クラスの定義
class Human {      // 基本はJavaと同じ,ただしpublic宣言できない
private String name; // 名前
private double shincho; // 身長
private d...
インスタンスの生成
Human taro;
void setup() {
size(500, 1000); // 画面のサイズ.
background(255); // 背景の色.今回は白を指定
taro = new Human("Taro",...
クラス記述
public class A {
}
class B {
}
class C {
}
				
				
				
通常各クラスは,それぞれ独立している.
インナークラス
public class A { // アウタークラス
class B { // インナークラス
}
}
				
				
インナークラスはアウタークラスの内部で定義される.
インナークラスからアウタークラスで生成されたインス...
Processing で定義されるクラスは
インナークラスになっている
public class sketch_141121a extends PApplet {
class Human {
}
class Car{
}
}
				void	...
•  Scratch入門のサンプルプログラムとして有名な猫逃げ(青山学院
大学社会情報学部客員教授 阿部和広先生作:
https://scratch.mit.edu/projects/2720899/
)と同様のプログラムをProcessing...
実習
•  ピクトグラム逃げのプログラムを変更し
てオリジナルの作品を作ろう.
NanoBoardAGを使った
Processing プログラミング
•  MIT Media Labが開発したScratch用センサーボード
(PicoBoard)の互換機
センサープログラミング
NanoBoardAG
v	光センサー	
v	
抵抗センサー	
v	スライダー	
v	
音センサー	
v	タッチセ...
センサープログラミング
NanoBoardAG(1モータの接続) 
M1と書かれた2本のピンにメスのケーブルを差し込む
センサープログラミング
NanoBoardAG(2モータの接続) 
M1,M2と書かれた4本のピンにメスのケーブルをそれぞれ
差し込む
センサープログラミング
NanoBoardAG(モータの接続)
モータから出ている4本のピンの両端の2本のピンに
ケーブルをそれぞれ差し込む
2モータモードの設定の仕方
vッェD	
っちせんさ	タッチセンサー	
LED	
USBケーブルをPCに接続した時に,LEDが何回光るかでモードがわかる.
PCに接続時にLEDが1回光ったら1モータモード,2回光ったら2モータモード
タッチセンサ...
•  Processing側でScratch SensorBoard のプロトコルに準じた通信
でNanoBoardAGを制御,動作するNanoBoardAGクラスを独⾃に
実装
•  テスタークラスNanoBoardAGTesterクラスを含...
NanoBoardAGクラス 
コンストラクタ
NanoBoardAG(PApplet p, int num, boolean 
is2motor){
  String port = Serial.list()[num];
  myPort =...
NanoBoardAGクラス 
コンストラクタ
•  NanoBoardAGを複数コンピュータに接
続し,それぞれのCOMポート番号に応じ
た NanoBoardAGクラスのインスタンス
を作成すれば,複数のNanoBoardAGを
同時 に計...
NanoBoardAG クラス メソッド
(センサ関係)
// スライダーの値の取得 0-100
double getValSlider(){
return valSlider;
}
// 光センサーの値の取得 0-100
double get...
NanoBoardAG クラス メソッド
(1モータ関係)
// モーターパワーのセット 0〜100, 100が最速
void setMotorPower(double power){
 motorPower = (byte)(power * ...
NanoBoardAG クラス メソッド
(2モータ関係)
// モーターAパワーのセット 0〜100, 100が最速	
void setMotorPowerA(double power){
motorPowerA = (byte)(power...
NanoBoardAG クラス メソッド
(データ送受信)
// NanoBoardAGにモータの制御情報を送出	
void sendData(){
if (is2motor){
myPort.write(motorDirectionA << ...
NanoBoardAGSampleクラス
の使用例
NanoBoardAGSampleクラス
使用COMポートの確認
メッセージパッシング
インスタンス名 taro nb
クラス名 Human NanoBoardAG
taro.setX((int)(nb.getValSlider()*5)+100);
メッセージパッシング
taro.setX((int)( 30.45 *5)+100);	
インスタンス名 taro nb
クラス名 Human NanoBoardAG
メッセージパッシング
taro.setX((int)( 152.25 )+100);	
インスタンス名 taro nb
クラス名 Human NanoBoardAG
メッセージパッシング
taro.setX(252);	
インスタンス名 taro nb
クラス名 Human NanoBoardAG
実習
•  NanoBoardAGforProcessingのプログ
ラムを変更してオリジナルの作品を作ろ
う.
Upcoming SlideShare
Loading in …5
×

Processing using NanoboardAG

2,168 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Processing using NanoboardAG

  1. 1. NanoBoardAGで Processing 入門 Kazunari ITO 1
  2. 2. Processing とは? •  アートやデザイン関係で広く用いられて いるプログラミング言語 – 画像や動画、ウェブカメラ – インタラクション(クリックしたら…とか) h$p://processing.org/
  3. 3. Processing のダウンロード http://processing.org/download からダウンロード可能  ver.3 が最新(2016年11月現在)
  4. 4. まずは何ができるか サンプルを見てみよう メニューバーの 「ファイル」 -> 「サンプル」 を選択するとサンプルファイ ル一覧を表示したウィンドが表示される. 
  5. 5. 初めてのProcessing 1.  line(0, 0, 100, 200); –  (0, 0)から(100, 200)まで 線を引く 2.  実行ボタン をクリック 3.  原点の位置とx軸・y軸の 向きを調べる
  6. 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. 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. 8. リファレンスの参照 •  メソッド名やク ラス名をダブル クリックすると ハイライトされ るので,右ク リックで「リ ファレンスから 探す」を選択
  9. 9. リファレンスの参照(2) •  メソッドやクラ スの使い方や説 明,仕様などが ブラウザに表示 される
  10. 10. アニメーション
  11. 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. 12. 動いているように見せる int t=0; void setup() { size(300, 300); fill(0); } void draw() { background(255); //キャンバスを白で塗りつぶす t=t+1; //少しずつずらして描画する ellipse(t, 150, 20, 20); } ●   ●     ●        ●           ●
  13. 13. 画像の表示 1.  Processingのウィンドウに画像ファイル のアイコンをドラッグ&ドロップする 2.  Pimage img=loadImage(“ファイル名”); でロードする 3.  Image(img, x座標, y座標); で描画する
  14. 14. 画像ファイルの表示例 size(200, 200); PImage imageB = loadImage("bird.png"); PImage imageM = loadImage("man.png"); image(imageB, 20, 20); image(imageM, 80, 80);
  15. 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. 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. 17. クラス記述 public class A { } class B { } class C { } 通常各クラスは,それぞれ独立している.
  18. 18. インナークラス public class A { // アウタークラス class B { // インナークラス } } インナークラスはアウタークラスの内部で定義される. インナークラスからアウタークラスで生成されたインスタンスや定義されたメ ソッドにアクセスすることができる.
  19. 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. 20. •  Scratch入門のサンプルプログラムとして有名な猫逃げ(青山学院 大学社会情報学部客員教授 阿部和広先生作: https://scratch.mit.edu/projects/2720899/ )と同様のプログラムをProcessingで実装 ピクトグラム逃げforProcessing キャラクターは 人型ピクトグラムを利用 https://github.com/goseicho/ AwayFromPictoForProcessing よりダウンロード可能
  21. 21. 実習 •  ピクトグラム逃げのプログラムを変更し てオリジナルの作品を作ろう.
  22. 22. NanoBoardAGを使った Processing プログラミング
  23. 23. •  MIT Media Labが開発したScratch用センサーボード (PicoBoard)の互換機 センサープログラミング NanoBoardAG v 光センサー v 抵抗センサー v スライダー v 音センサー v タッチセンサー v モーター センサーボード NanoBoardAG
  24. 24. センサープログラミング NanoBoardAG(1モータの接続)  M1と書かれた2本のピンにメスのケーブルを差し込む
  25. 25. センサープログラミング NanoBoardAG(2モータの接続)  M1,M2と書かれた4本のピンにメスのケーブルをそれぞれ 差し込む
  26. 26. センサープログラミング NanoBoardAG(モータの接続) モータから出ている4本のピンの両端の2本のピンに ケーブルをそれぞれ差し込む
  27. 27. 2モータモードの設定の仕方 vッェD っちせんさ タッチセンサー LED USBケーブルをPCに接続した時に,LEDが何回光るかでモードがわかる. PCに接続時にLEDが1回光ったら1モータモード,2回光ったら2モータモード タッチセンサーを押しながらUSBケーブルをPCに接続するとモードが変わる.
  28. 28. •  Processing側でScratch SensorBoard のプロトコルに準じた通信 でNanoBoardAGを制御,動作するNanoBoardAGクラスを独⾃に 実装 •  テスタークラスNanoBoardAGTesterクラスを含む •  各種センサー値を表⽰をProcessingとScratchで類似の画⾯構成 NanoBoardAGforProcessing 「ピクトグラム逃げ」と同様に キャラクターは ⼈型ピクトグラムを利⽤ https://github.com/goseicho/NanoBoardAGForProcessing https://github.com/goseicho/NanoBoardAGForProcessing よりダウンロード可能
  29. 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. 30. NanoBoardAGクラス  コンストラクタ •  NanoBoardAGを複数コンピュータに接 続し,それぞれのCOMポート番号に応じ た NanoBoardAGクラスのインスタンス を作成すれば,複数のNanoBoardAGを 同時 に計測制御可能である.詳しくは NanoBoardAGSampleクラスを参照せ よ.
  31. 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. 32. NanoBoardAG クラス メソッド (1モータ関係) // モーターパワーのセット 0〜100, 100が最速 void setMotorPower(double power){  motorPower = (byte)(power * 1.28); } // モーターの回転方向を反転
 void reverseMotorDirection(){  motorDirection = (byte)((motorDirection + 1) & 0x1); }
  33. 33. NanoBoardAG クラス メソッド (2モータ関係) // モーター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. 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. 35. NanoBoardAGSampleクラス の使用例
  36. 36. NanoBoardAGSampleクラス 使用COMポートの確認
  37. 37. メッセージパッシング インスタンス名 taro nb クラス名 Human NanoBoardAG taro.setX((int)(nb.getValSlider()*5)+100);
  38. 38. メッセージパッシング taro.setX((int)( 30.45 *5)+100); インスタンス名 taro nb クラス名 Human NanoBoardAG
  39. 39. メッセージパッシング taro.setX((int)( 152.25 )+100); インスタンス名 taro nb クラス名 Human NanoBoardAG
  40. 40. メッセージパッシング taro.setX(252); インスタンス名 taro nb クラス名 Human NanoBoardAG
  41. 41. 実習 •  NanoBoardAGforProcessingのプログ ラムを変更してオリジナルの作品を作ろ う.

×