====== 아두이노 그대로 따라하기 - 5.프로세싱과 연동하기 ======

아두이노의 쓰임새는 매우 다양하다. 하드웨어의 경우 각종 쉴드(Sheild)가 있어 여러가지 통신 인터페이스를 제공하고 있고, 소프트웨어의 경우 여기서 소개할 프로세싱이라는 언어로 PC 와 인터렉티브(interactive)한 통신이 가능하다.
====== 준비운동하기 ======
프로세싱은 아두이노와 시리얼 인터페이스로 통신한다. 이 채널을 통해 데이터를 주거나 받고 이를 가공해서 화면에 그리거나 데이터를 출력한다.
앞으로 아두이노와 프로세싱이 연동하는 예제들을 살펴볼 것이다.
====== 데이터 스트림을 시각화하기 ======
아두이노로부터 보내지는 데이터를 시각화는 예제를 살펴보겠다.
먼저 회로를 아래 그림처럼 만든다.

{{ :computer:embedded:ldr.jpg |}}

===== 프로세싱 코드 =====
<code text>
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;
  }
}
</code>
위 코드는 화면이 두 부분으로 나뉘면서, 광감지 센서를 통해 들어오는 원래의 데이터는 위쪽에 표시하고 평균값으로 부드럽게 처리한 신호는 아래쪽에 표시한다.
===== 아두이노 코드 =====
<code text>
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);
}
</code>
위의 코드에서 유의 할 것은 보내는 함수와 데이터 타입을 byte 형으로 치환하는 것이다.

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

각각 1 번과 2번을 각각 주석을 풀고 제대로된 값이 읽히는지 확인해보자. 2번의 경우 엉뚱한 값이 찍힌다. 
빛의 변화를 주면, 그림의 곡선에 변화가 생길 것이다.
====== 데이터를 보는 또다른 방법 ======
앞의 예제에서 그렸던 그래프를 마치 레이더 화면처럼 표현해보자.
===== 프로세싱 코드 =====
<code text>
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;      ---- ①
}
</code>
sin() 과 cos() 함수를 사용하여 원형 패턴으로 시각화했다. 원 둘레를 돌며 현재의 값을 그리는 선을 움직이기 위해 angle 변수가 계속 업데이트되며, val 변수는 움직이는 선의 길이를 조정하여 화면의 중심으로부터 선이 얼마나 먼지 거리를 설정한다. 원을 한 바퀴 돈 다음에는 이전 데이터 위에 새로운 값을 덮어쓴다. 

{{ :computer:embedded:pro2.jpeg |}}

----
{{indexmenu>:#1|skipns=/^(wiki|etc|diary|playground)$/ skipfile=/^(todays|about|guestbook)$/ nsort rsort}}
----