프로세싱은 아두이노와 시리얼 인터페이스로 통신한다. 이 채널을 통해 데이터를 주거나 받고 이를 가공해서 화면에 그리거나 데이터를 출력한다.
앞으로 아두이노와 프로세싱이 연동하는 예제들을 살펴볼 것이다.

아두이노로부터 보내지는 데이터를 시각화는 예제를 살펴보겠다.
먼저 회로를 아래 그림처럼 만든다.

import processing.serial.*;
 
Serial port;
float val;
int x;
float easing = 0.05;
float easedVal;
 
void setup()
{
  size(440, 440);
  frameRate(30);
  smooth();
 
  String arduinoPort = Serial.list()[0];
  port = new Serial(this, arduinoPort, 9600);
  background(0);
}
 
void draw()
{
  if(port.available() > 0)      // 만약 데이터가 가용하다면
  {
    val = port.read();           //  데이터를 읽어서 val 에 저장한다
    val = map(val, 0, 255, 0, height);        // 그 값을 변환한다
 
    println(val);                        ---- ③
 
  }
 
  float targetVal = val;
  easedVal += (targetVal - easedVal) * easing;
 
  stroke(0);
  line(x, 0, x, height);          // 검은 선
  stroke(255);
  line(x+1, 0, x+1, height);       // 흰 선
  line(x, 220, x, val);              // 원 데이터
  line(x, 440, x, easedVal + 220);         // 평균 값의 데이터
 
  x++;
  if(x>width)
  {
    x = 0;
  }
}

위 코드는 화면이 두 부분으로 나뉘면서, 광감지 센서를 통해 들어오는 원래의 데이터는 위쪽에 표시하고 평균값으로 부드럽게 처리한 신호는 아래쪽에 표시한다.

int sensorPin  = 0;
int val = 0;
 
void setup()
{
  Serial.begin(9600);
}
 
void loop()
{
  val = analogRead(sensorPin)/4;
  Serial.write((byte)val);                ---- ①
  //Serial.println(byte);                    ---- ②   
  delay(100);
}

위의 코드에서 유의 할 것은 보내는 함수와 데이터 타입을 byte 형으로 치환하는 것이다.

1. 센서에서 읽은 값을 byte 형으로 시리얼 포트로 내보낸다.
2. 시리얼 포트에 byte 값을 출력한다.
3. 프로세싱 코드에 읽은 값을 출력한다.

각각 1 번과 2번을 각각 주석을 풀고 제대로된 값이 읽히는지 확인해보자. 2번의 경우 엉뚱한 값이 찍힌다.
빛의 변화를 주면, 그림의 곡선에 변화가 생길 것이다.

앞의 예제에서 그렸던 그래프를 마치 레이더 화면처럼 표현해보자.

import processing.serial.*;
 
Serial port;
float val;
float angle;
float radius;
 
void setup()
{
  size(440, 440);
  frameRate(30);
  strokeWeight(2);
  smooth();
 
  String arduinoPort = Serial.list()[0];
  port = new Serial(this, arduinoPort, 9600);
  background(0);
}
 
void draw()
{
  if(port.available() > 0)
  {
    val = port.read();
    radius = map(val, 0, 255, 0, height * 0.45);    // val 값을 변환하여 반지름을 설정한다
 
    //println(val);
  }
  int middleX = width/2;
  int middleY = height/2;
 
  float x = middleX + cos(angle) * height/2;
  float y = middleY + sin(angle) * height/2;
  stroke(0);
  line(middleX, middleY, x, y);
 
  x = middleX + cos(angle) * radius;
  y = middleY + sin(angle) * radius;
  stroke(255);
  line(middleX, middleY, x, y);
 
  angle += 0.01;      ---- ①
}

sin() 과 cos() 함수를 사용하여 원형 패턴으로 시각화했다. 원 둘레를 돌며 현재의 값을 그리는 선을 움직이기 위해 angle 변수가 계속 업데이트되며, val 변수는 움직이는 선의 길이를 조정하여 화면의 중심으로부터 선이 얼마나 먼지 거리를 설정한다. 원을 한 바퀴 돈 다음에는 이전 데이터 위에 새로운 값을 덮어쓴다.