Arduino×Processing
みなさんはProcessingをご存じでしょうか？
Arduinoとシリアル通信をすることでセンサなどを値を可視化できたり、逆にProcessing側からArduinoを操作することが出来たりと活用の幅はとても広いクリエイティブなツールなのですが、もともとは電子アートやビジュアルデザインのために開発された言語のようです。
今回は導入編としてProcessingの開発環境を整えて、ProcessingからArduinoを操作してLチカを行っていこうと思います。
Processing開発環境を整える
まずは下記サイトよりソフトウェアのダウンロードを行いましょう。
1.Download Processingをクリック
2.自身のOSのタイプを選択(ダウンロードが始まります)
3.ダウンロードしたzipファイルを解凍
Processingのサンプルコードで動作確認
まずはサンプルコードで遊んでみましょう。
Processingのアプリケーションを開いて、【ファイル】⇒【Javaサンプル】から様々なサンプルコードを選択可能です。
今回は【Math】⇒【Map】を試してみました。
このコードはマウスのX軸の移動範囲を円の大きさと円の色にマッピングするもののようです。
- fill(RED, GREEN, BLUE) 各0~255で指定可能
- ellipse（x, y, width, height)
このようにProcessingは描画のための関数が多く用意されているので、Arduinoなどと組み合わせることで様々な表現が可能になります。
次章では実際にArduinoと連携して動かしてみましょう。
Arduinoと連携(Processing⇒Arduino)
ArduinoとProcessingの連携として、まずはProcessingからArduinoを操作してみたいと思います。
初めてという事でHello worldをProcessing側で表示するのは簡単なので、ProcessingからArduinoを操作してLチカを行いたいと思います。
前提として互いのシリアルポートは同じポートに合わせましょう（Processingはコード内でシリアルポートを指定します）。
プログラムの構想としては、Processing側でボタンを作成し、ボタンをクリックするとLEDが点灯。再度クリックするとLEDが消灯するイベントを作成します。作成にはArduino側とProcessing側でコードを書く必要があります。
■Arduino側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
bool flag=0; void setup() { Serial.begin(9600); pinMode(13, OUTPUT); } void loop() { if(Serial.available() > 0){ char c = Serial.read(); if(c == 'a'){ //digitalWrite(13, HIGH); flag=1; } else if(c == 'b'){ //digitalWrite(13, LOW); flag=0; } } digitalWrite(13,flag); } |
■Processing側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
import processing.serial.*; Serial port; class Button { float x, y; float sizeX, sizeY; int state; color baseCol; float nb; float sb; float pb; String str; Button(float x, float y, float sizeX, float sizeY, color baseCol, String str) { this.x=x; this.y=y; this.sizeX=sizeX; this.sizeY=sizeY; this.baseCol=baseCol; this.str=str; nb=1; //normalBrightness sb=0.8; //selectBrightness pb=0.6; //pushBrightness } void run() { rogic(); display(); } void display() { noStroke(); changeColor(); ellipse(x, y, sizeX, sizeY); fill(0, 0, 100); textSize(30); text(str, x, y); } void rogic() { state=checkState(); } //=================================================================== boolean isPush() { if (checkState()==2) return true; return false; } int checkState() { if (!checkInMouse()) return 0; if (!mousePressed) return 1; return 2; } boolean checkInMouse() { if (mouseX>x-sizeX/2&&mouseX<x+sizeX/2) { if (mouseY>y-sizeY/2&&mouseY<y+sizeY/2) { return true; } } return false; } void changeColor() { switch(state) { case 0: fill(hue(baseCol), saturation(baseCol), brightness(baseCol)*nb); break; case 1: fill(hue(baseCol), saturation(baseCol), brightness(baseCol)*sb); break; case 2: fill(hue(baseCol), saturation(baseCol), brightness(baseCol)*pb); break; default: fill(0, 0, 0); break; } } } Button button; int scene=0; String led="OFF"; void setup() { port = new Serial(this, "COM3", 9600); size(600, 600); rectMode(CENTER); colorMode(HSB, 360, 100, 100); textAlign(CENTER, CENTER); button=new Button(width/2, height/2, 200, 100, color(190, 100, 70), "PUSH!"); } void draw() { background(0, 0, 100); fill(0, 0, 0); text(led, width/2, height/4); button.run(); if (button.isPush()) { scene+=1; } switch(scene){ case 0: port.write('b'); break; case 1: delay(300); scene+=1; led="ON"; break; case 2: port.write('a'); break; case 3: delay(300); scene+=1; led="OFF"; break; case 4: scene=0; break; } } |
Buttonクラスを作成しているためにコードが長くなっていますが、定常的に動いているところはdraw()の部分です。draw関数とはArduinoでいうloopの部分になります。
動き的にはbutton.isPush()関数でマウスのクリックを検知し、その都度sceneフラグをインクリメントしてswitchで分岐させています。
Arduinoへの通信はシリアル通信を使用しており【processing.serial.*】をインポートする必要があります。LEDをONしたいときは【port.write(‘a’)】でaをシリアル書き込みを行い、OFFしたいときは【port.write(‘b’)】bをシリアル書き込みしています。
一旦今回はここで区切って、次回はArduino⇒Processingへ値を渡し可視化してみようと思います。
コメント