배경

Arduino에서 취한 센서의 값을 Processing으로 시각화하고 싶은 경우가 상당합니다.
그래서 비망록으로 정리해 둡니다.

실행 환경

PC: MacBook Pro, macOS High Sierra
Arduino: Uno
Processing: version 3.3.6

예

이번에는 센서를 사용해 버리면, 기사의 독자가 곧바로 시험할 수 없을 가능성이 있기 때문에, Arduino측에서 생성한 난수를 Processing측에서 취득해 꺾은 선 그래프로서 플롯하는 것과 같이 했습니다.

Arduino 측 소스 코드

RandomValue

int randomValue1 = 0;
int randomValue2 = 0;
int randomValue3 = 0;

void setup() {
  Serial.begin(9600);
  randomSeed(analogRead(0));
}

void loop() {
  randomValue1 = random(20);
  randomValue2 = random(20);
  randomValue3 = random(20);
  Serial.print(randomValue1);
  Serial.print(",");
  Serial.print(randomValue2);
  Serial.print(",");
  Serial.println(randomValue3);
  delay(100);
}

Processing측의 소스 코드

RandomValueGraph

import processing.serial.*;
Serial port;

boolean DEBUG = false;
int[][] values = new int[3][100];
color[] colors = {color(244, 67, 54), color(67, 160, 71), color(25, 118, 210)};

void setup() {
  size(800, 500);
  frameRate(50);
  String[] ports = Serial.list();
  if (DEBUG) {
    for (int i = 0; i < ports.length; i++) {
      println(i + ": " + ports[i]);
    }
  } else {
    port = new Serial(this, ports[適切なポートの配列番号], 9600);
  }
}

void draw() {
  background(color(255, 255, 255));
  for (int i = 0; i < 3; i++) {
    stroke(colors[i]);
    for (int j = 0; j < 99; j++) {
      line(8 * j, 250 + values[i][j], 8 * (j + 1), 250 + values[i][j + 1]);
    }
  }
}

void serialEvent(Serial p) {
  if (p.available() > 0) {
    try {
      String input = p.readStringUntil('\n');
      if (input != null) {
        input = trim(input);
        String [] value = split(input, ',');
        println(value[0] +","+ value[1] +","+ value[2]);
        for (int i = 0; i < 3; i++) {
          values[i] = append(subset(values[i], 1), int(value[i]));
        }
      }
    } catch (RuntimeException e) {
    }
  }
}

조금 설명

Processing 측 소스의 DEBUG 변수를 true로 설정하면 직렬 포트 목록이 콘솔에 출력됩니다. 포트 번호를 적절히 전환하고 DEBUG 변수를 false로 설정하면 직렬 통신이 가능합니다.