Processingでのグラフが表示されない

Question

実現したいこと

Arduino側でのデータをprocessingに渡し、そのデータをプロットし折れ線グラフを書こうとしているのですがうまくいきません。

前提

processingで折れ線グラフを表示したいのですが、実行をしても画面が真っ暗でなにも出てきません。
どこに問題があるんでしょうか・・・。
初学者なもので、教えていただけたら幸いです。
参考にしたサイト：https://okasho-engineer.com/processing-real-time-graph/

該当のソースコード

import processing.serial.*;

Serial port;

int[] PlotData = new int[300];
int data; //リアルタイムデータ

void setup() {
  //fullScreen();  // windowのサイズを画面いっぱいにする
  size(500,500);
  smooth();
  background(0);  // 背景を黒にする
  frameRate(10);  // frame rateを5fpsに設定
  port = new Serial(this,"COM5",115200);
  port.clear();
  for(int i=0; i<300; i++)  // plotするデータの初期化
  {
    PlotData[i] = 0;
  }
}

void draw() {
  background(0);
  TimeHistory(-width/2, -height/2+height/2/5, "ECG[deg]", data);  // 時間履歴の表示
}

void TimeHistory(int positionX, int positionY, String name, int data)
{
  // 引数説明 //
  // positionX, positionYはグラフを表示する枠の左上の点
  // nameはグラフの縦軸のラベル名
  // dataはリアルタイムのデータ
  // 枠線の描画
  float Width = width/3*0.85;  // 枠の幅
  float Height = height/2*0.6;  // 枠の高さ
  pushMatrix();  // 座標系の保存
  noFill();  // 塗りつぶしなし
  stroke(100);  // 枠線の色
  strokeWeight(3);  // 枠線の幅
  translate(positionX, positionY);  // 枠の左上の点を指定
  rect(0, 0, Width, Height);  // 枠の描画
  // メモリ線の描画
  strokeWeight(1);  // メモリ線の幅
  for (int i=1; i<6; i++)  // メモリ線の描画
  {
    line(0, Height/6*i, Width, Height/6*i);  // 縦軸
    line(Width/6*i, 0, Width/6*i, Height);  // 横軸
  }
  // メモリ値の描画
  stroke(0);
  fill(100);  // メモリ値の文字色
  // 縦軸のメモリ値
  textSize(Height*0.06);  // 文字の大きさ
  textAlign(RIGHT);  // 文字の座標指定位置
  int j = -300;  // 縦軸の目盛りの最低値
  for (int i=6; i>=0;i--)  // メモリ戦の描画
  {
    text(j, -width/3*0.02, Height/6*i);  // 文字の描画
    j = j + 100;  // 縦軸の目盛りの更新
  }
  pushMatrix();  // 座標系の保存
  rotate(radians(-90));  // 座標軸を90度回転
  textAlign(CENTER);  // 文字の座標指定位置
  text(name, -Height/2, -width/3*0.1);  // 縦軸ラベルの描画
  popMatrix();  // 保存した座標系の出力
  // 横軸のメモリ値
  textAlign(CENTER);  // 文字の座標指定位置
  text("now", Width, Height*1.08);  // 文字の描画
  j = 0;  // 横軸の目盛りの最低値
  for(int i=0; i<=5; i++)
  {
    text(j, Width/6*i, Height*1.08);  // 文字の描画
    j = j + 5;  // 横軸の目盛りの更新
  }
  text("time [s]", Width/2, Height*1.2);  // 横軸ラベルの描画
  // グラフの描画
  pushMatrix();
  translate(0, Height/2);  // 座標の原点を縦軸の中心に移動
  PlotData[299] = data;  // データの更新
  for(int i=0; i<300-1; i++)  // plotするデータ処理
  {
    PlotData[i] = PlotData[i+1];
  }
  for(int i=0; i<300-1; i++)
  {
    stroke(255, 0, 0);  // 線の色
    line(Width/300*i, Height/6*PlotData[i]/30, Width/300*(i+1), Height/6*PlotData[i+1]/30);
  }
  popMatrix();  
  stroke(0);  // 線の色を戻す
  popMatrix();  // 保存した座標系の出力
}

void serialEvent(Serial port){
  if(port.available() >=3){
    if(port.read() == 'H'){
      int high = port.read();
      int low = port.read();
      int data = high*256 + low;
      
      for(int i = 0; i < 300-1;i++){
        PlotData[i] = PlotData[i+1];
      }
      PlotData[299] = data;
    }
  }
}

//test01

const int ECG_sensor = 0;

void setup() {
  Serial.begin(115200);
}

void loop() {
  int value = analogRead(0);
  Serial.write('H');
  Serial.write(highByte(value));
  Serial.write(lowByte(value));
  delay(100);
}

Comments

[jimbe]

まず通信出来ているのかを確認してみては如何でしょうか。

[h.n]

すいません、シリアル通信に関してコードを修正しました。
ただ、これでも動きません

[jimbe]

通信は出来ていたのでしょうか。

[h.n]

シリアル通信はできていました

[jimbe]

データが受信出来て PlotData に値が溜っていっているのであれば、 arduino 側と processing の受信関数は問題無いことになります。
次は TimeHistory 関数が呼ばれているか、また、固定的にいつでも表示されるはずの目盛り等が書かれているかを確認する必要があるでしょう。
また TimeHistory の第4引数の data とか 79～83行目とかは serialEvent でやっているのですから削除するべきではないでしょうか。

[h.n]

固定的に表示される目盛り、縦軸横軸のラベルは表示されていません。

[jimbe]

draw 関数そして TimeHistory 関数はちゃんと呼ばれているでしょうか。また、例えば幅高さや各座標の値は正しいかを確かめたり、0,0から100,100への線を一本書くだけをしてみるとか、確認・試せることはあると思います。

Answer 1

あちこちから拾ったプログラム片をその動作を理解しないまま貼り合わせても動くプログラムにはならない典型、という気がしますがどうでしょうか。

まず。

そのデータをプロットし

では、そのプロットの横軸はどうなることを期待していますか? frameRateをいじっているところをみると、一定時間で流れて行くことを期待しているようでもありますが、しかしシリアルのイベントにフックしているデータの取得方法から考えると(時間に関係なく)送られてきたデータの個数でグラフを描くことを期待しているようにも見えなくはありません。どちらも100ms毎だから同期するという期待をしているのなら、「二つの時計が合っている保証なんてない」です。Arduino (UNO)のクロック精度は純正品で0.5%だったはず。PC側の時計精度が完璧だったとしても、200データ送受を繰り返したら1個分の周期ズレを起こしている可能性がある、ということです。

それと、「変数のスコープ」について復習してください。Processing側6行目で宣言した変数dataは、値は設定されることがなく(つまり0のまま)24行目で描画関数のコールに使われています。
その変数dataと、79行目に登場するdata、104行目のdataはそれぞれ互いに「赤の他人」です。
それぞれのdataの内容は一体どうあるべきなのか、ちゃんと説明できますか?

ついでに言えば、79行目と104行目はなにかそっくりに見えますが、それぞれの処理の意味は明確に説明できますか?(言ってしまえばこの二つが両方あるというのは異常だと思います)

もちろん、既に指摘があるように、描画のための座標系がどうなっているのかもちゃんと理解することが必要です。
私だったら、TimeHistory()を呼び出す前にtranslate()で座標系をシフトするかなぁ...

現時点でどういう入力に対してどういうグラフが描ければ満足なのかが不明なのでサンプルは書きません。

Answer 2

Webページのコードが間違っていることはよくあります（転記の際に書き損じるとか・そもそも動作確認してないとか^^;
あまり信用しすぎないことです。

processingで折れ線グラフを表示したいのですが、実行をしても画面が真っ暗でなにも出てきません。

// 引数説明 //
// positionX, positionYはグラフを表示する枠の左上の点

と書いてあるにもかかわらず、

TimeHistory(-width/2, -height/2+height/2/5,

positionX・positionYがマイナスになっています。これでは画面外に描画しています。
参考サイトがどういうつもりだったのかはわかりませんが、プラスの数値を適当に入れればいいでしょう。

あと参考サイトでは、Y軸が90～-90の固定です（その上なぜか反転してる）
回答ではめんどくさいので、dataのほうを加工しました^^;

シリアル通信はできているということなので、ダミーデータで検証しました（動作確認済^^

import processing.serial .*;

Serial port;
int[] PlotData = new int[300];
int data;

void setup() {
  size(500, 500);
  smooth();
  background(0);
  frameRate(10);

  //port = new Serial(this, "COM5", 115200);
  //port.clear();

  // ゼロ初期化ならいらない（javaでは「new int[300]」の時点ですべてゼロ）
  //for (int i = 0; i < 300; i++) {
  //  PlotData[i] = 0;
  //}
}

void draw() {
  background(0);

  // ダミーデータ（300 ～ -300）
  data = int(noise(frameCount * 0.05) * 600 - 300);
  println(data);

  // グラフ描画が90 ～ -90固定なので、90 ～ -90に圧縮
  data = int(map(data, 300, -300, 90, -90));

  // XYオフセットを適当に入れる
  TimeHistory(50, 50, "ECG[deg]", -data); // なぜかY軸が逆なので 【マイナス】data
}

void TimeHistory(int positionX, int positionY, String name, int data) {
  float Width = width / 3 * 0.85;
  float Height = height / 2 * 0.6;

  pushMatrix();
  noFill();
  stroke(100);
  strokeWeight(3);
  translate(positionX, positionY);
  rect(0, 0, Width, Height);

  strokeWeight(1);
  for (int i = 1; i < 6; i++) {
    line(0, Height / 6 * i, Width, Height / 6 * i);
    line(Width / 6 * i, 0, Width / 6 * i, Height);
  }

  stroke(0);
  fill(100);

  textSize(Height * 0.06);
  textAlign(RIGHT);
  int j = -300;
  for (int i = 6; i >= 0; i--) {
    text(j, -width / 3 * 0.02, Height / 6 * i);
    j += 100;
  }

  pushMatrix();
  rotate(radians(-90));
  textAlign(CENTER);
  text(name, -Height / 2, -width / 3 * 0.1);
  popMatrix();

  textAlign(CENTER);
  text("now", Width, Height * 1.08);
  j = -30;
  for (int i = 0; i <= 5; i++) {
    text(j, Width / 6 * i, Height * 1.08);
    j += 5;
  }
  text("time [s]", Width / 2, Height * 1.2);

  pushMatrix();
  translate(0, Height / 2);

  PlotData[299] = data;
  //for (int i = 0; i < 300 - 1; i++) {
  //  PlotData[i] = PlotData[i + 1];
  //}
  // ↑↓同じ意味（まとめて移動したほうが早いはず）
  arrayCopy(PlotData, 1, PlotData, 0, PlotData.length - 1);

  for (int i = 0; i < 300 - 1; i++) {
    stroke(255, 0, 0);
    line(Width / 300 * i, Height / 6 * PlotData[i] / 30, Width / 300 * (i + 1), Height / 6 * PlotData[i + 1] / 30);
  }
  popMatrix();
  popMatrix();
}

void serialEvent(Serial port) {
  if (port.available() >= 3) {
    if (port.read() == 'H') {
      int high = port.read();
      int low = port.read();

      // ローカル変数じゃダメ
      //int data = high * 256 + low;
      data = high * 256 + low;

      // TimeHistory内でやってる
      //for (int i = 0; i < 300 - 1; i++) {
      //  PlotData[i] = PlotData[i + 1];
      //}
      //PlotData[299] = data;
    }
  }
}

---

調べていたらこんなものがありました（デバイスがないので動作確認はしてません）
chillibasket/processing-grapher: Terminal and graphing program for analysis and recording of data from serial devices