아두이노에서 프로세싱에 데이터를 전송하고 그래프로 표현하기

 

아두이노가 송신을 하고 프로세싱이 수신을 한다.

아래는 아두이노에서의 소스 코드이다.

아두이노와 프로세싱의 통신에서 가장 중요한 것은 아두이노에서의 포트번호가 중요하다.

아두이노 프로그램에서 [툴]을 선택하고 포트를 확인하면 된다.

아래는 '1'과 '0'을 계속 송신한다.

위는 아스키  코드 값이 49와 48이다.

즉, '1' = 49, '0' = 48이다.

아두이노 소스 코드

//  데이터는 바이트 형태로 전송된다. 0xFF등과 같은 16진수로 표현
void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
}

void loop() {
  // put your main code here, to run repeatedly:
  // Serial.print("1");

  Serial.write('1');
  
  delay(1000);

  //  Serial.print("0");

  Serial.write('0');
  
 delay(1000);
}

 

 

 

프로세싱은 단순히 값을 읽어서 출력을 하는 내용이다.

49와 48값을 교대로 출력함을 볼 수 있다.

프로세싱 소스 코드

//  java syntax
import processing.serial.*;

Serial port;

void setup()
{
  port = new Serial(this, "COM6",9600);
}

void draw()
{
  if (port.available() > 0)
  {
    int c = port.read();
    
    println(c);
    
    delay(100);
  }
}

 

 

 

아두이노에서는 '1'과 '0'을 송신해주고 있는데, 프로세싱에서는 이를 수신하고 있다.

이는 하나의 디지털 정보를 받는 것으로 볼 수 있으며, 이를 아래와 같이 그림으로 출력해보자. 

데이터가 있을 때는 High 상태를, 데이터가 없으면 Low 상태인 것으로 세팅을 한다.

여기서 중요한 것은 출력 화면 창의 좌측상단이 원점이라는 사실이다.

즉, High 상태를 표현하려면, Low일 때보다 값이 작아야 한다.

그리고 curX, curY라는 두 좌표를 이용해서 시간이 흐르는 표현은 curX를 적당히 증가시키면 된다.

이에 따라 line함수를 이용하여 아래의 그림으로 나타내면 된다.

프로세싱 소스 코드

import processing.serial.*;

Serial port;

int prevX = 10;  //  previous x pos
int prevY = 300; //  previous y pos 

int curX = 10;    // cur x pos
int curY = 300;   // cur y pos
int data = 0;     // value 

void setup()
{
  size(800,400);
  
  port = new Serial(this, "COM6",9600);
  
  line(prevX, prevY, curX, curY);
  
  delay(4000);  //  for having enough time
}

void draw()
{ 
  int c = port.read();
  
  println(c);
  
  if (c == '1')       data = 100; 
  else if (c == '0')  data = 300;
  
  curX += 1;    //  move curX like time
  curY = data;  //  set data
  
  line(prevX, prevY, curX, curY);
  
  prevX = curX; //  save curX
  prevY = curY; //  save curY
}