Taro-テキスト.jtd

Size: px

Start display at page:

Download "Taro-テキスト.jtd"

えつまかたいわ
5 years ago
Views:

付録 7 実習テキスト Processingスケッチプログラミング Processingスケッチプログラミング Processingスケッチプログラミング 1. 的作成 : 米田文彦 Processing プロセッシングを使いプログラムによるビジュアル表現を学ぶまた Arduino と連携させデジタルとフィジカルの融合がどのように行われているのかを知る 2.

1 付録 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: 図 1 Processing -1-

2 付録 7 実習テキスト Processingスケッチプログラミング Processingスケッチプログラミングどのような場面で Processing が使われているか例を挙げると itunes 8 で公式ビジュアライザとして採用されている Magnetosphere である誰にでも簡単にこのような作品を作れる訳ではないがプログラムによるビジュアル表現の入門として Processing が注目されているこれまでのプログラミング言語の学習は文字や数字を表示させるだけのものだったが Processing を使うことで画像や図形音を使ったプログラミングが可能だ図 2 Magnetosphere ( 図 2:The Barbarian Group, ) 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

3 2 簡単な使い図 3 は Processing のインターフェースについての説明である Stop Open Export Run New Save 図 3 Processing 開発画面円を描いてみよう example void setup(){ 002 size(255,255); 003 } 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); //

4 打ち込んだら Run をクリックするすると実行画面が表示されるはずである図 4 実行画面次にプログラムの解説する example01 の解説 001 void setup(){ 002 size(255,255); // 画面サイズを 255 * 255 に設定する 003 } 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-

5 y: y 座標の位置 width: 楕円の横の長さ height: 楕円の縦の長さ課題 01 ファイル名 :problem01 example01 の背景色を黄色に設定せよ課題 02 ファイル名 :problem02 楕円を 2 つ描け位置は重なり合わないよう調節すること 4. 実習 Processing の良いところは Arduino と連携がとれる点にもある Arduino シリアル通信では Serial Monitor を使いセンサの値を読み込んだがこの値を Processing に読み込むことでさらに出来ることが拡がるはずである Arduino の可変抵抗の値を読み取り Processing の example01 で描いた円を操作してみよう 1Processing の準備 example import processing.serial.*; 002 Serial myport; 003 int x; void setup() 006 { 007 size(255,255); 008 myport=new Serial(this,"COM1",9600); 009 } void draw() 012 { 013 background(255,255,255); 014 ellipse(x,100,50,50); 015 } void serialevent(serial p) 018 { 019 x=myport.read(); 020 } -5-

6 2Arduinoの準備 example02_ar 001 int val; void setup() 004 { 005 Serial.begin(9600); 006 } 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; void setup() 006 { 007 size(255,255); 008 myport=new Serial(this,"COM1",9600); // シリアルポートの設定 009 } void draw() 012 { 013 background(255,255,255); 014 ellipse(x,100,50,50); //x 座標を変数 x に置 015 } き換える void serialevent(serial p) 018 { 019 x=myport.read(); // 変数 x にシリアル通信 020 } で得た値を代入 -6-

7 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 になる左端の四角からと各ピンに対応している Arduino 実習 Shield ではピンが LED と接続され OUTPUT が確認できる -7-

8 付録 7 実習テキスト Processingスケッチプログラミング Processingスケッチプログラミング図 5 実行画面 Processing から Arduino を制御する際は次のようにする 001 import processing.serial.*; 002 import cc.arduino.*; 003 Arduino arduino; 004 int x; void setup() 007 { 008 size(255,255); 009 println(arduino.list()); 010 arduino = new Arduino(this, Arduino.list()[0], 57600); 011 } 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-

Taro-テキスト.jtd

Taro-テキスト.jtd 付録 1 実習テキスト Arduinoスケッチプログラミング Arduinoスケッチプログラミング Arduinoスケッチプログラミング 1. 的作成 : 米田文彦 Arduino アルドゥイーノの基本構成機能を理解し簡単なスケッチ * を行える能力を身につけるまたパソコンの標準的なキーボードやマウスといった入出力デバイスではなくセンサやモータのような物理的な情報を扱える入出力デバイスを用いた制御をすることで