ArduinoIDEからProcessingにデータを送ってリアルタイムでグラフを表示したい

Question

実現したいこと

ArduinoIDEからProcessingにデータを送ってリアルタイムでグラフを表示したいです。
具体的には、M5stickCPlus2で取得した三軸加速度データをArduinoIDEで取得し、そのデータをProcessingを使ってグラフ表示させたいです。
https://qiita.com/TK303/items/7ddd816efac248e7a248
このサイトを参考にしました。

発生している問題・分からないこと

Processing側にエラーが出ます。
エラーが出るものの、まっすぐの線のグラフはなぜか出てきます。

エラーメッセージ

NullPointerException

該当のソースコード

/**
 * @file imu.ino
 * @author SeanKwok ([e-mail])
 * @brief M5StickCPlus2 get IMU data
 * @version 0.1
 * @date 2023-12-19
 *
 *
 * @Hardwares: M5StickCPlus2
 * @Platform Version: Arduino M5Stack Board Manager v2.0.9
 * @Dependent Library:
 * M5GFX: https://github.com/m5stack/M5GFX
 * M5Unified: https://github.com/m5stack/M5Unified
 * M5StickCPlus2: https://github.com/m5stack/M5StickCPlus2
 */

#include "M5StickCPlus2.h"

//class MPU6886 {
  //public:
    //enum Ascale { AFS_2G = 0, AFS_4G, AFS_8G, AFS_16G };


    //Ascale Acscale = AFS_16G;

//};

void setup() {
    Serial.begin(115200);
    auto cfg = M5.config();
    StickCP2.begin(cfg);
    StickCP2.Display.setRotation(0);
    StickCP2.Display.setTextColor(GREEN);
    StickCP2.Display.setTextDatum(middle_center);
    StickCP2.Display.setFont(&fonts::FreeSansBold9pt7b);
    StickCP2.Display.setTextSize(1);
}

void loop(void) {
    auto imu_update = StickCP2.Imu.update();
    if (imu_update) {
        StickCP2.Display.setCursor(0, 40);
        StickCP2.Display.clear();  // Delay 100ms 延迟100ms

        auto data = StickCP2.Imu.getImuData();

        // The data obtained by getImuData can be used as follows.
        float accel_x = data.accel.x;  // accel x-axis value.
        float accel_y = data.accel.y;  // accel y-axis value.
        float accel_z = data.accel.z;  // accel z-axis value.
        // data.accel.value;  // accel 3values array [0]=x / [1]=y / [2]=z.

        // data.gyro.x;      // gyro x-axis value.
        // data.gyro.y;      // gyro y-axis value.
        // data.gyro.z;      // gyro z-axis value.
        // data.gyro.value;  // gyro 3values array [0]=x / [1]=y / [2]=z.

        // data.value;  // all sensor 9values array [0~2]=accel / [3~5]=gyro /
        //              // [6~8]=mag

        //Serial.printf("ax:%f\r\n", accel_x);
        //Serial.printf("ay:%f\r\n", accel_y);
        //Serial.printf("az:%f\r\n", accel_z);
        //Serial.printf("ax:%f  ay:%f  az:%f\r\n", accel_x, accel_y, accel_z);
        //Serial.printf("gx:%f  gy:%f  gz:%f\r\n", data.gyro.x, data.gyro.y, data.gyro.z);
        //ジャイロはいらないから消す

        StickCP2.Display.printf("IMU:\r\n");
        StickCP2.Display.printf("X:%0.2f\r\n", accel_x); //数字を小数点第 1 位まで切り上げる
        StickCP2.Display.printf("Y:%0.2f\r\n", accel_y);
        StickCP2.Display.printf("Z:%0.2f\r\n", accel_z);
        //StickCP2.Display.printf("%0.2f %0.2f %0.2f\r\n", accel_x, accel_y, accel_z);
        //StickCP2.Display.printf("%0.2f %0.2f %0.2f\r\n", data.gyro.x, data.gyro.y, data.gyro.z);

        Serial.print("@SENSOR:");
        Serial.print(accel_x); Serial.print(",");
        Serial.print(accel_y); Serial.print(",");
        Serial.print(accel_z); Serial.println("");

        delay(20);
    }
    delay(100);
}

import processing.serial.*;
import controlP5.*;

ControlP5 cp5;
Chart chart_accel;
final int NUM_GRAPH_DATA = 200;  /* グラフ１軸あたりのデータ数 */
Serial m_myPort;
SensorData m_sensor_data;

void setup()
{
  // 画面の表示サイズ
  size(650, 700);

  // シリアル通信の設定
  //println(Serial.list());
  //String portName = Serial.list()[2]; /* USB-Serial(COM9)を選択する */
  //println(portName);
  //m_myPort = new Serial(this, portName, 115200);
  
  println(Serial.list());
  String desiredPort = "COM5";  // 使用したいポート名
  String portName = null;
  String[] ports = Serial.list();
  for (int i = 0; i < ports.length; i++) {
    if (ports[i].equals(desiredPort)) {
      portName = ports[i];
        break;
    }}
  if (portName != null) {
    println("Selected port: " + portName);
    m_myPort = new Serial(this, portName, 115200);
  } 
  else {
    println("Error: Desired port not found.");
    exit();  // プログラムを終了するか、適切なエラーハンドリングを追加
  }
  

  // 画面表示の更新レート（Hz） 
  frameRate(200);

  // graph by ControlP5 library
  cp5 = new ControlP5(this);

  // 加速度のグラフ設定
  chart_accel = cp5.addChart("Accel sensor");
  chart_accel.setView(Chart.LINE)                             /* グラフの種類（折れ線グラフ） */
            .setRange(-20000, 20000)                         /* 値の範囲（最小値、最大値） */
            .setSize(600, 200)                               /* グラフの表示サイズ */
            .setPosition(10, 250)                            /* グラフの表示位置 */
            .setColorCaptionLabel(color(0,0,255))            /* キャプションラベルの色 */
            .setStrokeWeight(1.5)                            /* グラフの線の太さを設定する */
            .getColor().setBackground(color(224, 224, 224))  /* グラフの背景色を設定する */
            ;

  setupChartAttr(chart_accel, "accel_x", color(0, 0, 192));
  setupChartAttr(chart_accel, "accel_y", color(192, 0, 0));
  setupChartAttr(chart_accel, "accel_z", color(0, 192, 0));
 
}

void setupChartAttr(Chart chart, String axis_name, int col)
{
  chart.addDataSet(axis_name);
  chart.setData(axis_name, new float[NUM_GRAPH_DATA]);
  chart.setColors(axis_name, col, color(255,255,128));
}

class SensorData
{
  float AcclX, AcclY, AcclZ;

  // constructor
  SensorData()
  {
    AcclX = AcclY = AcclZ = 0;
   
  }

  //
  void setPacket(int[] packet)
  {
    if (packet.length < 3)
    {
      return;
    }

    AcclX = packet[0];
    AcclY = packet[1];
    AcclZ = packet[2];
  
  }
};

void serialEvent(Serial myPort) { 
    
    String mystr = myPort.readStringUntil('\n');
   if (mystr != null) {
      mystr = trim(mystr);
      println("Received: " + mystr);  // 受信データを表示

      String[] str_array = split(mystr, ":");
      if (str_array.length > 1 && str_array[0].equals("@SENSOR")) {
         SensorData s_data = new SensorData();
         int[] sensorValues = int(split(str_array[1], ","));
         if (sensorValues.length >= 3) {
            s_data.setPacket(sensorValues);
            m_sensor_data = s_data;
         } else {
            println("Sensor values length is less than expected: " + sensorValues.length);
         }
      }
   }
}


     //String[] str_array = split(mystr, ":");
     //if (str_array[0].equals("@SENSOR"))
     //{
       //SensorData s_data = new SensorData();
       //s_data.setPacket(int(split(str_array[1], ",")));
       //m_sensor_data = s_data;
     //}
  //}


void draw()
{
  background(#EEEEEE);

  if (m_sensor_data != null)
  {
    chart_accel.unshift("AccelX", m_sensor_data.AcclX);
    chart_accel.unshift("AccelY", m_sensor_data.AcclY);
    chart_accel.unshift("AccelZ", m_sensor_data.AcclZ);

    m_sensor_data = null;
  }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

解決法が分かりませんでした。

補足

特になし

Comments

[thkana]

「試したこと、調べたこと」は「調べた」という行為についてのあなたの頑張ったアピールではありません。どういうキーワードで検索したらなにが引っかかった、それが理解出来たできなかった、等など書いてください。
とりあえず"NullPointerException"について調べてその内容について考えたことを書いてみましょう。

[TN8001]

デバイスがないので未確認ですが、こちらと同じ事象ではないでしょうか。
[Arduinoとprocessingシリアル通信。NullPointerExceptionの解決方法を教えてください!!](https://teratail.com/questions/231988)

---

float値を送っているように見えますが、intにしてしまう（106行目）とグラフがガタガタになりそうな...

[thkana]

「試したこと、調べたこと」は「調べた」という行為についてのあなたの頑張ったアピールではありません。どういう情報を得て
どういうキーワードで検索したらなにが引っかかった、それが理解出来たできなかった、等など書いてください。
とりあえず"NullPointerException"について調べてその内容について考えたことを書いてみましょう。

Answer 1

自分が何を間違ったかを探そうとせずに漠然と検索しても何かが見付かることはないと思います。

NullPointerExceptionで止まっている行は
chart_accel.unshift("AccelX", m_sensor_data.AcclX);
ですね?
では、まずやることはいきなり「検索」ではなく、その行の精査でしょう。
登場するオブジェクトはchart_accelとm_sensor_dataですが、これらはnullではありませんか? それらがnullでないとすれば、処理の内部でnullPointerへのアクセスが発生していることになります。その切り分けをします。
まさにエラーの発生している呼び出し、Chart.unshiftに与えるパラメータは適切ですか? ドキュメントを調べましょう。unshiftの第一パラメータはオブジェクトのラベル(名前)のはずです。オブジェクトを生成したときのラベルと正確に一致していますか? こういうところはそれぞれバラバラにリテラル(定数)を書き込むのではなく、何らかの変数に(できれば定数/finalとして)値を与えて、その変数を共通に使うことで一致を確保すべきです。

その先もまだ色々ありそうですが、違うことを聞くなら質問を新しくしてくださいね。