[아두이노] Processing를 이용한 아두이노 제어 III

IOT/아두이노|2019. 3. 12. 09:00

[아두이노] Processing를 이용한 아두이노 제어 III 



세번째 시간으로 이제는 프로세싱과 아두이노 두 곳에서 개별적으로 코딩하고 시리얼통신을 이용해서 데이터를 주고 받아서 제어하는 방법을 살펴보겠습니다. 기본적으로 아두이노는 원래의 코딩 방식으로 코딩하면 됩니다. 변경되는 부분은 없고 단지 시리얼통신을 할 수 있도록 세팅만 해주면 됩니다. 프로세서는 시리얼통신 부분만 코딩해주고 프로세스는 그래픽 코딩만 중점적으로 하면 됩니다. 쉽게말해서 각자의 역할만 하고 단지 시리얼통신이라는 매개체로 연결된다고 생각하시면 됩니다.

1. Processing + Arduino



[ LED 깜박이는 예제 ]

void setup() {
  pinMode(13, OUTPUT);
}

void loop() {
  digitalWrite(13, HIGH);
  delay(1000);             
  digitalWrite(13, LOW);
  delay(1000);   
}

LED 깜박이는 기본 예제를 통해서 프로세싱과 아두이노의 역활을 나눠 보겠습니다. 프로세싱에서는 스위치 역활로 LED가 1초단위로 깜박이도록 명령을 내리고 아두이노는 그 명령을 받아서 LED를 깜박이게 하도록 역활을 나눠 보겠습니다.

아래 그림처럼 프로세싱는 시리얼통신을 통해 아두이노에게 LED 상태값을 보내고 아두이노는 이 값을 읽어서 LED를 깜박이게 하는 합니다. 1초 단위로 깜박이는 제어권은 프로세싱에게 있고 아두이노는 프로세싱의 명령에 따라서 LED의 상태변화만 시키게 됩니다.



[ Prcessing 코딩 ]

import processing.serial.*; 

Serial mPort;

void setup() {  
    println(Serial.list());
    mPort = new Serial(this, Serial.list()[0], 9600);   
} 
void draw() {  
  mPort.write(1);
  delay(1000);
  mPort.write(0);
  delay(1000);
}

시리얼통신 라이브러리를 가져옵니다. 그리고 Serial 클래스를 하나의 객체 변수(mPort)로 선언하고 인스턴트 해야합니다. mPort = new Serial(this, Serial.list()[0],9600) 이렇게 해서 시리얼통신 객체가 만들어 집니다.

이걸 통해서 mPort.write(1)은 byte전송 명령함수인데 print(), println()으로 그동안 써왔지만 이번에는 write()함수를 사용해 봅니다.

이곳에 가셔서 시리얼통신 함수들을 보시고 사용하시면 됩니다.

프로세싱에서 1초 단위로 깜박이는 명령 시리얼통신을 통해서 1(HIGH)과 0(LOW)값을 아두이노로 보냅니다.

[ Arduino 코딩 ]

void setup(){
  Serial.begin(9600);
  pinMode(13,OUTPUT);
}

void loop(){
  byte val;
  
  if(Serial.available()) {  
    val = Serial.read();
    
    digitalWrite(13,val);
  }
}

아두이노는 if 조건문으로 Serial.available()함수로 통신 데이터가 들어왔는지 확인하는 문장입니다. 데이터 들어 왔다면 0이 아니고 데이터가 들어오지 않았다면 이 Serial.available()함수의 반환되는 값은 0으로 if문 이하를 수행하지 않습니다. 쉽게 말해서 통신을 통해 데이터가 도착했다면 참이고 도착하지 않았다면 거짓이다 이걸 체크한다고 생각하세요.

데이터가 도착했으면 Serial.read()함수로 데이터를 읽습니다. 아두이노에서 read라는 단어가 보이면 뭘 읽는 함수구나 하고 생각하시면 됩니다. 프로세싱에서 넘어 온 1과 0의 값이 val 변수에 저장됩니다. 프로세싱에서 byte 단위로 숫자를 전송했고 아두이노에서는 byte변수로 그 값을 받아서 저장하게 됩니다.

실제아두이는 통신을 통해서 1과 0을 읽어 오고 그 값을 기준으로 LED를 On/Off 하게 됩니다.

  digitalWrite(13,val);

이 한문장이 아두이노가 하는 역활입니다. 그러면 반대의 경우도는 온도센서가 있는데 그 온도 값을 프로세싱에 보내서 시각화 하고 싶다면 방금한 시리얼통신 코딩부분을 아두이노에서 보내고 프로세싱에서 읽도록 바꿔서 코딩하면 되겠죠.


3. 간단한 버턴클릭 예제로 아두이노 LED 제어


두번째 시간에는 프로세싱에서 아두이노 동작제어하는 코딩까지 전부 했었습니다. 위에서 프로세싱과 아두이노가 개별적으로 코딩하고 시리얼통신으로 주고 받은 LED 깜박이는 예제처럼 코드를 변경해 보죠.


[ Prcessing 코딩 ]

import processing.serial.*;

Serial mPort;
boolean cnt = false;

void setup() {  // this is run once.   

    // set the background color
    background(255);
    
    // canvas size (Integers only, please.)
    size(600, 600); 
    
    println(Serial.list());
    mPort = new Serial(this, Serial.list()[0], 9600);  
    
} 

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);
   mPort.write(1);
 }
 else{
   fill(0,0,0);
   mPort.write(0);
 }
}

(기본 예제)

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);
}

이 소스에서 프로세싱에서 아두이노 문법을 위에서 설명했으니 기본 예제 소스에다가 아래 코딩 부분을 삽입하시면 됩니다.

import processing.serial.*;

Serial mPort;

void setup() {  // this is run once.   

    println(Serial.list());
    mPort = new Serial(this, Serial.list()[0], 9600);  
    
} 

void draw() {  // this is run repeatedly.  

}

void mousePressed(){
     mPort.write(1); 
 }
}

여기서, mPort.write(값)은 버턴을 눌렀을때 색상을 바꾸는 곳에다 LED 제어한 부분에 아두이노로 데이터를 전송하는 명령을 삽입하면 되겠죠.

if(cnt==true) {
   //arduino.digitalWrite(ledPin,Arduino.HIGH); 
     mPort.write(1);
   fill(255,0,0);
    }
 else{
   //arduino.digitalWrite(ledPin,Arduino.LOW);
     mPort.write(0);
   fill(0,0,0);
     
 }

[ Arduino 코딩 ]

void setup(){
  Serial.begin(9600);
  pinMode(13,OUTPUT);
}

void loop(){
  byte val;
  
  if(Serial.available()) {  
    val = Serial.read();
    
    digitalWrite(13,val);
  }
}

아두이노는 코드가 동일합니다.

결과는 아래 사진처럼 정상적으로 동작 했습니다.


6. 결과


라즈베리파이에 프로세싱과 아두이노 IDE를 설치해어 그곳에서 실험한 과정을 녹화 했네요. 간단히 살펴보도록 하세요.

마무리


프로세싱 툴이 시각화 하기에 재밌는 프로그램 입니다. 그리고 그 프로세싱을 두가지 형태로 아두이노를 접근 할 수 있습니다. 사용하기에 따라 장단점이 있습니다. 첫번째 프로세싱이 아두이노 코딩까지 전부하게 되면 코딩량이 늘어나고 복잡해 질 수 있지만 프로세싱에서 직접 제어하니깐 빠르게 부품 제어와 시각화 코딩을 진행 할 수 있습니다. 하지만 프로세싱과 아두이노가 개별적으로 코딩이 들어가면 매 실험때마다 아두이노는 프로세싱에 맞춰서 코딩하고 아두이노 코딩과 프로세싱 코딩을 맞추는 작업을 계속 해야 하는 단점이 발생 합니다. 프로세싱과 아두이노가 개별적으로 코딩해야한다는 장점이자 단점이 될 수 있습니다.

그러면 프로세싱에서 무조건 코딩을 전부하는게 좋냐고 물으신다면 꼭 그렇지는 않습니다. 아두이노 코딩은 기존의 방식으로 그대로 진행하면 됩니다. 이미 코딩된 형태에서 변경할 필요 없이 시리얼통신 부분만 코딩해주면 서로 통신데이터를 주고 받으면서 제어를 하면 되기 때문에 심풀하게 아두이노코딩만 신경쓰면 됩니다. 프로세싱도 아두이노로 보낼 데이터나 받을 데이터만을 기준으로 시각화 하면 되니깐 구지 아두이노 코딩까지 신경 쓸 필요가 없어집니다. 괜히 한곳에서 합쳐지면 가독성도 떨어지고 복잡해 보이고 불편한 코딩이 될 수 있습니다.

둘다 장단점이 있고 자신이 코딩하기에 편한 걸 선택하셔서 실험 하시면 됩니다.


댓글()

[아두이노] Processing를 이용한 아두이노 제어 II

IOT/아두이노|2019. 3. 11. 09:00

[아두이노] Processing를 이용한 아두이노 제어 II 



두번째 시간으로 프로세싱을 통해 아두이노를 직접 제어하는 방법을 살펴보도록 하겠습니다.

1. Processing 세팅


[1단계] 도구->추가도구 설정 눌러 줍니다.


[2단계] 라이브러리에서 arduino라고 치시면 아래 그림처럼 검색되는데 하당 라이브러리를 선택하시고 Install 하시면 됩니다.


[3단계] 프로세싱 편집기를 종료하시도 다시 실행 시킵니다. 그리고 파일->예제를 누르시면 따로 창이 뜨고 Arduino(Firmata) 가 추가된 것을 보실 수 있을거에요.


아무 예제나 클릭하시면 되는데 좀 코딩량이 많습니다. 그래서 간단히
[4단계] https://playground.arduino.cc/Interfacing/Processing 이곳 주소로 가시면 프로세싱 예제가 있습니다.

프로세싱 편집기에 그래도 코딩하시면 됩니다.


2. 아두이노 세팅


[1단계] 파일->예제->Firmata -> StandardFirmata 를 눌러줍니다.


[2단계] 예제가 뜨고 이걸 아두이노에 이식 시키면 됩니다.


3. Processing + Arduino


아두이노에서 StandardFirmata를 아두이노에 이식 시키고 Processing은 Arduino(firmata) 라이브러리를 설치해서 아두이노 라이브러리를 통해서 실제 아두이노를 직접 제어하게 됩니다.


쉽게말해서 아두이노는 프로세싱을 받을 준비를 해놓고 프로세싱에서는 직접 아두이노 함수를 통해 제어를 하게 된다고 생각하시면 됩니다.

4. Processing에서 아두이노 문법


import processing.serial.*;
import cc.arduino.*;

Arduino arduino;
int ledPin=13;

void setup() {  
  println(Arduino.list());
  arduino = new Arduino(this, Arduino.list()[0], 57600);
  arduino.pinMode(ledPin, Arduino.OUTPUT);
}

void draw() {
  arduino.digitalWrite(ledPin,Arduino.HIGH);
  delay(1000);
  arduino.digitalWrite(ledPin, Arduino.LOW);
  delay(1000);  
}

소스로 설명드리겠습니다. 아두이노 LED 깜박이는 기본베이스 소스입니다.

기본적으로

import processing.serial.*;
import cc.arduino.*;

통신과 아두이노 라이브러리를 가져오게 와야겠죠. 그리고 아두이노 클래스를 사용할때 클래스 객체를 선언해야합니다.

Arduino arduino;
arduino = new Arduino(this, Arduino.list()[0], 57600);

클래스 객체를 선언하고 객체를 인스턴트 합니다. 쉽게 말해서 객체를 만들고 초기화 한다고 생각하세요.

그다음 아두이노에서 쓰던함수들은 객체명.함수 함수로 객체가 앞에 연결자로 모두 표현해야 합니다. 아두이노 클래스내에 아두이노 함수들이 있으니깐 객체.함수() 해야지 객체속의 함수를 호출할 수 있게 됩니다.

pinMode(13,OUTPUT) => arduino.pinMode(13,Arduino.OUTPUT);

됩니다. 무슨 의미인지 아시겠지요. delay(1000) 이것은 왜 안붙이냐 오타이냐 할 수 있는데. 프로세싱에서도 있는 함수임으로 붙이지 않습니다.

임포턴트하는 것과 객체 선언한것만 이해하시면 간단 합니다.

5. 간단한 버턴클릭 예제로 아두이노 LED 제어


지난시간에 만들어 봤던 작은사각형 클릭했을때 사각형들의 색상을 바꾸는 예제를 아두이노 LED를 On/Off 시키는 스위치 버턴으로 사용하겠습니다.

예제)

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);
}

이 소스에서 프로세싱에서 아두이노 문법을 위에서 설명했으니 해당 위치에 넣으시면 됩니다.

mport processing.serial.*;
import cc.arduino.*;

Arduino arduino;
int ledPin=13;

boolean cnt = false;

void setup() {  // this is run once.   
    
    // set the background color
    background(255);
    
    // canvas size (Integers only, please.)
    size(600, 600); 
        
    //println(Arduino.list());
  arduino = new Arduino(this, Arduino.list()[0], 57600);
  arduino.pinMode(ledPin, Arduino.OUTPUT);
    
} 

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) {
   arduino.digitalWrite(ledPin,Arduino.HIGH);
   fill(255,0,0);
    }
 else{
   arduino.digitalWrite(ledPin,Arduino.LOW);
   fill(0,0,0);
 }
}

버턴을 눌렀을때 색상을 바꾸는 곳에다 LED 제어해야겠죠.

if(cnt==true) {
   arduino.digitalWrite(ledPin,Arduino.HIGH);
   fill(255,0,0);
    }
 else{
   arduino.digitalWrite(ledPin,Arduino.LOW);
   fill(0,0,0);
 }

딱히 수정할 것은 없습니다. 아두이노 소스를 해당 위치에다만 삽입하면 됩니다.

6. 결과


프로세싱과 아두이노에 코드를 복사하고 실제 동작하는 전과정을 담았습니다. 동영상을 보는게 더 쉽게 와 닿을지 모르겠네요.

마무리


종합해 보면, 아두이노에서 StandardFirmata를 아두이노에 이식 시키고 Processing은 Arduino(firmata) 라이브러리를 설치해서 아두이노 라이브러리를 통해서 StandardFirmata를 이식된 아두이노를 직접 제어를 하게 됩니다.

이 방법은 아두이노에서 코딩을 할 필요가 없습니다. 프로세싱에서 그래픽 시각화와 아두이노 제어를 둘 다 할 수 있습니다.

또 다른 방법은 시리얼통신으로 서로 데이터를 주고 받는 방법이 있습니다. 프로세싱과 아두이노가 데이터를 주고 받으면서 제어할 데이터 또는 시각화 데이터를 서로 시리얼통신으로 통해 주고 받는 방식이 있습니다.
이 경우는 아두이노는 아두이노 코딩만 하면 되고 프로세싱은 프로셋이 코딩만 하면 됩니다. 그 중간 연결을 통신이 대신 하는 것이죠.

우선은 오늘 배운 프로세싱에서 아두이노를 제어하는 방법만 이해해 주시고 다음에 따로 통신을 통해 데이터를 주고 받는 방식을 살펴보도록 하겠습니다.


댓글()

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

IOT/아두이노|2019. 3. 10. 09:00

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



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

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

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가 꺼지는 스위치버턴으로 활용하기 위해서이죠.
바로 프로세싱으로 간단히 아두이노를 제어하고 그 제어하는 방법을 이해하면 프로세싱을 통해서 아두이노를 시각화 할 수 있다는 것을 이 예제를 통해 소개하기 위해서 입니다.

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

댓글()