[아두이노] Processing을 이용한 아두이노 제어 I

[아두이노] Processing을 이용한 아두이노 제어 I 

---

• 프로세싱 공식 홈페이지 : processing.org
• 프로세싱 온라인 편집기 : sketchpad

---

오늘은 즐거운 토요일입니다. 매주 토요일이면 재밌는 프로그램을 소개하는 날입니다. 이번주 소개 할 프로그램은 아두이노와 연결해서 재밌게 시각화 실험을 할 수 있는 프로그램입니다. 스크래치나 프로세싱으로 아두이노 제어하거나 결과를 시각화 하는데 많이 사용합니다. 잘 알려진 프로그램 툴이고 컴퓨터 공부를 좀 하신분들은 한번쯤은 다뤄봤을 툴이라고 생각되네요. 아두이노 처음 입문자분들은 아직 프로세싱에 대해서 잘 모르고 프로그램 언어 영역이라서 다루기 불편하실 수 있지만 그래픽 툴로서는 쉬운 편에 속하고 함수만 잘 활용한다면 재밌는 시각화 프로그램을 만들 수 있으니깐 한번 참고하시면 좋을 듯 싶네요.

좀 포스팅 내용이 길어질 수 있어서 나눠서 소개할까 합니다. 오늘은 간단히 프로세싱 소개를 하는 시간으로 채울 듯 싶네요.

1. Processing 다운로드

---

[ PC에 실치 ]

위에 공식 홈페이지에 다운로드 주소까지 링크 걸려있습니다. 들어가시면 자신의 운영체제에 맞게 다운로드 하시면 됩니다. 압축(zip) 파일을 다운로드 하시면 폴더를 만드시든 그냥 압축 파일명으로 압축된 파일을 푸시면 됩니다. 설치는 따로 사실 필요없이 폴더 안에 들어가서 실행파일을 누르시면 자동으로 실행 됩니다.

[ 라즈베리파이에 설치 ]

$ curl https://processing.org/download/install-arm.sh | sudo sh 

[출처] 라즈베리파이에 프로세싱 설치하기(작성자 코스모스)

라즈베리파이에 설치할때 잘 몰라서 이건 배우는 단계라서 두가 설치법이 있는데 구글링 해서 보니깐 코스모스님이 블로그에 간단하게 설치하는 법을 소개했네요. 이 한줄로 라즈베리파이에 프로세싱을 설치하여 현재는 재밌게 사용하고 있네요.

2. Precessing 웹 편집기

---

위에 링크된 sketchpad 사이트 가시면 온라인 상에서 프로세싱을 즐길 수 있습니다. 다운 받을 필요도 없고 회원가입을 할 필요도 없이 그냥 코딩 하고 싶을때 가셔서 코딩 하시면 됩니다.

3. 편집창

---

[ PC 편집기 ]

다운로드 받은후 압출파일을 풀고 실행파일을 실행 시키면 실행됩니다. 간단한 코딩을 넣고 실행한 창입니다.
나중에 아두이노 연결에 이 편집기를 이용할 예정입니다.

[ 온라인 편집기 ]

뭔가 코딩 되어 있으며 실행 버턴을 눌러보세요. 간단한 그래픽 쇼가 보여집니다. 간단한 예제로 시뮬레이터가 돌아간 모습을 보시고 코딩이 어떻게 했는지 한번 잘 살펴보세요.

4. Precessing의 문법 구조

---

void setup()
{
     초기화 명령이나 한번만 수행하는 명령들을 코딩;
}
void draw(){
    반복적으로 계속 그리는 동작명령들을 코딩;
}

아두이노랑 구조가 같습니다. 아두이노에서는 loop()함수이지만 프로세싱에서는 draw()함수입니다. 프로그램이 종료되기 전까지는 반복 호출되는 함수인 것죠.

5. Precessing의 간단한 버턴 예제

---

• 사용함수 : background(), size(), rect(), fill(), mousePressed()
• 내용 : 버턴 클릭 이벤트로 사각형의 색을 변경한다.

---

사용함수

• background(255) : 배경색인데 0~255로 검색에서 흰색사이의 색을 지정해줍니다.
• size(600,600) : 윈도우 사이즈
• rect(100,200,100,200,10) : 사각형을 그리기인데 rect(x1,y1,x2,y2,모서리)를 나타냅니다. 시작꼭지점(100,200) 얼마만큼 이동한 끝점(100,200)을 나타냅니다. 그리고 마지막 인자 10은 모서리를 매끄렇게 하는 값인데 안써도 상관없습니다. 그냥 rect(100,200,100,200)이렇게 해도 됨.
• fill(255,0,0) : 채우기 함수입니다. fill(R,G,B)값으로 생각하시면 됨
• mousePressed()은 마우스 버턴을 눌렀을 호출하는 함수임(다른 표현도 있지만 이정도만 이해하세요.)

간단한 버턴 클릭 예제

boolean cnt = false;

void setup() {  // this is run once.   
   
   // set the background color
   background(255);
   
   // canvas size (Integers only, please.)
   size(600, 600);       
   
} 

void draw() {  // this is run repeatedly.  
   rect(10,10,580,300,10);    
   rect(200,350,200,100,10);    
}

void mousePressed(){
if(mouseX>200 && mouseX<400 && mouseY>350 && mouseY <450){
    cnt=!cnt;
}

if(cnt==true)fill(255,0,0);
else fill(0,0,0);
}

코딩을 보시면 총 세개로 나눠 졌습니다. 온라인 편집기에 있는 소스를 최대한 안건들고 간단한 버턴 클릭하는 예제를 코딩해 봤습니다.

setup() 함수에서 윈도우 설정을 했는데 배경을 background(255)로 흰색을 지정하고 크기를 size(600,600)으로 600x600 크기로 만들었습니다.

draw()함수에서는 만든 윈도우에서 rect()함수로 사각형을 두개 그렸습니다.

대충 위 그림처럼 윈도우 600x600 크기의 창이 뜹니다. 그리고 그 안에 rect()로 만든 사각형이 2개 보이시죠. 여기서 아래 작은 사각형을 버턴으로 이용할 예정입니다.

작은사각형 이미지를 버턴이라고 생각하고 해당 버턴을 누를려면 마우스 버턴을 클릭했을때 이벤트가 발생해야 겠죠. mousePressed()함수를 사용합니다. 이 함수는 마우스가 클릭했을때 호출되는 함수입니다. 그안에 버턴을 클릭했을때의 이벤트 로직을 작성해야 합니다.

void mousePressed(){
  마우스 클릭했을 때 호출;
}

위 마우스가 클릭했을때 호출되는 함수인데 간단하죠.
작은사각형 이미지가 버턴으로 사용되기 때문에 작은사각형 이미지 안을 마우스로 클릭했을때 이벤트를 실행시키면 됩니다.

쉽게 설계를 하면

1. 사각이미지를 영역을 마우스로 클릭한다.
2. 마우스 클릭 이벤트 발생한다.

그러면 사각형을 마우스클 클릭했을때 이벤트가 발생해야 합니다. 여기서 마우스가 아무곳이나 클릭한다고 해서 클릭 이벤트가 발생하면 안됩니다. 마우스를 클릭했을때 mousePressed()함수가 호출된다고 해서 무조건 동작해서는 안되고 사각형 안에서만 클릭하도록 코딩을 짜야 됩니다. 클릭했을때 호출되니깐 그 마우스 클릭한 좌표(mouseX,mouseY)가 작은 사각형버턴 영역에서 클릭했냐로 체크하는 로직을 짜면 쉽게 사각형을 버턴으로 만들 수 있겠죠.

버턴을 마우스 클릭했을때 원리

   rect(200,350,200,100,10);    

이 사각형을 클릭하기 위해서 사각형의 영역을 클릭하는 영역으로 잡아 줘야 합니다.

X축을 기준으로 하면 초록색 범위가 마우스 클릭 할 X축의 영역이 됩니다. 즉, 꼭지점 x1에서 x2까지이죠.
Y축을 기준으로 하면 노란색 범위가 마우스를 클릭 할 Y축의 영역이 됩니다. 즉, 꼭지점 y1에서 y2까지이죠.

그러면 사각형이 그러진 영역은 X축과 Y축이 겹쳐지는 저 영역이 바로 버턴의 영역이 되는 것이죠.

이걸 코딩으로 하면

if(mouseX>x1 && mouseX<x2 && mouseY>y1 && mouseY <y2){
        사각버턴 영역을 클릭 했을때 처리문;
}

코드를 분석으을 해보죠.

먼저 윈도우 상에서 마우스 좌표(mouseX,mousY) 추출 할 수 있습니다. 즉, 이 변수명으로 현재 마우스가 위치를 알 수 있게 됩니다.

if(mouseX>x1 && mouseX < x2)

이게 뭘 말할까요. X축 기준으로 클릭 범위가 초록색 범위여야 하잖아요. 그러면 마우스가 클릭한 mouseX의 값은 x1보다 크고 x2보다는 작을때 위 그림에서의 초록색 영역이 됩니다. 그래서 두 조건식으로 클릭한 마우스 mouseX좌표가 x1보다 크고 x2보다 작은가를 조건문으로 해서 작은사각형 이미지의 X축 영역을 체크하는 것이죠. 마우스 Y좌표도 이와 같습니다.

참고로 '&&' 기호는 "그리고" 이고 '||' 기호는 "또는"라는 뜻입니다.

if(mouseX>x1 && mouseX<x2 && mouseY>y1 && mouseY <y2)

총 4개의 조건식으로 모두 만족한 영영이 바로 X축 영역과 Y축 영역이 겹쳐지는 교집합 영역으로 바로 윈도우창의 작은 사각형의 영역이 됩니다. 이 조건을 만족하면 마우스 좌표는 작은 사각형 영역에 위치해 있다는 의미가 됩니다.

 rect(200,350,200,100,10);    

윈도우에서 작은사각형은 P1(200,400), P2(350,450) 꼭지점의 영역을 갖습니다.
이부분을 햇갈리시는 분들이 있습니다. 시작점 P1은 (200,350) 입니다. P2은 (x1+x2,y1+y2) 입니다. 사각형의 시작점을 기준으로 하는게 아니라 윈도우상에서 작은사각형이 위치좌표는 윈도우좌표에서 접근해야 하기 때문에 윈도우 상에서 작은사각형의 좌표를 지정해야 합니다.

rect()함수는 시작점(x1,y1)을 기준으로 끝점(x2,y2)만큼 크기의 사각형이냐의 표현입니다. 즉, 끝점은 윈도우 좌표에서 시작점 (x1,y1)이 이동했고 거기서 다시 사각형이 끝점으로 이동하기 때문에 시작점까지 이동한 거리를 더해줘야 합니다. 그래서 P2(200,100)이 아니라 (200+200,350+100)해서 (400,450)이 끝점이 되는 것이죠.

그러면 윈도우 상에서 마우스(mouseX,mouseY)가 작은사각형의 좌표 영역에 들어갔는지 if문으로 아래와 같이 표현이 됩니다.

 if(mouseX>200 && mouseX<400 && mouseY>350 && mouseY <450)

마우스를 클릭했을때 mousePressed()함수가 호출되고 위 if문을 통해서 작은 사각형 영역에 마우스 좌표가 현재 위치해 있는지 확인하는 문장이 됩니다. 이렇게 해서 작은사각형 이미지는 버턴의 능력을 갖게 됩니다.

작은사각형을 버턴으로 표현을 했으면 실제로 간단하게 색상을 변경하는 명령을 내려봅시다. 2가지 색을 교대로 바꾸게 할려고 별도로 cnt라는 변수를 하나 선언 했네요. 참/거짓으로 부울변수를 만들어서 참일때 빨강색, 거짓일때 검은색으로 바꿔 볼려고 합니다.

boolean cnt =fasle;

체크변수로 초기값으로 false를 주고 클릭했을때

cnt=!cnt;

이 문장으로 변수값을 반전 시켰습니다. 거짓이면 참으로 참이면 거짓으로 반전 문장입니다. 이코딩은 작은 사각형을 클릭했을때 발동해야 하기 때문에 마우스클 클릭했을때 호출되는 함수에서 다시 if문 사각형 영역에 있는 지 확인 되었을때 그 안에다가 표현 해야겠죠. 간단히 그안에다 이 한줄을 삽입하면 됩니다. 참 쉽죠.

그다음 채우기 fill()함수를 이용해 사각형을 채우는 로직을 if문으로 간단히 표현했습니다.

 if(cnt==true)fill(255,0,0);
 else fill(0,0,0);

if문으로 cnt가 참이면 색채우기를 빨강색으로 fill(255,0,0)으로 cnt가 거짓이면 검정색으로 fill(0,0,0)으로 바꿔줍니다. 색을 작은사각형 버턴을 클릭할때마다 빨강색과 흰색이 계속 바뀌게 됩니다.

이렇게 해서 간단한 로직에 대해서 설명했습니다. 그런데 왜 fill()함수만으로 색이 바꿔지는이 햇갈리는 분들이 아마 있을거에요. draw() 함수에서 매번 호출된다고 했는데 그안에서는 사각형 2개를 그립니다. 그리기 전에 사각형의 채우기 색을 지정해주면 그릴때마다 사각형의 색을 바꿀 수 있게 된다는 원리를 이용한거니 어렵게 생각하지 마세요.

쉽게 말해서,

• cnt가 true 인 경우

fill(255,0,0)
rect(10,10,580,300,10);    
rect(200,350,200,100,10);  

• cnt가 false 인 경우

fill(0,0,0)
rect(10,10,580,300,10);    
rect(200,350,200,100,10);  

이렇게 마우스를 클릭할때마다 색이 변경되어 그려진다는 것이죠. 어떤 느낌이신지 아시겠지요.

그래서 마우스클릭 이벤트 함수에서 작은사각형의 이미지를 클릭했다면 그안에다가 fill()함수로 draw()함수로 그리기 전에 채우기 색을 지정하면 쉽게 색상을 바꾸게 되는 것이죠.

결과

---

이걸로 아두이노랑 연결해서 버턴이미지를 클릭 할 때 빨강색으로 바꾸고 Red LED에 불이 들어오게 하고 다시 클릭 하면 검정색으로 바뀌게 해서 Red LED를 깜박이게 제어할 예정입니다.

---

마무리

---

많은 예제 중에서 왜 이런 예제를 설명하냐면요 다음편에 아두이노와 연결해서 이 예제로 간단히 LED를 On/Off 버턴으로 활용하기 위해서 입니다.
작은사각형 이미지를 클릭이벤트를 활용하여 큰 모니터 사각형과 버턴 사각형이 색이 빨강색으로 바뀌면 Red LED에 불이 들어오고 검은색으로 바뀌면 Red LED가 꺼지는 스위치버턴으로 활용하기 위해서이죠.
바로 프로세싱으로 간단히 아두이노를 제어하고 그 제어하는 방법을 이해하면 프로세싱을 통해서 아두이노를 시각화 할 수 있다는 것을 이 예제를 통해 소개하기 위해서 입니다.

오늘은 온라인 상에서 프로세싱을 간단히 다뤄보세요. 구글링 치면 강좌도 많고 간단히 함수들을 불러다가 배치해서 시각화 해보세요.