ArduinoとProcessingを組み合わせて使う方法！

この記事はこんな人にオススメです．

Arduinoを始めてまもない人
Processingに興味がある人
PCと連動させてグラフィカルに電子工作の操作をしたい人．

こんにちは，けんゆーです（@kenyu0501_)．

Arduinoを使い始めて早いもので２週間が経ちました！

研究や学会など参加しつつ，片手間でやっているのでまだまだビギナーの域から脱していませんが，，，
また，学習するたびにブログを書いてアウトプットをしているので，進捗は遅いですが吸収率はすごく高い感じがしています．
Arduinoをある程度使いこなせるようになったら，高度なものづくりをしていきたいですね．

さてさて，
これまでArduinoをスタンドアロン（PCから一度プログラムを送信したら独自に動く）で使用してきましたが，PCと同時に動かすというやり方も学んで行きたいと思います．
つまり，Arduinoを使って外部との入出力用のボードとしてPCに接続するという方法です．
Arduinoはセンサやアクチュエータとのやり取りだけをさせて，制御などそれ以外の処理をPC側でやります．

Processingとは！？

Processingを活用することによって，マウスやキーボードからの情報を得たり，高度な情報処理が可能になるようです．

Processingを使うための準備など！

はじめにソフトウェアのダウンロードやインストールなどを行います！

こちらの公式HPからダウンロードできます！
（公式HP：https://www.processing.org）

「 Download Processing」からダウンロードしましょう，
Macのバージョンだと，だいたい１０分程度かかりました．

サンプルコードで遊ぼう！

ダウンロードが済んだらサンプルコードで遊んでみましょう！
まずは，Arduino関係なく，パソコン側で単体で遊んでみます．

サンプルコードの場所は，「ファイル」→「サンプル．．．」の中に色々入っています！

サンプルから取得したプログラムを▶︎ボタンを押して実行してみてください！

別のウインドウが現れて，マウスやキーボード入力などで動くグラフィカルなものが簡単にできます．

こちらでも色々と試してみました．

「MeshTweening」カーソル操作ができる凸凹メッシュ．

「Distance２D」カーソルで動く，一定の距離間を把握する．

「KeyboardFunctions」キーボード入力でカラフルな図形が出てくる．

「Particles」カーソル操作，粒子が色々と降り注ぐ

「StoringInput」カーソル操作，移動軌跡がおしゃれな感じで出てくる．

こういったグラフィカルな操作と同時に，Arduinoが使えちゃうわけなのですね！

ArduinoをProcessingで動かす！

最初なので，マウスクリック操作によるLチカでもやってみます！
プログラムに関しては，「楽しくできるArduino電子制御 Processingでパソコンと連携」を参考にしました．

デバイス全体の概要

このような感じです！
Processingで作成した円をクリックすると，赤くなり，Arduinoへシリアル通信を行います！

Arduino側で受信をしたら，LEDを光らせる信号を送るだけの簡単なものです．

プログラムについて

ArduinoとProcessing両方のプログラムを書いておきます．

void setup()
{
    Serial.begin(9600);
    pinMode(13, OUTPUT);
}

void loop()
{
    if(Serial.available() > 0){
          char c = Serial.read();
          if(c == 'a'){
              digitalWrite(13, HIGH);
          }
          else if(c == 'b'){
              digitalWrite(13, LOW);
          }
    }
}

import processing.serial.*;

Serial port;

void setup()
{
    size(255, 255);
    port = new Serial(this, "/dev/cu.usbmodem14111", 9600);
    frameRate(30);
    stroke(0);
    fill(255); 
    rectMode(CENTER);
}

void draw()
{
    background(192);
    if (mousePressed == true) {
        port.write('a'); 
        fill(200,0,0); 
        ellipse(127, 127, 100, 100);
    } else {
        port.write('b');
        fill(255);
        ellipse(127, 127, 100, 100);
    }
}

このような感じです！

Processing側のシリアルポートは，Arduino側と同じにしておいてください！

おいらのは，「”/dev/cu.usbmodem14111″」こちらでした．

これで色々と今後応用ができそうです！