付録 7 実習テキスト Processingスケッチプログラミング Processingスケッチプログラミング Processingスケッチプログラミング 1. 的 作成 : 米田文彦 Processing プロセッシング を使い プログラムによるビジュアル表現を学ぶ また Arduino と連携させ デジタルとフィジカルの融合がどのように行われているのかを知る 2. 使 機器 パソコン Processing Arduino Arduino 実習 Shield Arduino IDE( 開発環境 ) 3. 原理 1Processingとは Processing とは 画像処理やアニメーションのビジュアルデザイン インタラクションデザインなどの分野でのプログラミングに特化した オープンソースのプログラミング環境である Java をベースにした実行環境とエディタが用意されていて Windows Mac OS X Linux 版ソフトが無償で提供されている (Processing.jp: http://processing.jp/) 図 1 Processing -1-
付録 7 実習テキスト Processingスケッチプログラミング Processingスケッチプログラミング どのような場面で Processing が使われているか例を挙げると itunes 8 で公式ビジュアライザとして採用されている Magnetosphere である 誰にでも簡単に このような作品を作れる訳ではないが プログラムによるビジュアル表現の入門として Processing が注目されている これまでのプログラミング言語の学習は 文字や数字を表示させるだけのものだったが Processing を使うことで画像や図形 音を使ったプログラミングが可能だ 図 2 Magnetosphere ( 図 2:The Barbarian Group,http://www.barbariangroup.com/software/magnetosphereより転載 ) Processing は Ben Fry( ベン フライ ) 氏と Casey Reas( ケーシー リース ) 氏という 2 人の開発者が 当時 (2001 年 ) 在籍していた MIT メディアラボにて 初歩的なプログラミングの教育や プログラムによる作品制作の スケッチ ができる環境として構想したものである なので Processing ではプログラムではなく スケッチと呼んでいる これまでの言語でもグラフィックを扱うことは可能である しかし 言語の仕様やライブラリの追加などに熟知していなくてはならないため 上級者でなければ難しい Processing ではこのようなことを気にしなくても グラフィックを扱うことができるので プログラミングをしたことのない多くのデザイナーや美術系の大学生も利用している また Processing と Arduino の開発環境は非常に似ている 実は Arduino の開発環境は Processing から派生して作られているからだ インターフェースが似ているだけでなく Processing と Arduino を連携させたプログラムを書くことも もちろん可能だ -2-
2 簡単な使い 図 3 は Processing のインターフェースについての説明である Stop Open Export Run New Save 図 3 Processing 開発画面 円を描いてみよう example01 001 void setup(){ 002 size(255,255); 003 } 004 005 void draw(){ 006 background(255,255,255); 007 ellipse(100,100,50,50); 008 } -3-
打ち込んだら Run をクリックする すると実行画面が表示されるはずである 図 4 実行画面 次にプログラムの解説する example01 の解説 001 void setup(){ 002 size(255,255); // 画面サイズを 255 * 255 に設定する 003 } 004 005 void draw(){ 006 background(255,255,255); // 背景色を白に設定する 007 ellipse(100,100,50,50); //XY 座標 (100,100) 縦 50 横 50 の円を描く 008 } たった 8 行のプログラムで円を描くことができた Processing では void setup() と void draw()(arduino では void loop() だった ) が必ず必要になる void setup() では実行画面のサイズなどを初期設定を行う void draw() では実際に何を描くのかを記述する background(value1, value2, value3) 実行画面の背景に使われる色を決める [ パラメータ ] value1: 赤の割合 (0~255) value2: 緑の割合 (0~255) value3: 青の割合 (0~255) ellipse(x, y, width, height) 楕円を描く [ パラメータ ] x: x 座標の位置 -4-
y: y 座標の位置 width: 楕円の横の長さ height: 楕円の縦の長さ 課題 01 ファイル名 :problem01 example01 の背景色を黄色に設定せよ 課題 02 ファイル名 :problem02 楕円を 2 つ描け 位置は重なり合わないよう調節すること 4. 実習 Processing の良いところは Arduino と連携がとれる点にもある Arduino シリアル通信では Serial Monitor を使い センサの値を読み込んだが この値を Processing に読み込むことでさらに出来ることが拡がるはずである Arduino の可変抵抗の値を読み取り Processing の example01 で描いた円を操作してみよう 1Processing の準備 example02 001 import processing.serial.*; 002 Serial myport; 003 int x; 004 005 void setup() 006 { 007 size(255,255); 008 myport=new Serial(this,"COM1",9600); 009 } 010 011 void draw() 012 { 013 background(255,255,255); 014 ellipse(x,100,50,50); 015 } 016 017 void serialevent(serial p) 018 { 019 x=myport.read(); 020 } -5-
2Arduinoの準備 example02_ar 001 int val; 002 003 void setup() 004 { 005 Serial.begin(9600); 006 } 007 008 void loop() 009 { 010 val=analogread(0)/4; 011 Serial.print(val,BYTE); 012 delay(50); 013 } これを Arduino に Upload する 3 起動 Processing 側で Run する 可変抵抗に変化を与えると 円が x 軸方向に移動する example02 の解説 001 import processing.serial.*; // シリアルライブラリを取り込む 002 Serial myport; //myport というインスタンスを作る 003 int x; 004 005 void setup() 006 { 007 size(255,255); 008 myport=new Serial(this,"COM1",9600); // シリアルポートの設定 009 } 010 011 void draw() 012 { 013 background(255,255,255); 014 ellipse(x,100,50,50); //x 座標を 変数 x に置 015 } き換える 016 017 void serialevent(serial p) 018 { 019 x=myport.read(); // 変数 x にシリアル通信 020 } で得た値を代入 -6-
myport=new Serial(parent, name, rate) シリアルポートの設定を行う [ パラメータ ] parent: 通常は this を入れる name: Arduino のポートを指定する Windows だと COM *(* は数字 ) MacOS だと /dev/tty.usbserial-* が入る rate: 通信速度 Arduino 側と同じでよい myport.read() myport つまり new Serial(parent, name, rate) で指定した Arduino から値を読み込む 5.Firmataライブラリ実習の内容では Arduino 側にもプログラムを置き 可変抵抗の値を常にパソコン側にシリアル通信で送っている そのデータを Processing で受け取り 円を制御している つまりプログラムは 2 つ必要になる Arduino パソコン (Processing) ( 送信プログラム ) ( 受信プログラム 描画 ) シリアル通信可変抵抗の値を送信 毎回 Arduino と Processing のプログラムを用意するのは大変である そこで Firmata ライブラリというのを使い もっと簡単に Processing で Arduino の情報を入手してみたい 1 Arduino 側の準備 Arduino IDE で File Examples Firmata Standard Firmata を選択する するとスケッチが現れるので それを Upload する 2 Processing 側でテスト Processing で Open libraries arduino examples arduino_output を選択し実行 図 5 の様な実行画面が現れ 四角をクリックすると Arduino の対応したピンが HIGH になる 左端の四角から 13 12 11 と各ピンに対応している Arduino 実習 Shield では 9 8 7 6 ピンが LED と接続され OUTPUT が確認できる -7-
付録 7 実習テキスト Processingスケッチプログラミング Processingスケッチプログラミング 図 5 実行画面 Processing から Arduino を制御する際は次のようにする 001 import processing.serial.*; 002 import cc.arduino.*; 003 Arduino arduino; 004 int x; 005 006 void setup() 007 { 008 size(255,255); 009 println(arduino.list()); 010 arduino = new Arduino(this, Arduino.list()[0], 57600); 011 } 012 013 void draw() 014 { 015 background(255,255,255); 016 x=arduino.analogread(0)/4; 017 ellipse(x,100,50,50); 018 } 赤字は必ず入れなければならない 基本的には Arduino で使う関数の頭に arduino. をつけるだけで利用することができる 例 デジタル入力 arduino.digitalread() デジタル出力 arduino.digitalwrite(,arduino.low もしくは arduino.high) アナログ入力 arduino.analogread() アナログ出力 arduino.analogwrite() 課題 03 ファイル名 :problem03 CdS セルの情報を取り込み 画面の色を変化させよ Firmata ライブラリを用いて構わない -8-