このサイトはMacを使って processing の動作や活用法を学びます。

7 ProcessingでArduinoの入力をグラフ化 [Graph]

Arduinoボードで測定したアナログ入力電圧をコンピュターにシリアル送信し Processingでグラフ化します。

Macの画面には黒のウインドが表示され、左から棒グラフで入力電圧が測定順に描かれていきます。グラフが右端に達すると画面全体が黒にリセットされ再び左から描画が始まります。

 

 

必要なハードウエア

この記事を実行するのに必要なハードウエアは、以下の通りで、Arduinoアナログ入力端子に cds（光センサー）と抵抗（10kΩ）を接続します。

グラフ化するアナログ入力源として、cds 光センサーを接続しましたが、電圧が 0-5vの範囲で変化するものなら、どのようなものでもグラフ化が可能です。例えば、単にポテンショメータを取り付けても十分にこの記事の学習が可能です。

 

動作確認

動作確認は以下の手順で行います。

  1. Arduino に cds と抵抗（10kΩ）を取り付ける
  2. Arduino IDE にスケッチを書く
  3. Arduinoボードにスケッチ書き込む
  4. Processing IDE にスケッチを書く
  5. Processing を実行する

1. Arduino に cds と抵抗を取り付ける

Arduino に cds と抵抗（10kΩ）を接続します。

使用した cdsセルの仕様は以下のようです

　・直径5mm
　・明抵抗：20~30kΩ(10Lux時)
　・暗抵抗：2MΩ

配線のための回路図を示します。

 

 

2. Arduino IDE にスケッチを書く

Arduino IDE に組み込まれているサンプルスケッチを利用します。

Arduino IDE のメニューから

  ファイル -> スケッチ例 -> 4.Communicattion -> Graph 

と選択してください。読み込まれたスケッチには、説明が多く記入され、また、Processing のプログラムコードもコメント欄に書かれているため長いスケッチになっています。

しかし、実際に Arduino に書き込まれるコードだけを取り出すと至ってシンプルな内容です。Arduino ボード  アナログ入力 0 の値を読み取り、その値をシリアルポートから次から次へと送信します。
不要部分を削除し、コメントを日本語に翻訳したスケッチを参考のため以下に掲載します。

 

// Graph
// アナログ入力 0 の値をシリアルポートから送信します。

void setup() {
  Serial.begin(9600);   // シリアルポートの初期化
}

void loop() {
  // analog input 0 の読み取り値をシリアル送信する
  Serial.println(analogRead(A0));
  delay(2);             // ADCの安定化のため待ち時間
}

3. Arduinoボードにスケッチを書き込む

Arduino IDE にスケッチが読み込まれたら、➡︎ ボタンをクリックして Arduinoマイコンボードにスケッチを書き込みます。

4. Processing IDE にスケッチを書く

Arduino IDE に読み込んだスケッチの後半に、コメントとして Processing IDE 用のスケッチが書かれています。その部分をコピーして Processing IDE にペーストしても構いませんが、以下に該当部分を抜き出して英語のコメントを日本語化したスケッチを示しますので、こちらを利用してください。

 

// Graphing sketch

// このプログラムは ASCII文字列を 9600 baud のシリアル通信で受け
// その値をグラフ化します。なお、データは 0 から 1023の範囲の数値で
// 改行で区切られているものとします。

import processing.serial.*;

Serial myPort;        // serial port
int xPos = 1;         // グラフの水平位置
float inByte = 0;

void setup () {
  size(400, 300);    // ウインドサイズを設定

  // 接続しているシリアルポートを書き出す
  printArray(Serial.list());

  // Arduino が接続されているポート番号を Serial.list()[0]
  // のインデックス位置に記入してください。
  myPort = new Serial(this, Serial.list()[2], 9600);

  // 改行コードを受信するまで、serialEvent() を発生させない
  myPort.bufferUntil('\n');

  background(0);    // 背景の初期化
}

void draw () {
  // 線を描く
  stroke(127, 34, 255);
  line(xPos, height, xPos, height - inByte);

  if (xPos >= width) {   // 画面の終端に達したら
    xPos = 0;            // 　先頭に戻り
    background(0);       // 　画面クリア
  } else {               // 終端でないなら
    xPos++;              // 　水平位置を +1 する
  }
}

void serialEvent (Serial myPort) {
  // 文字列を１行取得する
  String inString = myPort.readStringUntil('\n');

  if (inString != null) {
    // 前後の不要文字を削除する
    inString = trim(inString);
    // 文字列かåçら数値に変換し、さらに画面の高さに縮尺に合わせる
    inByte = float(inString);
    println(inByte);
    inByte = map(inByte, 0, 1023, 0, height);
  }
}

 

5. Processing を実行する

Processing IDE にスケッチを書き込んだら、▶︎ ボタンをクリックして Processingを実行します。

 

実行されると、Processing IDE のコンソール部に、 Macに接続されているポートの情報が表示されます。

さらに、Mac画面ほぼ中央に、黒のウインドが表示され、Arduino で測定した電圧がグラフ化されていきます。

 

 

グラフが右端に達すると画面全体が黒にリセットされ再び左から描画が始まります。

 

[トラブルシュート]　グラフが描かれない時

動作しない多くの理由が、Arduino 接続ポートの誤指示です。

Processing IDE のコンソール部を確認し、"/dev/cu.usbmodem14xxx"  と表示されている番号と、上記スケッチの

 

port = new Serial(this, Serial.list()[2], 9600);

 

の list( ) インデックス番号と一致しているか、確認してください。

 

 

次回は、Arduinoに接続したジョイスティックを動かすと、コンピュータ画面上の白いボールがジョイスティックと同じ動きをするサンプルスケッチを紹介します。

 

目次