[아두이노] Calibration의 의미

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/
• 아두이노공식 홈페이지 튜토리얼 : https://www.arduino.cc/en/Tutorial/Calibration
• 공개회로도 : https://www.tinkercad.com/things/g9mKc1IdOu8

오늘은 Calibration의 대해서 알아보고자 합니다. 우리가 Sensor를 사용하면 처음에 Sensor의 입력값에 대한 초기 보정이 필요하다고 이야기 한 적이 있을 꺼에요. 대표적으로 마이크사운드감지센서가 떠오르는군요. 이 Sensor의 초기 값은 처음 찍어보기 전까지는 알 수 없습니다. 그러면 코딩을 할 때 초기 Sensor의 값을 찍어봐야 알 수 있고 그 찍힌 값을 기준으로 코딩을 해야 합니다. 참 번거로운 코딩이 되겠죠. 그리고 같은 Sensor라도 초기값이 제각각 입니다. 대개 아날로그 신호를 출력하는 Sensor은 가변저항이 붙어 있어서 초기 값이 약간씩 차이를 보이고 이 가변저항을 돌리면 초기값이 변경 되기 때문에 미리 코딩을 해놓으면 초기 Sensor값이 다르기 때문에 원치 않는 동작을 수행 할 수 도 있겠죠. 이런 문제를 해결하기 위해서 Calibration라는 의미의 교정 작업을 코딩으로 표현할 수 있습니다. 이제부터서 Calibration에 대해서 자세히 살펴보도록 하겠습니다.

1. Calibration이란,

교정의 의미로 아두이노가 처음 전원이 공급되면 사용 할 부품에 대한 값에 대한 교정을 수행하기 위한 코딩입니다. 우리가 그래픽카드를 사면 젤 먼저 그래픽드라이버를 설치하고 모니터의 해상도를 설정 하잖아요. 여기서, 모니터의 해상도를 설정하는 작업을 교정작업이라고 생각하면 될 듯 싶네요. 실제 모니터의 해상도 작업이 아니라 의미적으로 그런 느낌의 작업을 처음에 수행하는 것을 Calibration이라고 의미적으로 이해하시면 될 듯 싶네요.

아두이노에서 Calibration의 작업은 Sensor의 초기값이나 초기 측정된 값에 대한 범위 지정을 설정하는데 주로 이용합니다. 즉, 초기 Sensor의 값을 기준점을 잡거나 기준 범위를 설정할 때 수행 합니다.

예를들어,

조도센서가 있다면 현실 환경에서는 측정되는 환경의 조건에 따라 그 값이 일정범위로 유지 되잖아요. 그러면 구지 전체 범위의 0~1023의 값의 기준으로 동작제어를 할 필요가 없습니다. 현재 환경에서 조도센서가 필요한 영역에 맞게 동작제어를 하면 효율적인 제어를 할 수 있겠죠. 그러면, 측정되는 조도센서값에서 동작 제어 값의 범위를 교정작업을 통해 최소~최대값을 잡아놓으면 그 값의 범위에 맞게 수행되기 때문에 정교하게 제어를 할 수 있게 됩니다.

또한, 마이크사운드감지센어의 경우에서도 가변저항기의 초기 값이 제각각이니깐 초기 값을 일정시간 동안 측정하고 측정된 값으로 교정하면 교정된 값이 기준이 되고 그 기준을 통해 마이크사운드감지센서의 소리가 입력에 대해 맞춰서 동작을 제어할 수 있게 됩니다.

예)

 int soundSensor =analogRead(A0);
    if(soundSensor>100) 작업명령1;
      else if(SoundSensor>50) 작업명령2;
        else 작업명령3;

이런 코드가 있다면 soundSensor 초기값이 만약 51이면 위 코딩에서는 else문을 절대 수행 할 수 없습니다. soundSensor 초기 값이 39면 else문을 수행 할 수 있지만 뭔가 너무 낮은 값에서 시작하기 때문에 조건식 100, 50의 비교가 옳바른지를 판단하기 애매합니다. 정확한 의미 전달의 작업명령을 하기 위해서는 어떻게 해야해야 할가요. 즉 초기의 soundSensor의 값을 기준으로 비교하는 값을 교정해야면 soundSensor의 값에 맞게 동작하겠죠.

SoundSensor의 초기 측정을 5초동안 수행해서 얻어진 평균값을 기준으로 해서

s = 기준값- 5초동안 측정한 평균값;

에서,

   if(soundSensor>100-s) 작업명령1;
      else if(soundSensor>50-s) 작업명령2;
        else 작업명령3;

이렇게 하면 대충 SoundSensor의 초기값에 맞게 작업명령을 수행하겠죠. 이렇게 교정하는 과정을 Calibration이라고 생각하시면 됩니다. 약간 의미의 느낌이 보정에 가까워져 버렸네요. 아두이노가 어떤 명령을 수행하기 위한 범위를 미리 잡아놓고 작업을 교정으로 생각하시면 될 듯 싶네요.

이제 본격적으로 실험을 해보도록 하겠습니다.

2. 회로도 구성

• 준비물 : - 조도 센서 1개, 저항 10K옴 1개, 아두이노우노, 뻥판
• 내용 : 아날로그핀에 조도센서의 입력 받을 수 있게 연결 한다.

저는 A0핀에 조도센서의 입력을 받도록 연결 했습니다.

3. 코딩

• 내용 : 조도센서에서 일정시간동안 측정하고자 하는 최소~최대값을 범위를 측정한다.

함수

• analogRead(아날로그핀) : 0~1023의 아날로그 신호를 읽음
• millis() : 현재 타이머 시간값 반환
• map(입력값, 입력최소값, 입력최대값, 출력최소값, 출력최대값) : 입력값이 입력 최소~최대값의 어느 위치이고 그 위치에 매칭되는 출력 최소~최대값 사이의 값을 반환한다.
• constrain(입력값, 최소값, 최대값) : 입력값이 최소값보다 적을 경우 최소값에 수렴하고 입력값이 최대값보다 클 경우 최대값에 수렴한다.
  예로 constrain(3, 0, 10)이면 3이 반환, constrain(-3, 0, 10)이면 0이 반환, constrain(15, 0, 10)이면 10이 반환

Serial 통신

- Serial.begin(9600) : 시리얼통신 시작
- mySerial.print(값) : 값을 시리얼모니터로 출력하지만 커서는 현재 라인에 계속 유지.
- mySerial.println값) : 값을 시리얼 모니터로 출력하지만 커서는 새로운 라인으로 이동. 

• 소스 출처 : https://www.arduino.cc/en/Tutorial/Calibration

const int sensorPin = A0;
int sensorValue = 0;      
int sensorMin = 1023;     
int sensorMax = 0;       

void setup() {
  Serial.begin(9600);
  
  while (millis() < 5000) {
    sensorValue = analogRead(sensorPin);

    if (sensorValue > sensorMax) {
      sensorMax = sensorValue;
    }
 
    if (sensorValue < sensorMin) {
      sensorMin = sensorValue;
    }
  }  
}

void loop() {
  
  sensorValue = analogRead(sensorPin);   
  sensorValue = map(sensorValue, sensorMin, sensorMax, 0, 255);  
  sensorValue = constrain(sensorValue, 0, 255);

  Serial.print(sensorMin);
  Serial.print(" ");
  Serial.print(sensorMax);
  Serial.print(" ");
  Serial.println(sensorValue);  
}

제 블로그에도 소개한 적이 있는데 다시 소개하게 되었네요. loop문에서 사용 될 sensorMin과 sensorMax의 값을 교정작업을 setup() 함수에서 수행이 됩니다. Calibration의 동작은 setup()함수의 while()문이니깐 어떻게 교정되는지 잘 살펴 볼까요.

int sensorMin = 1023;     
int sensorMax = 0;      

  while (millis() < 5000) {
    sensorValue = analogRead(sensorPin);

    if (sensorValue > sensorMax) {
      sensorMax = sensorValue;
    }
 
    if (sensorValue < sensorMin) {
      sensorMin = sensorValue;
    }
  }  

위 코딩은 최소값을 1023으로 하고 최대값 0으로 초기값으로 while()문에 들어갑니다. 이때 while()함수의 조건식은 millis() 함수의 값이 5초보다 작을 때까지 참이 되는 문장입니다. 여기서, millis()은 시간함수로 아두이노에 전원이 공급되는 순간부터 0부터 시작하여 타이머가 돕니다. 시간값을 1000당 1초라고 생각하시면 됩니다. 처음 전류가 공급되니 0부터 시작해서 5000이 될 때 5초가 되게 됩니다. 즉, 5초동안 무한 루프를 돌게 됩니다.

if(조도센서값 >최대값){
  최대값=초도센서값;
}
if(조도센서값 <최소값){
  최소값=조도센서값;
}

조도센서값이 최대값보다 크면 그 값을 최대값으로 바꾸고 조도센서값이 최소값보다 작으면 그 값을 최소값으로 5초동안 반복 명령을 수행한다고 생각하시면 됩니다. 5초동안 측정된 최소~최대값을 실제 측정하는 입력범위 최소~최대값을 교정하게 됩니다.

void loop() {  
  sensorValue = analogRead(sensorPin);   
  sensorValue = map(sensorValue, sensorMin, sensorMax, 0, 255);  
  sensorValue = constrain(sensorValue, 0, 255);
}

조도센서값을 읽고

map(조도센서값, 교정최소값, 교정최대값, 0, 255)

이렇게 교정된 값을 기준으로 조도센서값이 처리되어 나오게 되는 것이죠. 다음 라인은 만약에 교정된 최소~최대값의 범위를 벗어나는 값이 입력되었다면 예외처리가 필요합니다. constrain()함수로 값을 벗어나지 못하게 합니다.
map()함수에서는 교정값에 대해서 0~255가 매칭되어 출력되지만 벗어나게 되면 마이너스값이나 255이상의 값으로 나오게 됩니다. 그럴 경우에 대해서 다음과 같은 명령라인을 코딩하게 됩니다.

constrain(sensorValue, 0, 255);

마이너스 값을 가지게 되면 0에 수렴되게 하고 255이상의 값을 가지게 되면 255에 수렴되게 하는 일종의 값의 범위에 락을 걸어놓은 느낌이라고 생각하시면 될 듯 싶네요.

이제 코딩에 대해서 설명했으니깐 정확하게 교정된 값이 출력되는지 살펴 볼까요.

4. 결과

조도센서의 측정된 값이 교정최소값 54와 교정 최대값 951사이에서 map()수행 후 241로 반환되어 나왔네요.

가령, 아래와 같은 예외 상황이 발생한다면

조도센서값이 951을 넘어갈 경우 최대값을 넘어가기 때문에 map()함수는 255 이상의 값을 반환됩니다. 하지만 constrain()함수로 255에 수렴 되게 해서 결과가 255로 나왔네요.

마무리

아두이노공식 홈페이지에 튜토리얼에 나온 예제입니다. 너무 괜찮은 소스라 그대로 인용하게 되었네요. Calibration의 의미를 잘 이해하시고 아두이노에서 사용하셨으면 합니다. 사용하는 이유는 사용하는 Sensor의 초기값을 교정함으로써 보다 정교하게 컨트롤 하기 위함이니깐 좀 더 정교하게 동작을 제어하고 싶다면 꼭 Calibration의 의미를 꼭 이해를 하셨으면 합니다. 그리고 위 코딩과 같은 것이 교정의 하나의 방법이지 절대적 교정이 아닌 점을 기억 하세요. 이런 느낌의 교정하는게 Calibration 라고 생각하시면 됩니다.

여러분들도 한번 조이스틱의 초기 중심값에 대해 교정작업을 이 원리를 곰곰히 생각한 뒤 에 적용해 보셨으면 합니다. 그러면 따로 초기에 코딩으로 측정하고 측정된 값을 다시 수작업으로 코딩하지 말고 교정작업으로 한번에 처리해서 어느 조이스틱과 연결해도 해당 조이스틱에 맞게 컨트롤 될 수 있게 만들어 보세요.

이 외에도 생각하는 Sensor가 있다면 그 Sensor에 Calibration를 적용한다면 어떻게 코딩할까 하고 상상의 나래를 펼쳐 보세요.

[아두이노] 조이스틱+processing 3D 도형 회전(2)

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/
• 온라인 프로세싱 편집기 : http://sketchpad.cc
• Processing 홈페이지 : https://processing.org/
• 참고 링크 :
  [아두이노] Processing을 이용한 아두이노 제어 I
  [아두이노] Processing를 이용한 아두이노 제어 II
  [아두이노] Processing를 이용한 아두이노 제어 III
  [아두이노] 조이스틱 제어
  [아두이노] 조이스틱 + Servo Motor 제어

지난 시간에는 아두이노는 아두이노 제어 코딩을 하고 processing은 아두이노에서 전송된 방향키 data를 시리얼통신 받아와서 3D 도형 회전을 하였다면 오늘은 prcoessing에서 3D 도형 뿐 아니라 아두이노 코딩까지 전부 담당하는 코딩을 살펴보도록 하겠습니다.

1. 아두이노 소스

• 링크 : [아두이노] 조이스틱 방향키 값 출력

지난 시간에 아두이노 방향키를 만든 소스입니다. 시리얼모니터로 해당 방향 알파벳을 출력한 소스인데 processing 코딩에 그대로 복사해서 이식할 예정입니다.

const int AXIS_X = A0;
const int AXIS_Y = A1;
const int SW_P = 3; 
 
void setup() {
  Serial.begin(9600);
  pinMode(SW_P,INPUT_PULLUP);
}
 void loop() {
  //X축 방향값
  if(analogRead(AXIS_X)<=300){
    Serial.println('a');
  }
  else if(analogRead(AXIS_X)>=700){
    Serial.println('d');   
  }
  //Y축 방향값
  if(analogRead(AXIS_Y)<=300){
    Serial.println('w');      
  }
  else if(analogRead(AXIS_Y)>=700){
    Serial.println('s');
  }
  delay(20);
}

2. processing으로 옮기기

• 링크 : 조이스틱+processing 3D 도형 회전(1)(아두이노)

위 아두이노 기본 방향키 값을 구하는 로직을 processing으로 전부 가져 오겠습니다.
지난 시간의 processing 코딩한 소스에다가 옮겨야 하니깐 우선 원래 소스는 다음과 같습니다.

[processing 소스]

import processing.serial.*;

Serial myPort;

int x=0;
int y=0;

void setup() {

    println(Serial.list());
    myPort = new Serial(this, Serial.list()[0], 9600);
    myPort.bufferUntil('\n');
    noStroke();
    size(600,600,P3D);
    
} 

void draw() {  
    background(0); //배경색
    lights();  //조명

    pushMatrix();  //Start
    fill(0,255,0); //채우기
    translate(width/2,height/2,-100); //이동
    rotateX(radians(y)); //x축 회전
    rotateY(radians(x)); //y축 회전
    
    box(200,100,200); //상자
    popMatrix(); //End
}
 
void serialEvent(Serial p) { 
  String inString = myPort.readStringUntil('\n');
  char ch=inString.charAt(0);
    
  println(ch);
  
  if (ch == 'w') {
      y+=1;
  } 
  else if (ch == 's') {
     y-=1;
  } 
  else if (ch == 'a') {
     x-=1;
  } 
  else if (ch == 'd') {
     x+=1;
  }
}

아두이노 함수들을 사용하기 위해서는 다음과 같은 과정이 필요합니다.

아두이노 라이브러리를 import 해서 객체 변수로 하나 만들어야 합니다.

[ processing에서 아두이노 코딩 ]

import cc.arduino.*;
Arduino arduino;

Arduino arduino;

arduino = new Arduino(this, Arduino.list()[0], 57600); //인스턴스화
    

아두이노 소스코딩 부분에 앞에 arduino 객체변수를 접근자로 연결해서 바꿔주시면 됩니다.

[아두이노 소스랑 processing 소스를 결합]을 하면 다음과 같습니다. const 상수형 표현은 processing에서 에러가 발생하더군요. 그래서 int형으로 만들었습니다.스위치 SW_P 변수로 사용준비만 해놓기만 했고 실제로 사용하지 않습니다. 나중에 이 키값은 3D box 의 색상을 변경하는 코딩을 여러분들이 한번 IF문을 써서 해보세요.

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


Arduino arduino;

int AXIS_X = 0;
int AXIS_Y = 1;
int SW_P = 3; 

int x=0;
int y=0;

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

    println(Serial.list());
    arduino = new Arduino(this, Arduino.list()[0], 57600);
    arduino.pinMode(SW_P,Arduino.INPUT_PULLUP);

    size(600,600,P3D);
    noStroke();    
} 

void draw() {  
    
    move();
    
    background(0); //배경색
    lights();  //조명

    pushMatrix();  //Start
    fill(0,255,0); //채우기
    translate(width/2,height/2,-100); //이동
    rotateX(radians(y)); //x축 회전
    rotateY(radians(x)); //y축 회전
    
    box(200,100,200); //상자
    popMatrix(); //End
}
 
void move() { 
  int axisX = arduino.analogRead(AXIS_X);
  int axisY = arduino.analogRead(AXIS_Y);  
  
  //X축 방향값  
  if(axisX <= 300){
    x-=1;
  }
  else if(axisX >= 700){
    x+=1;
  }
  //Y축 방향값
  if(axisY <= 300){
    y-=1;
  }
  else if(axisY >= 700){
    y+=1;
  }
  delay(20);
}

따로 방향키 알파벳을 만들 필요 없고 시리얼 호출 함수명을 move()함수명으로 사용자 정의 함수로 변경 했습니다. 아날로그 핀이니깐 0,1번 핀으로 아날로그로 읽으면 A0, A1핀의 값을 읽습니다. 방향키 알파벳 자리에 x, y 변수값을 해당 조이스틱의 방향으로 증감시키면 됩니다.

아마 이 코딩이 지난 시간에 비해 훨씬 편한 코딩인 것 처럼 보일 꺼에요. 아두이노에서 명령을 내린 코딩을 processing으로 전부 가져와야 하니깐 좀 번거롭고 코딩이 될 수 있스니다. 나중에 processing이나 아두이노 코딩이 복잡해지고 길어지면 코딩이 산만해 질 가능성이 있기 때문에 아두이노는 아두이노 코딩을 하고 processing은 processing 코딩을 하는게 좋습니다.

3. 실행 과정

[회로도]

회로도는 동일합니다.

[1단계] : 아두이노는 processing이 사용할 수 있는 조건으로 펌웨어 해야합니다. "Firmata->StandardFirmata" 업로드 시키면 됩니다. 그러면 processing에서 아두이노를 제어할 수 있습니다.

[2단계] : processing에 아두이노+processing 가 합쳐진 소스를 복사해서 붙여 넣으시면 됩니다. 아래 이미지는 기존 소스에서 지워야 했던 시리얼객체변수가 이미지에 남아 있네요. 지웠어야 했는데 오의티네요.

[3단계] : processing 실행하시면 윈도우창이 뜨면서 3D box가 나타납니다. console창에는 com넘버 출력되고 3D box가 정상적으로 출력되면 제대로 실행 된거라 생각히시면 됩니다.

4. 결과

폰으로 촬영하려다 화질이 구려서 포기 했네요. 아래 움직이는 이미지는 어제 사용한 아미지가 아니고 다시 pc 녹화한 영상입니다. 옆에 코딩 소스를 보시면 Arduino 객체가 선언되어 있는 걸 보실 꺼에요. pc 실행 영상만 녹화했습니다. 정상적으로 조이스틱에 따라 3D box가 회전하네요.

마무리

원래는 다른 포스트를 할 예정이였는데 processing은 두가지 방식으로 아두이노를 접근하기 때문에 어쩔 수 없이 두개의 포스트로 나눠서 오늘까지 쓰게 되었네요. 추가적으로, 한번 Bluetooth를 스마트폰에 연결해서 스마트폰으로 조정한 값을 토대로 processing 3D box를 회전를 해보셨으면 합니다. 이건 포스팅 하지 않겠습니다. 금요일 소스에서 스마트폰에서 방향키 값을 Bluetooth로 통해서 아두이노에 시리얼통신 한 값을 다시 pc에 시리얼모니터로 출력하는 문장으로 보내면 그 값을 processing이 읽어서 회전 시키면 되기 때문입니다. 금요일 소스에서 조이스틱 부분 빼고 Bluetooth통신으로 값을 읽고 Serial 통신으로 값을 보내면 끝납니다.

어렵지 않으니깐 한번 해보셨으면 하네요.

[아두이노] 조이스틱+processing 3D 도형 회전(1)

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/
• 온라인 프로세싱 편집기 : http://sketchpad.cc
• Processing 홈페이지 : https://processing.org/
• 참고 링크 :
  [아두이노] Processing을 이용한 아두이노 제어 I
  [아두이노] Processing를 이용한 아두이노 제어 II
  [아두이노] Processing를 이용한 아두이노 제어 III
  [아두이노] 조이스틱 제어
  [아두이노] 조이스틱 + Servo Motor 제어

오늘은 조이스틱의 키 값을 가지고 지난 시간에 포스트한 3D 도형을 회전시키는 실험을 해보겠습니다. 참고로 오늘 접근 방식은 아두이노는 기존 조이스틱 제어 코딩을 그대로 동작하고 processing에서 조이스틱을 제어한 값을 시리얼통신을 통해서 값을 받아 3D 도형을 회전 시킵니다. 즉, 아두이노는 아두이노 역할에 충실하고 processing은 processing의 역할을 충실한 코딩으로 생각하시면 됩니다.

1. 아두이노 소스

지난 시간에 아두이노 방향키를 만든 소스입니다. 시리얼모니터로 해당 방향 알파벳을 출력한 소스인데 그대로 적용할 예정입니다.

const int AXIS_X = A0;
const int AXIS_Y = A1;
const int SW_P = 3; 
 
void setup() {
  Serial.begin(9600);
  pinMode(SW_P,INPUT_PULLUP);
}
 void loop() {
  //X축 방향값
  if(analogRead(AXIS_X)<=300){
    Serial.println('a');
  }
  else if(analogRead(AXIS_X)>=700){
    Serial.println('d');   
  }
  //Y축 방향값
  if(analogRead(AXIS_Y)<=300){
    Serial.println('w');      
  }
  else if(analogRead(AXIS_Y)>=700){
    Serial.println('s');
  }
  delay(20);
}

2. processing 소스

지난 시간에 3D box를 제어한 포스트에서 다룬 소스를 기반으로 아두이노의 시리얼 통신 값을 가지고 3D box를 제어 해보기 위해서 몇가지 지난 소스에서 수정을 해야 합니다.

복습 : 시리얼 통신

• 시리얼통신 레퍼런스
  https://processing.org/reference/libraries/serial/Serial.html

• 참조함수 레퍼런스
  https://processing.org/reference/libraries/serial/Serial_list_.html
  https://processing.org/reference/libraries/serial/Serial_bufferUntil_.html
  https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html

시리얼통신을 사용하기 위해서는 Serial를 프로세싱에 import해야 합니다. 그리고 사용 할 객체 변수를 하나 선언해야겠죠.

import processing.serial.*;

Serial myPort;  

다음으로 myPort를 인스턴스화 해야 합니다.

 println(Serial.list()); //연결된 포트정보
 myPort = new Serial(this, Serial.list()[0], 9600); //시리얼통신 세팅

연결된 포트정보를 list()함수로 찾을 수 있고 그 정보를 시리얼모니터로 출력합니다. 그리고 myPort는 객체변수를 선언했다고 해서 바로 사용되는게 아닙니다. 객체변수 선언은 비유로 들자면 껍때기만 만들어 놓은 거고 인스턴스를 해야 합니다. 할당한다는 의미로 생각하면 될 듯 싶네요. 비유로 알맹이를 채운다고 생각하면 좋을 듯 싶네요.

이렇게 해서 시리얼통신의 준비 작업은 끝났습니다.

다음으로 시리얼통신에서 들어온 데이터를 읽는 방법은 두가지 방법이 있습니다. 아두이노에서 시리얼통신으로 읽는 방식과 동일하게 코딩하는 방법과 processing 자체에서 시리얼통신에서 데이터가 들어오면 자동으로 호출되는 함수가 있습니다. 두번째 호출함수로 코딩을 해보겠습니다.

void serialEvent(Serial p) { 
    명령;
}

SerialEvent()함수가 바로 시리얼통신으로 데이터가 들어오면 바로 호출되는 함수입니다.

void serialEvent(Serial p) { 
  String inString = myPort.readStringUntil('\n');
  char ch=inString.charAt(0);
}

시리얼 통신에서 일부러 문자열로 받았습니다. myPort.readString()함수는 문자열로 읽는 함수입니다. 여기서 myPort.readStringUntile('\n') 함수는 찾고자 하는 인자가 없을 때 null을 반환합니다. 문자열 라인 단위로 읽는다고 생각하면 될 듯 싶네요.

참고로, 아두이노에서는 시리얼통신으로 println('a') 함수로 보내면 "a\n"이렇게 전송되게 됩니다. 받는 쪽에서 만약 문자니깐 함수를 myPort.readChar() 함수를 쓰게 되면 한 글짜씩 개별로 읽게 됩니다. 'a'라는 문자를 보냈지만 추가로 옆에 기호까지 같이 보내지기 때문에 Char으로 읽으면 안됩니다. 나중에 여러개 값을 한번에 보낼 때를 사용하시라고 String 문자열로 읽겠습니다.
'a'라는 한글자지만 문자열이기 때문에 해당 글자를 한글자 문자로 읽어서 변수에 저장하겠습니다. charAt(0)으로 0번째 위치의 문자를 읽는 함수인데 'a'라는 문자를 읽게 됩니다. 그걸 char 문자 변수에 저장하면 되겠죠.

진짜 번거로운 과정을 거쳐서 코딩을 했네요. 그 이유는 나중에 여러분들이 자이로센서같은 것을 다루게 되면 한번에 x,y,z 값을 받아서 읽게 되는데 이때 문자열로 읽고 해당 위치의 값만 빼내서 제어하는데 활용하시라고 미리 이렇게 번거로운 코딩을 하게 되었네요.

시리얼 통신에서 데이터를 읽는 함수의 종류는 다양합니다. 그 다양한 함수들은 위에 링크한 라퍼런스을 보고 한번 여러분들이 따로 코딩해 보셨으면 합니다.

추가로,

inString = trim(inString);

문자열의 시작과 끝에서 공백 문자를 제거하는 함수입니다.("nbsp" 제거) 이 명령라인을 추가해 주시면 더 안정적으로 데이터를 읽겠지만 실험에서는 그냥 사용하지 않았네요. 이런 함수가 있다는 정도만 이해하시고 나중에 활용해 보세요.

ch변수에 겨우 방향키 값을 저장할 수 있게 되었습니다. 지난 3D box 제어에서 키보드로 제어했던 것을 기억하실 지 모르겠네요.

[ 키보드 제어 원 소스]

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      y+=1;
    } 
    else if (keyCode == DOWN) {
      y-=1;
    } 
    else if (keyCode == LEFT) {
      x-=1;
    } 
    else if (keyCode == RIGHT) {
      x+=1;
    }
  }
  else if (key == 'z' || key == 'Z') {
      z+=10;
  } 
  else if (key == 'x' || key == 'X') {
      z-=10;
  } 
}

여기서, 수정을 하면은 다음과 같습니다.

void serialEvent(Serial p) { 
    String inString = myPort.readStringUntil('\n');
    char ch=inString.charAt(0);
    println(ch); //시리얼모니터로 방향키 값 출력
    
    if (ch == 'w') {
        y+=1;
    } 
    else if (ch == 's') {
        y-=1;
     } 
     else if (ch == 'a') {
        x-=1;
     } 
     else if (ch == 'd') {
        x+=1;
     }  
}

여기서는 X, Y축을 한꺼번에 if~ else if문으로 표현했습니다. 지난 시간에 방향키 값을 만들 때는 X축과 Y축을 따로 if문을 했는데 여기서 묶여서 처리한 이유가 뭘까요. 방향키 ch변수에는 하나의 값만 존재합니다. 하나의 값만 순서대로 읽어오기 때문에 X,Y축을 구별 안하고 읽어온 하나에 값에 대한 하나의 동작만이 필요하기 때문에 선택문으로 전부 연결한 것이죠.

if문은 상황에 따라 맞게 의미를 이해하시고 사용하셔야 합니다.

전체적으로, 코딩을 하면 아래와 같습니다.

import processing.serial.*;

Serial myPort;

int x=0;
int y=0;

void setup() {

    println(Serial.list());
    myPort = new Serial(this, Serial.list()[0], 9600);
    myPort.bufferUntil('\n');
    noStroke();
    size(600,600,P3D);
    
} 

void draw() {  
    background(0); //배경색
    lights();  //조명

    pushMatrix();  //Start
    fill(0,255,0); //채우기
    translate(width/2,height/2,-100); //이동
    rotateX(radians(y)); //x축 회전
    rotateY(radians(x)); //y축 회전
    
    box(200,100,200); //상자
    popMatrix(); //End
}
 
void serialEvent(Serial p) { 
  String inString = myPort.readStringUntil('\n');
  char ch=inString.charAt(0);
    
  println(ch);
  
  if (ch == 'w') {
      y+=1;
  } 
  else if (ch == 's') {
     y-=1;
  } 
  else if (ch == 'a') {
     x-=1;
  } 
  else if (ch == 'd') {
     x+=1;
  }
}

3. 실행 과정

[회로도]

[1단계] : 아두이노 IDE에 방향키 소스를 복사해서 붙여 넣으시고 화살표에 업로드 버턴을 누르면 아래 정상적으로 처리되면 업로드 완료라고 뜹니다.

[2단계] : 시리얼모니터로 결과 검사

정상적으로 방향키값이 시리얼모니터로 출력되는 것을 확인 하실 수 있습니다.

[3단계] : processing에 오늘 수정한 코드를 복사해서 붙여 넣으시고 화살표 실행 버턴을 누르시면 아래 그림처럼 console창에 방향키값이 정상적으로 출력되는 것을 확인 하실 수 있을 겁니다.

[4단계] : processing에서 만든 윈도우창이 뜨면서 3D box가 보여지는데 조이스틱으로 조정을 하면 이 3D box가 움직이는 걸 확인 하실 수 있을 꺼에요.

4. 결과

processing에서 실제로 조이스틱을 조정하면 움직이는 이미지 입니다.

실제 폰으로 촬영한 영상으로 살펴 봅시다.

만약, 여러분들이 processing를 좀 더 깊게 공부하시면 아두이노와 processing를 연동한 재밌는 작품들을 만드실 수 있을 거라 생각됩니다.

마무리

이렇게 시리얼통신을 통해서 읽은 데이터 값으로 processing 제어하는 실험을 하였습니다. 예전에는 processing에서 아두이노를 제어 했다면 반대로 아두이노에서 processing를 제어한 실험인데 그렇게 어렵지 않죠. 여기서 부터 출발하여 좀 더 다양한 시각화 표현을 processing 에서 코딩하면 좀 더 멋진 작품으로 만들어 질 수 있습니다.

여러분들도 한번 다른 모형을 만들어서 제어를 꼭 해보셨으면 합니다. 최대한 의미 전달을 목적으로 코딩을 최소화 하기 위해서 box()함수로 상자도형을 간단히 제어를 했짐나 좀 더 멋진 모형을 만들어서 멋진 작품을 만드셨으면 하네요.

[아두이노] 조이스틱 방향키 값 출력

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/
• 온라인 프로세싱 편집기 : http://sketchpad.cc
• Processing 홈페이지 : https://processing.org/
• 참고 링크 :
  [아두이노] Processing을 이용한 아두이노 제어 I
  [아두이노] Processing를 이용한 아두이노 제어 II
  [아두이노] Processing를 이용한 아두이노 제어 III
  [아두이노] 조이스틱 제어
  [아두이노] 조이스틱 + Servo Motor 제어

지난 조이스틱 포스트에서 현재 상태값을 출력하는 실험을 했었습니다. 그리고 조이스틱 두번째 포스트에서는 조이스틱 X축 0~1023 아날로그 신호 값을 기준으로 Servo Motor를 제어도 해보았습니다. 마무리에 방향 조절에 대한 로직을 간단히 글로 소개 한 적이 있는데 이번에 제대로 이 주제에 대해 포스트를 할까 합니다.

날씨가 우중충해서 그런가 사진이 이상하게 나왔네요.

1. 조이스틱 방향키 값 만들기

위그림은 지난 조이스틱 회로도 입니다.

조이스틱의 X(A0)핀, Y(A1)핀 값을 위 그림과 같은 방향 키값으로 만들어 내려고 합니다.

[복습] : 조이스틱 현재 상태값 출력

const int AXIS_X = A0;
const int AXIS_Y = A1;
const int SW_P = 2; 
 
void setup() {
  Serial.begin(9600);
  pinMode(SW_P,INPUT_PULLUP);
}
 
void loop() {

  Serial.print("Axis_X: ");
  Serial.println(analogRead(AXIS_X));

  Serial.print("Axis_Y: ");
  Serial.println(analogRead(AXIS_Y));

  Serial.print("SW_P:  ");
  Serial.println(digitalRead(SW_P));

  delay(500);
}

위 소스는 조이스틱의 상태값을 시리얼모니터로 출력하는 예제입니다. 방향키 값을 만들기 위해서 Axis_X, Axis_Y 값에서 방향값으로 분리해 낼 능력이 필요합니다.

Axis_X, Axis_Y 값은 0~1023의 아날로그 값을 가집니다. 이론상으로 조이스틱의 중심값은 (X, Y)은 (512, 512)가 됩니다.

여기서, X축으로 아날로그 값 0~1023에서 A방향의 아날로그 신호값의 범위는 0~512 사이가 되고 D방향의 아날로그 신호값의 범위는 512~1023 사이가 됩니다. 그런데 실제로 조이스틱은 512가 중심값이 아니라고 했죠. 하드웨어 자체 조립과정의 문제와 환경적 요인에 의해 512의 근사값이라고 저번 시간에 이야기 했는데 오늘 실험에서는 정밀 제어가 아닌 기초적인 간단한 제어임으로 512이라고 가정하겠습니다.

위 그림을 보면 동그라미 모양이 있죠. 이 동그라미 영역은 방향 불인정 영역으로 잡아 놓고 나머지 영역을 방향으로 하면 방향을 명확하게 나눌 수 있습니다. 즉, 조이스틱의 방향을 움직일 때 동그라미 영역을 무시하고 그 나머지 신호값을 해당 방향의 키값으로 설정하면 명확하게 나누어지게 됩니다. 그 이유는 중심 근처는 방향 신호값의 변화가 너무 심하기 때문입니다. A와 D값의 교차 변화가 중심 근처에서 빈번하게 발생하면 키 값이 교차로 빈번하게 출력되고 그 값을 통해서 움직이는 물체는 떠는 것처럼 "덜덜덜" 하면서 움직이게 됩니다. 움직임의 값이 크게 세팅하면 왔다 갔다 반복하는 현상이 그 중심점에서 빈번하게 일어난다고 생각하시면 될 듯 싶네요. 그래서 중심지점 근방은 방향 신호값으로 인정 안함으로써 좀 도 명확하게 방향키 값을 잡는 것이죠.

제 경우는 그냥 500을 기준으로 X축 좌/우 방향을 200씩 무시구간을 잡았습니다. 정확히 200이 아니라 그냥 500기준 200으로 정교함보다는 의미 전달 방향키 값임을 참고하고 보시기 바랍니다.

[X축 키값 구하기]

  //X축 방향값
  if(analogRead(AXIS_X)<=300){
    Serial.println('a');
  }
  else if(analogRead(AXIS_X)>=700){
    Serial.println('d');   
  }

위 코딩은 X축을 기준으로 방향키 a, d를 출력하는 로직입니다. 500을 기준으로 300이하일때 왼쪽(a)키로 인정하고 700이상일때 오른쪽(d)키로 인정한다는 문장입니다.
만약에, 정확하게 나눌려면 조이스틱 X중심이 521로 설정되어 있으면 200차이로 나눈다면 왼쪽 기준은 321이고, 오른쪽 기준 721이겠죠. 간단한 실험이라 수치를 보기 편하게 단순화 시킨 수치입니다. 여러분들은 조이스틱로 실제 제어한다면 300, 700으로 하지 말고 좀 더 조정된 값으로 제어를 하셨으면 합니다.

여기서, if문을 개별적으로 해도 되지만 else if문을 쓴 이유가 뭘까요. AXIS_X 기준 신호로 보면 기준 신호 값에서 +, - 값인 둘중 하나상태만 존재하기 때문입니다. 예를 들면은 X축의 조정신호 값이 오른쪽이면서 왼쪽일 수 없잖아요. 오른쪽이면 오른쪽 신호값만 왼쪽이면 왼쪽 신호값만 존재합니다. 동시 오른쪽, 왼쪽이 나올 수 없습니다. 그래서 if~else if 문으로 왼쪽이냐 묻고 아니면 오른쪽이냐 묻는 문게 했습니다. 이 표현이 가장 괜찮은 코딩으로 이렇게 if~else if문을 사용하게 되었습니다.

반대로, Y축을 살펴볼까요 동일합니다.

[Y축 키값 구하기]

//Y축 방향값
  if(analogRead(AXIS_Y)<=300){
    Serial.println('w');      
  }
  else if(analogRead(AXIS_Y)>=700){
    Serial.println('s');
  }

그러면, 여기서 왜 X축과 Y축을 다 묶어서 if~else if문을 쓰지 않았을 까요.

  if(analogRead(AXIS_X)<=300){
    Serial.println('a');
  }
  else if(analogRead(AXIS_X)>=700){
    Serial.println('d');   
  }
  else if(analogRead(AXIS_Y)<=300){
    Serial.println('w');      
  }
  else if(analogRead(AXIS_Y)>=700){
    Serial.println('s');
  }

이렇게 안한 이유는 조이스틱에서 X, Y축을 동시에 읽어오게 됩니다. 그러면 X축을 읽고 X축의 값에 만족하는 왼쪽/오른쪽이 결정되면은 Y축은 무시하고 넘어가게 됩니다. 그래서 X축의 방향키를 구하고 Y축의 방향키를 구하는 식을 따로 if문을 분리해서 코딩한 것이죠.

if문을 어떻게 처리하냐에 따라서 그 의미는 완전 달라지기 때문에 if문도 신중하게 써야 합니다. 그리고 위 코딩도 썩 좋은 코딩이 아닙니다. 해당 축을 읽는 함수는 한번으로 하면 좋지만 두번 연속으로는 읽는다면 비효율적이겠죠.

int x = analogRead(AXIS_X);
int y = analogRead(AXIS_Y);

x, y값을 if문으로 비교하시면 구지 두번 반복해서 읽을 필요는 없게 됩니다. 전 그냥 2번 반복읽기로 뒀네요.

2. 코딩

const int AXIS_X = A0;
const int AXIS_Y = A1;
const int SW_P = 3; 
 
void setup() {
  Serial.begin(9600);
  pinMode(SW_P,INPUT_PULLUP);
}
 void loop() {
  //X축 방향값
  if(analogRead(AXIS_X)<=300){
    Serial.println('a');
  }
  else if(analogRead(AXIS_X)>=700){
    Serial.println('d');   
  }
  //Y축 방향값
  if(analogRead(AXIS_Y)<=300){
    Serial.println('w');      
  }
  else if(analogRead(AXIS_Y)>=700){
    Serial.println('s');
  }
  delay(20);
}

스위치 버턴도 선언은 했지만 그냥 해당 버턴키는 만들지 않았습니다. 다음에 processing과 연동 할 때 줌인/줌아웃키로 하려고 햇는데 스위치버턴이 한개라 따로 뻥판에 스위치 버턴을 만들어 표현 할 수 있었지만 그냥 방향제어만으로만 포스팅을 하고 위 틀은 확장 코딩을 할 수 있는 상태로 표현했다고 생각하시면 될 듯 싶네요. 나머지 코딩은 여러분들이 추가로 스위치 버턴을 가지고 제어해보시라고 남겨 둡니다.

미완성 코딩으로 위에 아날로그 신호값을 읽어 변수에 저장하는 것과 스위치 버턴을 추가로 로직을 짜셔 완성 시켜보세요.

3. 결과

시리얼 모니터로 출력되는 영상 입니다.

깔끔하게 잘 나오네요. 다음은 폰으로 조이스틱을 움직일 때 키 값이 나오는 영상입니다.

마무리

오늘은 간단히 조이스틱의 방향 키 값을 시리얼모니터로 출력 했습니다. 이 출력이 무슨 키 값이야 하고 생각하실 수 있지만 내일 포스트는 processing과 연동합니다. 시리얼통신으로 보내지는 이 알파벳 값을 processing에서 읽고 그 값을 기준으로 지난 processing 예제인 box 3D 도형을 도형을 움직이게 할 예정 입니다. 키보드로 제어 했던 부분을 오늘 배운 키 값으로 제어하겠다는 의미인 셈이죠. 왜! 키 값인지 아시겠지요.

오늘 포스트 한 내용을 잘 따라오셔야 내일 재밌는 것을 할 수 있습니다.

이상 마무리 하고 오늘도 배운 내용을 어디서 써먹을지 상상의 나래를 펼쳐 보세요.

[아두이노] processing 3D 도형 제어 

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/
• 온라인 프로세싱 편집기 : http://sketchpad.cc
• Processing 홈페이지 : https://processing.org/
• 참고 링크 :
  [아두이노] Processing을 이용한 아두이노 제어 I
  [아두이노] Processing를 이용한 아두이노 제어 II
  [아두이노] Processing를 이용한 아두이노 제어 III
  [아두이노] 조이스틱 제어
  [아두이노] 조이스틱 + Servo Motor 제어

예전에 잠깐 아두이노와 연동하는 processing을 소개 한 적이 있습니다. 오늘은 아두이노 부분을 제외하고 간단히 processing에서 키보드와 마우스로 도형을 제어하는 원리를 소개하려고 합니다. 이부분을 어느정도 이해하시면 나중에 아두이노에서 제어값을 입력된 값으로 해서 processing 이미지를 제어 할 수 있기 때문입니다. 오늘 다루게 될 키보드와 마우스가 나중에 아두이노로 대체하면 재밌는 표현들을 할 수 있기 때문에 관심을 가져줬으면 하는 마음으로 포스팅을 합니다.

1. processing 3D box() 도형 그리기

[복습]

void setup() {  
  한번만 수행;
}
void draw() { 
  무한 반복 수행;
}

아두이노랑 구조가 비슷하다고 했죠. setup()은 한번만 수행되는 초기화 작업을 코딩하고, draw()은 계속 그리는 무한 작업 코딩을 담당합니다.

void setup() {  
    
    size(600,600,P3D); //창사이즈
    noStroke();  //테두리없음

//  frameRate(30); //초당 프레임
} 
void draw() {  
     background(0); //배경색
}

추가적으로 초기 설정하는 함수들이 있는데 다 생략하고 딱 두개만 사용합니다. 윈도우 창이 하나 생성되는데 size() 함수로 윈도우 창 만듭니다. 여기서, "P3D" 3D Rendering 모드입니다. "OPENGL"로 선언해도 됩니다. 참고로 opengl은 import 선언이 필요하지만요. 그리고 테두리를 그리지 않는 noStroke()함수를 사용합니다. box 그렸는데 테두리가 보기 흉해서 테두리를 지웠네요.

배경색은 background(0)로 검정색으로 했네요. 아래 그림은 위 코딩의 결과입니다.

다음으로,

void draw() {  
    background(0); //배경색
    lights();  //조명

    pushMatrix();  //Start
    fill(0,255,0); //채우기
    translate(width/2,height/2,-100); //이동
    box(200,100,200); //상자
    popMatrix(); //End
}

옆에 주석을 다 달아 놓았습니다. 배경색은 검정색으로 하고 lights() 조명효과를 나타냅니다. 이미지 도형을 만들면 그 이미지에 light를 비추는 효과라고 생각하시면 됩니다.

fill()은 그리는 도형에 어떤 색을 채울것인지 지정하는 함수입니다. 즉, fill() 함수에 의해서 다음에 그려진 도형의 표면의 색이 결정됩니다. 사각형을 그리면 사각형 면의 색이 fill()함수의 색으로 채워진다고 생각하시면 됩니다.

pushMatrix(), popMatrix()함수가 있는데 스텍, 행렬의 의미를 이해하고 있어야 하지만 설명을 해도 쉽게 의미를 전달하기 어렵습니다. 다음으로 약식 꼼수 의미로 이해해 주셨으면 합니다. 저 함수가 나오면 push랑 pop은 한쌍이라고 생각하세요. 그리고 그리는 영역으로 push 시작위치에서 pop은 그리기 끝나는 위치라고 생각하세요. push~pop사이의 그리기 명령함수는 그 영역안에서만 독립적으로 적용된다고 생각하시면 될 듯요.

위 그림으로 다시 설명하면은 draw()에서 한장에 종이에 다가 그림을 그린다고 생각하시면 push~pop함수가 있으면 그 부분은 새로운 종이로 독립적인 영역의 그림을 그린다고 생각하시면 됩니다. 여기서, draw라는 메인 종이 위헤 새로 그린 종이를 붙이는 느낌으로 이해하시면 될 듯요. push~pop 안에 또다른 push~pop이 나오면 밖에 push~pop은 부모라고 생각하시고 부모 종이 위에 자식 종이가 두장 있다고 생각하시면 됩니다. 이때 자식 종이들은 각각 독립된 영역으로 A종이에 그리는 명령은 B종이에 영향을 줄 수 없고, B종이에 그리는 명령은 A종이에 영향을 줄 수 없는 독립된 영역으로 보시면 됩니다. 하지만 부모 종이에서는 자식 A, B가 둘 다 포함되어 있기 때문에 부모 종이에서 그리는 명령은 A, B 종이에 영향을 주게 됩니다.

왜! 이렇게 번거롭게 push~pop를 사용하느냐면 한두개의 도형을 그릴 때는 상관 없지만 다수의 도형을 그리고 배치하고 개별적인 도형들이 움직이거나 변화가 일어나게 코딩할려면 push~pop이 없이 그냥 한다면 어렵습니다. 그리는 명령을 매번 일일히 변화를 줘야 하기 때문이지요. 한장의 종이에 자동차 그림을 그린다면 한번에 전체를 다 그려야 합니다. 엔진, 바퀴, 핸들 등등의 각각의 부품들을 한번에 한장에 다 그려야 하기 때문에 그리고 나면 다시 엔진이 맘에 안든다고 엔진을 바꿀려고 하면 수정하기도 힘들고 하나를 변경하면 그 영향이 전체에 가기 때문에 무척 힘든 작업이 됩니다.

하지만 push~pop은 각각의 엔진이면 엔진 바퀴면 바퀴를 독립적으로 그리고 한장에 종이에 독립적으로 그림 그림을 가져와서 해당 위치에 붙이기만 하면 조립을 쉽게 완성할 수 있습니다. 나중에 엔진을 바꾸고 싶다면 엔진만 다시 그려서 해당 위치에 붙이면 쉽게 변경할 수 있게 됩니다.

한마디로 말하면 각 그림을 캡슐화 한다고 생각하시면 됩니다.

다시 설명드리면,

위 그림을 그리기 위해서 push~pop이 없다면 한개의 좌표계에서 몸체와 2개의 바퀴를 3D공간 좌표계에서 위치 좌표를 일일히 이동시켜서 그 위치에서 그림을 그려야 합니다. 한개라도 변경되는 일이 발생하면 전체에 영향을 주게 됩니다. 그리고 바퀴만 회전시키고 싶을때 제어하기가 무자 까다롭습니다.

하지만 push~pop을 사용하면 독립된 3D좌표계에서 독립적으로 그리게 됩니다.

위 그림처럼 계별적 3D 좌표계에서 도형을 그린 다음에 메인 draw() 이 그림을 push~pop으로 배치만 하면 됩니다. 나중에 원의 색을 바꾸고 싶으면 push~pop안에 fill()값만 바꾸면 색을 쉽게 변경이 됩니다. 바퀴가 두개인데 복제도 가능해지죠. 바퀴를 회전 시키고 싶으면 push~pop에 rotate()함수만 삽입하면 됩니다. draw()함수 내에서 하나의 좌표에게서 push~pop의 개별좌표계로 독립된 표현이 된다고 생각하시면 되겠습니다.

3D 포스트가 아닌데 삼천포로 빠지고 말았네요. 나중에 아두이노와 연동해서 뭔가 화려한 3D 관련 표현을 하실 수 있으니깐 가장 중요한 push~pop을 이야기 하다보니 좀 설명이 길어 졌네요.

    pushMatrix();  //Start
    fill(0,255,0); //채우기
    translate(width/2,height/2,-100); //이동
    box(200,100,200); //상자
    popMatrix(); //End

fill(0,255,0)함수로 다음에 그리게 될 도형의 표면 색을 녹색으로 정했습니다. translate(x,y,z)로 그리게 될 도형이 윈도우창에서 어디쯤 위치할 것인지 이동 시킵니다. 즉, 도형의 색은 녹색이고 특정위치로 이동시킨 곳에 상자가 그려진다고 생각하시면 될 듯 싶네요.

[결과]

위 그림에서는 상자가 녹색인 것은 알 수 있지만 3D 상자인지는 알 수 없네요. 이제 회전을 시켜 볼까요.

2. Mouse 회전

마우스 회전은 간단합니다. 상자가 그려진 윈도우창에 마우스의 좌표를 가져 올 수 있다면 쉽게 해결 됩니다. processing에서는 마우스 좌표를 변수로 실시간 좌표를 가져올 수 있습니다. mouseX, mouseY가 그 변수명입니다. 이 변수를 사용하면 현재 마우스가 가리키는 좌표값을 얻을 수 있습니다. 회전을 시켜볼까요.

회전 rotate()함수는 그냥 회전인데 마우스 좌표로 X, Y 축으로 회전를 해봅시다. processing 에서는 각 축을 기준으로 회전 시키는 함수를 제공합니다.

해당 함수를 살펴보면, ratateX()은 X축 기준으로 회전함수이고, ratateY()은 Y축 기준으로 회전하는 함수입니다. mouseX, mouseY 변수는 size()함수로 만든 윈도우 창의 영역 안에 마우스의 좌표(x,y)값을 실시간으로 가져 올 수 있어 이 값을 회전각으로 하면 쉽게 회전 할 수 있습니다.

처음, 회전각은 mouseX로 했더니 너무 고속으로 회전해서 약간 회전을 느리게 하기 위해서 0.1을 곱해도 너무 빠르고 0.01정도 하니깐 제 컴퓨터에서 이상적으로 회전 하네요.

회전각(mouseX * 0.01)로 회전시켜 보았습니다.

void setup() {  
    
    size(600,600,P3D); //창사이즈
    noStroke();  //테두리없음
//  frameRate(30); //초당 프레임
} 

void draw() {  
    background(0); //배경색
    lights();  //조명

    pushMatrix();  //Start
    fill(0,255,0); //채우기
    translate(width/2,height/2,-100); //이동
    rotateX(mouseY*0.01); //x축 회전
    rotateY(mouseX*0.01); //y축 회전
    box(200,100,200); //상자
    popMatrix(); //End
}

[결과]

나중에 조이스틱 같은걸로 조정한 값을 이 부분을 대신하면 회전이 되겠죠.

2. 키보드 회전

• 참고출처자료 keycode :
  https://processing.org/reference/keyCode.html
  https://processing.org/examples/keyboard.html

이제는 키보드로 회전 시키는 방식을 살펴보도록 하겠습니다.

위 링크 소스에서 키보드 관련 부분 살펴보면,

void keyPressed() {
    if (key == CODED) {
            if (keyCode == UP) {
                 회전각;
            }   
    }
    else if (key == 'z'){
       명령문;
    }   
}

대충 구조는 이렇습니다. keyPressed()함수는 키보드의 키를 누르면 호출 되는 함수입니다. key는 눌렀을때의 키 값을 가지고 있으면 그 키 값이 CODED인지 채크하게 됩니다. CODED면 keyCode 변수의 키 값이 들어 있고 그 키가 UP, DOWN, LEFT, RIGHT 인지를 체크하게 됩니다. 참고로 화살표 키 값이라고 생각하시면 될 듯요.
일반 키값은 key에 들어 있으면 'a'~'z', 'A'~'Z' 등 등으로 키값을 가질 수 있고 key에 저장 되어 있어서 key로 비교하면 됩니다.

키보드로 회전한다면 방향키로 X, Y축 회전을 시키고 키값 Z, X키로 Z축으로 이동 제어 키로 쭘인/줌아웃을 시킬 예정입니다.

int x=0;
int y=0;
int z=0;

void setup() {  
    
    size(600,600,P3D); //창사이즈
    noStroke();  //테두리없음
        
//  frameRate(30); //초당 프레임
} 

void draw() {  
    background(0); //배경색
    lights();  //조명

    pushMatrix();  //Start
    fill(0,255,0); //채우기
    translate(width/2,height/2,-100+z); //이동
    rotateX(radians(y)); //x축 회전
    rotateY(radians(x)); //y축 회전
    
    box(200,100,200); //상자
    popMatrix(); //End
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      y+=1;
    } 
    else if (keyCode == DOWN) {
      y-=1;
    } 
    else if (keyCode == LEFT) {
      x-=1;
    } 
    else if (keyCode == RIGHT) {
      x+=1;
    }
  }
  else if (key == 'z' || key == 'Z') {
      z+=10;
  } 
  else if (key == 'x' || key == 'X') {
      z-=10;
  } 
}

위에서 if문이 조건식이 두개인데 '||'은 둘중 하나만 참이면 참으로 인정하는 기호입니다. 둘개 다 참이여야 참으로 인정하는 기호는 '&&'인데 참고로 알아 두세요. '||'로 'z' or 'Z' 중 Z키가 대소문자 중 아무거나 입력해도 Z로 인정한다는 의미입니다. 나머지는 구지 성명 드릴 필요는 없겠죠.

    rotateX(radians(y)); //x축 회전
    rotateY(radians(x)); //y축 회전

여기서 radians(y)은 라디안 단위로 각도로 변환시키는 함수입니다. 그냥 각도 구하기라고 생각하시면 될 듯 싶네요.

[결과]

화살표 방향키하고 춤인/줌아웃 키인 Z, X 키가 잘 작동하네요.

마무리

processing에 대해서 한번 관심을 가져보시라고 간단히 3D Rendering를 해보았습니다. 참고로 이미 만들어진 box()함수의 도형이지만 좌표계 기준으로 각 좌표로 모형을 그리고 싶다면 공식홈페이지에 도형 그리는 함수들을 찾아보시고 따라서 그려보세요, 충분히 그릴 수 있을 거라 생각됩니다.

참고로 processing 함수들이 다양한 기능들을 제공해주기 기 때문에 위 포스트한 코딩에서 추가 할 코딩 부분이 있지만 다 생략하고 기본만 되는 부분만 코딩한거라 좀 단순한 표현이 되었네요. 그래도 핵심적인 표현은 다 했습니다. 이제는 여러분들이 도형을 그리고 그 도형에 대해서 움직임을 push~pop를 이용해서 제어하시면 됩니다.

갑자기 processing를 포스팅을 한 이유는 최근에 스위치 버턴과 조이스틱으로 조정하는 것을 배웠습니다. 한번 여러분들이 이 코딩을 기반으로 아두이노와 접목하면 좋을 것 같아서 소개하게 되었습니다.

한번 스위치 버턴 or 조이스틱으로 오늘 배운 도형을 컨트롤 해보고 싶지 않으신지요. 제가 답을 바로 드리는 것보다 여러분들이 한번 지난 시간에 processing에서 아두이노와 어떻게 연동을 했는지 상단에 참고 링크 포스트를 읽어보시고 연구를 해보셨으면 합니다.

[아두이노] 아두이노의 업로드 에러 

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/

아두이노를 실제로 다루다 보면 몇가지 문제가 생길 때 알아두면 좋은 팁들을 간단히 정리 했습니다.

1. 아두이노 업로드 환경 설정 에러

처음 아두이노를 업로드 할 때 발생하는 문제는 보드와 포트 설정입니다.

위 그림에서 보면 보드는 어떤 보드이고 포트는 정상적으로 잡혔는지를 확인 하셔야 합니다. 아두이노에 연결이 안되어 있는데 무조건 업로드 시키면 정상적으로 작동을 안하겠지요. 그리고 보드 부분도 기본은 우노이지만 여러분들이 사용하는 보드가 어떤 보드인지 처음 아두이노 IDE를 할 때 환경 설정을 해 놓으셔야 합니다.

2. 아두이노 업로드 포트 문제

평소 정상적으로 사용하던 아두이노가 갑자기 업로드가 안되는 에러가 발생하는 경우가 종종 있습니다. 대부분 이런 경우는 포트가 아두이노 IED에서 안잡히는 경우입니다. 내컴퓨터->장치관리자로 가시면 아래 그림창이 뜹니다.

포트는 장치관리자에 연결하는 순간 COM숫자로 표시가 됩니다. 위 그림은 잡힌 상태 그림이지만 안 잡혔을 경우는 제가 쓰는 운영체제에서는 기타 장치에서 느낌표로 포트가 잡혀 있더군요. 기타 장치나 포트쪽에 느낌표 COM숫자로 된 아두이노 포트를 찾으시면 됩니다.

그리고 해당 포트의 속성창을 누르면 드라이버 쪽에 드라이버 업데이트가 있는게 눌러 줍니다.

컴퓨터에서 드라이버 소프트웨어를 찾아보기를 눌러 줍니다.

그리고 아두이노 IED가 위치한 경로로 가셔서 drivers 폴더를 클릭한 뒤에서 확인을 누르시면 됩니다. 업데이트가 끝나면 장치관리자에 위 첫 그림처럼 Arduino Uno(COM숫자) 이렇게 잡히게 됩니다. 그리고 나서 아두이노 환경 설정에서 해당 포트를 다시 클릭해주면 정상적으로 업로드가 됩니다.

3. 아두이노 업로드 보드 자체 문제

연결된 상태에서 실험을 하면서 자주 업로드 할 때 업로드가 되지 않는 문제가 생기는 경우가 종종 있습니다. 보드 자체 문제라 이건 보드가 망가진게 아니라 잠시 몇분 정도 연결 된 포트 선을 제거 한 뒤 그냥 두세요. 보드에 있는 잔재 전류가 소멸할 때까지 방치해야 하는 것 같아요. 암튼 일정 시간 그냥 뒀다가 다시 연결하면 아무 문제 없이 작동합니다.

4. 아두이노 코딩 문제

어느정도 재미를 붙이시면 여러 블로그의 게시물들을 찾아 실험 소스들을 보시게 될 꺼에요. 초보분들의 경우 코딩을 그대로 했는데 "왜! 에러가 발생하지" 하는 경우도 있습니다. 대개 라이브러리 문제입니다. 해당 블로그의 라이브러리가 아두이노 IDE에 설치되어 있지 않으면 정상적으로 동작하지 않습니다.

위 그림처럼 라이브러리 포함하기를 하셔야 합니다. 기본 라이브러리는 라이브러리 관리로 가셔서 추가하시면 됩니다.

위 검색 필터하기에 해당 라이브러리 이름을 치시면 검색이 되고 설치하시면 되고요.

간단히 MPU6050 자이로센서를 설치해 봤습니다.

블로그 같은곳에서 라이브러리가 링크된 github나 아예 압축파일로 다운로드 받을 수 있게 해주는데 그런 압축파일로 된 라이브러리는 zip 라이브러리 추가로 설치하시면 됩니다.

MPU6050의 다른 라이브러리 파일을 이용할 경우는 직접 해당 파일을 다운 받아야 합니다.

• 출처 : https://github.com/kriswiner/MPU6050.git

zip 라이브러리 추가를 누르면 위 그림처럼 창이 뜨고 다운 받은 MPU6050를 열기를 누르시면 됩니다. 정상적으로 아두이노 IDE에 라이브러리가 추가 되어 있는지 확인하기 위해서 아두이노 IDE의 예제를 누르면 해당 MPU6050의 예제들이 추가되어 있는 것을 확인 하실 수 있을 꺼에요.

위 그림에서 보시는 것처럼 라이브러리 관리에서 MPU6050를 추가한 것과 github에서 직접 다운받은 MPU6050이 추가 되어 있는 것을 확인 하실 수 있죠.

대부분 외부 코딩을 참고하실 때 초보분들이 똑같이 코딩했는데 "왜! 실행이 안되지!" 하면 라이브러리 문제일 가능성이 큽니다. 이 부분은 이제 실수는 없겠죠.

마무리

위 설명한 몇가지는 사소한 부분인데 초보분들이 왜 업로드 안되지 하면서 어려움을 겪는 부분입니다. 잘 작동되는데 안되면 포트를 체크하고 그래도 작동이 안된다면 전원 케이블 제거 한뒤에 그냥 아두이노를 식힌다는 기분으로 놔뒀다가 다시 연결하면 정상적으로 작동합니다. 저도 처음에 아두이노를 접할 때 왜 갑자기 업로드 안되지 하면서 코딩에 문제가 있나 하면서 코딩 분석하면서 삽질 했던 기억이 나네요. 그리고, 포트도 이상없는 데 왜 작동을 안하지 보드가 망가졌나 하고 삽질 했던 추억이 있네요. 잠깐 전원 연결부분을 제거 한뒤에 한참 그 상태로 뒀다가 다시 연결해서 실험하니 정상적으로 동작하더군요.

의외로 이런 문제들이 종종 일어나니깐 참고해 주세요.

실험 포스트를 하려다가 오늘은 휴식하는 마음으로 간단한 주제로 포스팅 했네요.

[아두이노] 조이스틱 제어

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/

---

최근 포스팅 내용이 너무 코딩에 치우친 것 같아서 오늘은 가벼운 마음으로 간단히 실험 할 수 있는 주제로 꾸몄습니다. 가상시뮬레이터에서 제공하지 않지만 설명만으로 대충 이해 할 수 있는 부품이여서 부담 없이 읽으시면 됩니다. 오늘 다룰 주제는 조이스틱으로 꽤 재밌는 모듈입니다. 방향을 조정 할 수 있는 모듈로서 RC카와 같은 뭔가 조정이 필요한 곳에 사용되는 모듈입니다. 아두이노마이크로나 레오라르도보드가 있다면 컴퓨터 마우스를 만들고 싶은 부품입니다. 아무튼 조이스틱의 구조는 복잡하지 않습니다. 조이스틱 모듈에서 만들어내는 신호는 방향을 표현하는 아날로그 신호와 스위치를 표현하는 디지털 신호가 있습니다. 이 둘 신호에 대해 읽기를 할 수 있다면 쉽게 제어가 가능한 부품입니다. 간단한 실험으로 어떻게 동작하는지 살펴보도록 하겠습니다.

1. 조이스틱의 구조

위 사진에서 자세히 보면 Gnd, +5V, VRX, VRY, SW 이렇게 5개의 핀으로 구성되 있습니다. Gnd, +5V은 전원부분에 해당되고 나머지 3개의 핀에서 VRX, VRY은 아날로그 출력핀으로 방향좌표(x,y) 아날로그 신호를 만들어 내고 SW은 디지털 출력핀으로 스위치 버턴 역할로 디지털 신호를 만들어 냅니다. 참고로 위 사진에서 스위치는 방향 조정기의 몸통을 누르거나 옆에 스위치 버턴이 있습니다.

방향(x,y)과 스위치 한개를 누를 수 있는 모듈이구나 정도로 이해하시면 됩니다.

그러면 조이스틱의 방향키를 움직였을 때 아날로그 신호는 어떻게 변하는지 살펴보도록 할까요.

X, Y 좌표를 나눠서 생각하시면 됩니다. 위 그림처럼 가운데 동그라미가 조이스틱 중심 지점이라고 생각 하십시오, 그리고 조이스틱이 그 중심에서 오른쪽, 왼쪽, 위, 아래 그리고 각 대각선으로 나눠서 구분하시면 됩니다.

그러면 간단히 살펴볼까요.

아날로그 신호는 X축으로 0~1023의 값을 읽을 수 있습니다. 그 중심값 512가 됩니다.
아날로그 신호는 Y축으로 0~1023의 값을 읽을 수 있습니다. 그 중심값 512가 됩니다.

그러면 방향조정기를 조절하고 그 신호값을 만들어 낼려할 때 여러분들이 조이스틱 설계자라면 아날로그 신호에서 어디를 기준으로 설계 할 까요. 바로 중심값을 기준으로 잡겠죠. 아날로그 신호가 0~1023값이 고정되어 있으니 X축을 기준으로 좌우의 방향을 나눌려면 어느 위치를 중심으로 해야 할까요. 바로 신호값 512가 되겠죠. 아날로그 신호 512 위치가 중심이 되면 좌측은 X신호값이 0~512사이의 값이 되고 우측은 512~1023사이의 값이 되겠죠. 이 값을 기준으로 좌측과 우측의 이동 신호값으로 표현하면 됩니다. Y축도 이와 같습니다.

처음에 핀을 아두이노에 연결하면 읽은 신호값이 초보분들은 정확히 뭘 의미하는지 이해를 잘 못하지만 위 그림처럼 그림을 그리고 나서 가운데 원이 방향조정기로 움직인다고 상상하면서 좌표를 이해하시면 됩니다.

방향 좌표 수치를 이해가 되셨다면, 중심(X,Y) = (512,512)을 기준으로 신호값이 실제 조정기를 해당 방향으로 움직이면 어떻게 변하는지 이해 하실 수 있을 거라 생각됩니다.

주의사항

현실에서는 중심점(512,512) 값을 가지지 못합니다. 그 이유는 조이스틱이 기계이고 조립과정 또는 환경 요인에 의해서 중심값은 (512,512)가 나오지 않습니다. 같은 모듈이여도 제각각으로 중심값 신호가 나옵니다. 실제 측정한 조이스틱 중심값을 다시 선을 뽑았다 다시 연결하니깐 약간의 수치가 살짜 1정도 다른 값이 나오기도 하더군요. 그래서 초기 기준값을 정하는 보정 작업이 필요 합니다. 오늘은 코딩적인 부분을 다루는 것이 목적이 아니고 간단히 조이스틱이 어떻게 생겼으며 어떻게 값을 읽을지를 알아보는 실험이니깐 코딩에 대해서 깊게 안들어가고 간단히 이해만 해주세요.

만약, 보정작업을 수행하고 싶으시다면 중심값 관련 보정 작업은 중심값의 환경적 요인에 의해 차이가 나니깐 일정 값의 범위를 지정해서 그 값 안에 있으면 중심으로 간주하는 방법으로 보정해 주는게 가장 간단한 보정 할 수 있는 방법이라고 생각 됩니다.

인터넷에서 조이스틱 실험 예제들을 살펴보시면 정확한 수치로 쪼개서 나누지 않고 방향의 범위값을 허용하는 일정 범위를 지정해 놓고 그 범위에 들어오면 방향을 움직이는 걸로 판정을 내리더군요. 그게 가장 간단하면서 문제를 쉽게 해결할 수 있는 방법이라고 저도 생각 되네요.

아무튼 실제로 테스트 한 결과값은 아래 실험에서 자세히 나와 있으니깐 제가 쓰는 조이스틱의 중심값이 어떻게 나왔는지 아래 포스팅 내용을 보시기 바랍니다.

2. 회로도

---

• 준비물 : 조이스틱 1개, 아두이노우노
• 내용 : A0, A1 핀은 x,y 방향 아날로그 신호를 받고 5번핀은 스위치 신호를 받도록 선은 연결 하시오.

---

[ Fritzing 디자인 ]

조이스틱은 아날로그 핀 2개랑 디지털 핀 1개를 아두이노에서 여러분들이 원하는 핀을 선택하여 연결하시면 됩니다. 따로 복잡한 부분은 없습니다.. 실제로 조이스틱을 구매 안하셔도 이런 부품이 있고 대충 연결은 어떤식으로 이루어지는지만 위 그림을 보시면 됩니다. 조이스틱 모듈에 핀 이름이 다 적혀 있으니깐 위 그림을 안보더라도 쉽게 선을 연결 할 수 있을 거라 생각됩니다.

3. 코딩

---

• 사용함수 : pinMode(), analogRead(), digitalRead(), delay(), Serial.begin(), Serial.println()
• 내용 : 시리얼모니터로 조이스틱 값을 출력하자.

---

함수

• pinMode(사용핀, 입/출력모드) : 해당 사용핀을 어떤 모드로 사용할지 결정한다. INPUT_PULLUP모드로 설정(내부저항을 사용할 예정)
• analogRead(아날로그핀) : 아날로그 신호를 읽음(0~1023)
• digitalRead(디지털핀) : 디지털 신호를 읽음(0 or 1)
• delay(시간값) : 시간값만큼 대기한다.

통신

• Serial.begin(9600) : 시리얼통신 시작
• Serial.println(값) : 시리얼모니터로 값을 출력함.

---

[ 소스 ] : 제 블로그에 있던 소스를 가져옴.(수정하기 귀찮아서요)

const int AXIS_X = A0;
const int AXIS_Y = A1;
const int SW_P = 2; 
 
void setup() {
  Serial.begin(9600);
  pinMode(SW_P,INPUT_PULLUP);
}
 
void loop() {

  Serial.print("Axis_X: ");
  Serial.println(analogRead(AXIS_X));

  Serial.print("Axis_Y: ");
  Serial.println(analogRead(AXIS_Y));

  Serial.print("SW_P:  ");
  Serial.println(digitalRead(SW_P));

  delay(500);
}

방향 x, y 값은 아날로그 신호값 => analogRead(AXIS_X), analogRead(AXIS_Y)
스위치 값은 디지털 신호 값 =>digitalRead(SW_P)

참고로 내부풀업저항을 사용하기 때문에 스위치버턴의 초기 값은 1이 됩니다. 스위치를 누르면 디지털 신호는 0이 됩니다.

내부풀업저항이 기억이 안나면 다시 복습해야 겠죠. =>[아두이노] 스위치 버턴 제어

4. 결과

위 사진을 보면 조이스틱의 오차값이 발생합니다. 정확하게 중앙값이 생성되지 않습니다. 조이스틱을 만지지 않을 때 정중앙에 위치하는데 그 값이 X=499이고 Y=529가 표시 되네요. 중앙이니깐 X=512, Y=512 이라고 생각하시면 절대 안돼요. 아날로그 값을 읽을 때는 처음 읽을 때 자신이 생각하는 값이 나오지 않습니다. 그래서 초기 측정값을 기준으로 처음 보정 작업이 필요 합니다. 기준값을 우선 찾은 후 그 기준값으로 아두이노에서 어떻게 제어 할지를 정해야 합니다. 그리고 조이스틱은 같은 제품이여도 X, Y값은 약간씩 차이가 납니다. 그렇기 때문에 이 포스트 보고 포스트에 나온 값에 맞춰서 로직을 짜야지 하면 안되고 우선 자기가 사용하는 부품의 초기값이 몇인지를 체크하시고 나서 로직을 짜셔야 합니다.

마무리

---

조이스틱을 다루는데 어렵지 않죠. 해당 핀에 아날로그 신호랑 디지털 신호만 읽어오면 됩니다. 여기서, 조이스틱을 움직 일 때 그 움직임에 맞춰서 LED에 불이 들어오게 설계를 했는데 동일한 응용 예제를 누가 이미 다른 블로그에 시연을 해버려서 코드로직도 90% 이상 응용코드가 일치해서 실험은 했는데 포스트에 올리지를 못하게 되었네요. 기본 동작 소스는 90%이상 일치하더라도 이건 어쩔 수 없는 부분이지만 응용편이 90% 일치한 내용이 있다면 사실 올리기 좀 껄꺼롭기 때문에 실험은 했고 영상은 있는데 그냥 포기 했네요.

말로만 설명하자면 X축을 기준으로 if문으로 512을 중앙으로 가정하고 512이하면 0~512 사이면 왼쪽 LED에 불이 들어오고 아니면 512이상이면 512~1023 사이면 오른쪽 LED에 불이 들어오게 하고 Y축은 이와 동일하게 IF 조건문을 세우면 방향에 따른 LED에 불이 들어 오겠죠. 그리고 스위치 부분은 스위치가 눌러지면 LED 하나를 스위치 담당 LED로 해서 해당 LED에 불이 들어오게 표시하면 간단히 조이스틱을 조정하여 시각적으로 LED로 표현할 수 있었는데 너무 동일한 응용 예제라서 만들어 놓고 포스트에는 올릴 수 없었네요.

마지막으로, 가상시뮬레이터에서 제공되지 않는 부품 모듈이지만 한번 조이스틱으로 여러분들은 뭘 만들고 싶은지 상상만 해보셨으면 해요. 다른거로 표현 할 만한게 떠오르면 응용 예제로 올려 보도록 할께요. LED 응용 회로로 다 만들었는데 그냥 분해 했네요.

[번외] C 기초 코딩 문법으로 다른 언어 배우기

• 자바스크립트 튜토리얼 : W3Schools.com - https://www.w3schools.com/js/default.asp

오늘은 아두이노를 포스팅 하려다가 주말이고 해서 이번주에 배운 기초 코딩 문법으로 다른 언어를 습득에 대해서 이야기를 하려고 합니다. C언어의 기초 문법만으로도 다른 언어를 어느정도 기초 독학이 가능합니다. 그 예로 자바계열인 자바스크립트를 소개하도록 하겠습니다. 소개한 목적은 나중에 Steem API를 연동해서 Steem 블록체인 정보를 개인적으로 활용해 볼 수 있기 때문에 간단히 기초만 소개 합니다.

1. 자바스크립트 세팅

[기본 HTML]

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html> 

위의 코딩은 html 기본 구조입니다. 여기서 코딩하는 위치는 stript 태그 사이에 자바스크립트 언어로 코딩할 예정입니다.

[결과]

여기에서 자바스크립트 문법은

document.getElementById("demo").innerHTML = "Hello World!"

HTML 문서에 id "demo"의 위치를 가리키게 되는데 nnerHTML는 값을 가져오거나 설정할 수 있다. 해당 id를 가진 태그를 가리키고 거기에다 "Hello World!"를 저장한다고 생각하시면 됩니다.

<p id="demo> 저장위치 </p>

이런식으로 그냥 이해해 버리세요. 원래는 p태그 사이에 "Hello World"로 설정하는건데 쉽게 의미적으로 저 문장으로 자바스크립트에서 문자열을 html로 출력시킬 수 있구나 정도로 이해하시면 될 듯 싶네요.

document.getElementById("demo").innerHTML

이부분은 통째로 암기해놓고 계속 여기에다 출력할꺼에요. 자중에 관심있으신 분들은 정독으로 태그 관련 접근과 id 접근, 클래스 접근하는 방법을 따로 공부하셔야 합니다.

<p id="demo"></p>

아무튼, id가 "demo"인 p태그 사이에 "Hellow World"가 출력시키는 문장을 이해하셨으면 넘어 가겠습니다.

2. 자바스크립트 변수

참고 : [아두이노] 아두이노 코딩 변수

[ C언어 ]

int a = 10;
char b = 'a';
int c[6] ={1,2,3,4,5,6};
char d[6] = "hello";

[자바스크립트]

var a = 10;
var b = 'a';
var c = {1,2,3,4,5,6};
var d = "hello";

C언어에서는 자료형을 선언해 줘야 했지만. 자바스크립트는 var로 통일 됩니다. 알아서 값에 대해 잡아주니깐 더 쉽죠. var의 단점은 var로 선언한 변수가 재선언 되어도 에러가 발생하지 않습니다. 그래서 지역범위 변수인 let 형을 사용하기는 하지만 처음에는 간단한 표현 var로 편하게 사용하세요.

let a =10;
const b = 10;

let 의 범위 안에서 a변수는 재선언 불가능하기 때문에 변수 선언에 대한 에러를 줄일 수 있습니다. const 형은 상수형의 의미러 상수변수라고 생각하시면 됩니다.

예제)

<p id="demo"></p>

<script>
    var a ="hello World!";    
    document.getElementById("demo").innerHTML =a;
</script>

[결과]

추가 내용 Objects 변수

var  obj = {Name:"codingman", Age:"10", Address:"한국"};

변수를 위와 같은 객체 형식으로 저장할 수 있습니다. 이걸 배열로 저장하면 배열객체가 되겠죠. 제각각인 개별 요소들을 하나의 하나의 큰 묶음으로 묶어서 변수화 할 수 있는데 이걸 객체변수라고 합니다. 객체명으로 각 요소들을 쉽게 삽입, 삭제, 갱신을 할 수 있기 때문에 효율적인 코딩을 할 수 있습니다.

접근 obj.Name => "codingman"

접근자 콤마(.)로 각 요소를 쉽게 접근 할 수 있죠. 나중에 Steem API를 통해 Steem 블록체인 정보를 가져올 때 Json 형태로 만들어 놓고 접근자를 통해 쉽게 특정 데이터를 접근 할 수 있습니다. 그러니 표현하는 것을 잘 기억해 주세요.

예제)

<p id="demo"></p>

<script>
  var obj = {Name:"codingman", Age:"10", Address:"한국"};
  document.getElementById("demo").innerHTML = obj.Name;
</script>

[결과]

3. 자바스크립트 사칙연산(덧셈)

[C언어]

    int A = 10;
    int B = 2;
    int addAB = 0;
    addAB = A + B;

[자바스크립트]

    var a =10;    
    var b = 2;
    var addAB = a+b;    

기본 차이가 없죠. 확실히 자바스크립트가 변수 선언이 편하죠.

예제)

<p id="demo"></p>
<script>
    var a =10;    
    var b = 20;
    var addAB = a+b;    
    document.getElementById("demo").innerHTML =a+'+'+b+'='+addAB;
</script>

여기서, 문자열을 합치는 기호는 '+' 입니다.

예) "hello" + "World"

var a= "hello";
var b = World";
var c = a+b;
결과 c => "helloWorld" 됩니다.

var c = a+' '+b;
결과 c =>"hello World" 됩니다.

문자열변수들 사이에 따로 문자나 공백을 넣을 수 있습니다. a,b사이에 '+'문자를 넣고 결과 '='문자를 넣어서 출력을
"10+20=30"의 값이 출력되는데 아래 결과 보시면 되겠습니다.

[결과]

4. 자바스크립트 IF문

참고 : [아두이노] 아두이노 코딩 IF문

[C언어]

  int a = 10;
  int b = 5;
  if(a>b) { 
    참문장;
  }
  else {
      거짓문장;
  }
<

[자바스크립트]

  var a = 10;
  var b = 5;
  if(a>b) { 
    참문장;
  }
  else {
      거짓문장;
  }

if문은 동일합니다. 조건식이 참이면 참문장이 수행되고 거짓이면 거짓문장이 수행됩니다. 따로 공부할 필요가 없겠죠.

예제)

 var a = 10;
 var b = 5;
  
 if(a>b) { 
    document.getElementById("demo").innerHTML = "a가 보다 크다";
 }
 else {
    document.getElementById("demo").innerHTML = "a가 b보다 크지 않다.";
 }   

[결과]

5. 자바스크립트 For 문

• 참고 : [아두이노] 아두이노 코딩 배열과 FOR문

[C언어]

 int sum=0;
 for(int i=0;i<=10;i++){
    sum=sum+i;
}

[자바스크립트]

var sum=0;
for(var i=0;i<=10;i++){
    sum = sum + i;
}

변수 선언 부분만 var로 변경하고 나머지 동일 합니다. for문의 여러가지 표현이 있는데 초보분들은 이거 하나만 아셔도 됩니다.
예제) 0부터 10까지의 합을 구하시오.

<p id="demo"></p>

<script>  
 var sum=0;
 for(var i=0;i<=10;i++){
     sum = sum + i;
 }
 document.getElementById("demo").innerHTML = sum;
</script>

[결과]

6. 자바스크립트 While 문

• 참고 : [아두이노] 아두이노 코딩 WHILE 문

[C언어]

while(조건식){
    실행문;    
}

[자바스크립트]

while(조건식){
    실행문;    
}

동일합니다. 조건식이 거짓이 될때까지 계속 실행문이 반복 수행합니다. 따로 공부할 것이 없겠죠.

예제) 1부터 10까지의 합을 구하시오.(불가피하게 For문 예제 활용)

<p id="demo"></p>

<script>  
var input_val = 10;
var sum=0;

while(input_val>0){
    sum=sum+input_val;
    input_val--;
}
document.getElementById("demo").innerHTML = sum;
</script>

while문의 조건식 0보다 큰지를 비교하면서 반복하다가 0이 되면 빠져 나옵니다.
[결과]

7. 자바스크립트 Switch 문

• 참고 : [아두이노] 아두이노 코딩 Switch-case 문

[C언어]

switch(ch) {
    case 1:
        수행문1 ;
        break;
    case 2:
        명령문 2;
        break;                  
    default:
         불일치 명령문;
}

[자바스크립트]

switch(ch) {
    case 1:
        수행문1 ;
        break;
    case 2:
        명령문 2;
        break;                  
    default:
        불일치 명령문;
}

switch 문의 경우도 동일하게 사용합니다. 사실 모든 C언어에서 사용된 문법이 동일하게 적용됩니다. 변수 선언만 차이가 있을 뿐이죠. 그래서 C언어를 공부하시면 다른 언어를 어느정도 독학이 가능합니다. 단지 해당 언어에서 사용하는 일부 함수들을 찾아내는게 혼자서 독할 하실 때 어려운 점이고요. 기본 베이스는 어떤 언어라도 다 동일합니다.

예제)

<p id="demo"></p>

<script>  

  var ch = 'y';  
  switch(ch){
    case 'y': 
         document.getElementById("demo").innerHTML = "Input : Y";
         break;  
    case 'n':  
         document.getElementById("demo").innerHTML = "Input : N";       
         break;  
    default:  
         document.getElementById("demo").innerHTML = "잘못입력함";
  }  
</script>

[결과]

8. 자바스크립트 사용자 정의 함수

• 참고 : [아두이노] 아두이노 코딩 사용자 정의 함수

[C언어]

void 함수명(인자){
      명령문;
}

자료형 함수명(인자, 인자){
      명령문;
}

int add(int a, int b){
     return a+b;
}

자료형 char, int, float 등등을 말함. 반환값의 자료형인거 안 까먹으셨죠. void 반환되는 자료형이 없을 때 붙여주는 것이고요.

[자바스크립트]

function addAB(a, b) {
    return a + b;
}

자료형은 안붙지만 앞에 function이라는 함수명을 써주고 인자의 경우는 따로 자료형을 지정할 필요가 없습니다. 그렇게 까지 차이점은 없네요.

예제)

<p id="demo"></p>

<script>
  function addAB(a, b) {
    return a + b;
  }   

  document.getElementById("demo").innerHTML = addAB(10,2);
</script>

덧셈 함수를 사용자 정의 함수로 만들어 넣고 두 수를 더한 값 반환해주는 함수입니다. 그결과는 id가 "demo"인 p 태그로 출력됩니다.

[결과]

마무리

오늘은 C언어를 공부하면 다른 언어를 얼마나 쉽게 독학이 되는지를 자바스크립트의 기초 문법을 통해 살펴보았습니다. 이렇게 C언어를 공부하시고 나면 자바스크립트의 변수 선언부분과 사용자 정의 함수 표현이 바뀐 부분만 체크해주시기만 하면 나머지는 모두 동일하니깐 어렵지 않게 배울 수 있게 됩니다. for문에서 재밌는 for문 표현들이 있는데 그 부분은 거론 하지 않았지만 꼭 찾아보세요.

그리고, 자바스크립트에 사용되는 일부 함수들을 알아야 합니다. 위 소개한 것은 기초 문법이고 실제 사용하기 위해서는 사용되는 함수들을 알아야 제대로 활용 할 수 있습니다.

W3Schools.com => https://www.w3schools.com/js/default.asp

이곳에 가셔서 자바스크립트 튜토리얼을 필독을 해주세요. 충분히 하실 수 있을 꺼에요.

아두이노를 주말에 진행하려다가 간단히 어제 마무리로 쓴 글이 생각나서 자바스크립트로 포스트하게 되었네요.

이상 오늘 포스팅을 마무리 합니다.

[아두이노] 아두이노 코딩 사용자 정의 함수

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/

오늘은 제어문이 아닌 사용자 정의 함수에 대해서 살펴보도록 하겠습니다. 사용자 정의 함수라는 것은 프로그래머가 직접 만든 함수를 지칭합니다. Serial 라이브러리에서 제공되는 println()함수을 이용하여 우리는 쉽게 시리얼모니터로 직접 메세지를 출력했습니다. 시리얼통신을 위한 프로그램 코딩을 직접 만들 필요 없이 이런 함수들을 호출로 쉽게 코딩했습니다. 만약 프로그래머가 어떤 명령 로직을 짜놓고 그것을 함수로 만들어 놓으면 어떻게 될까요. 만든 함수를 원하는 위치에 호출만으로 해당 명령 로직을 수행 할 수 있게 됩니다. 이 사용자 정의 함수는 아두이노 코딩에서 꼭 필요한 개념이니깐 꼭 알아두세요. 본격적으로 사용자 정의 함수에 대해서 살펴보도록 하겠습니다.

1. 사용자 정의 함수

위 그림은 간단히 사칙연산에서 덧셈을 사용자 정의 함수로 표현한 예제입니다. 글보다는 실제 모습을 보여주고 설명하는게 빠를 것 같아서 간단히 덧셈함수를 만들어 보았네요.

우선, 사용자 정의 함수는 앞에 자료형이 붙습니다. 함수에 자료형이 붙는다는게 약간 이해가 안될 수 있는데 이 자료형은 사용자 정의 함수에서 반환되는 값의 자료형입니다. 함수에서 어떤 계산을 하고 특정한 값을 반환 시킬때 그때 그 값의 자료형으로 생각하시면 됩니다.

다시 설명을 하자면.

위 그림에서 add(10,20)의 사용자 정의 함수가 a, b에 10과 20의 인자가 되고 사용자 정의 함수에 던져주고 사용자정의 함수에서는 이 인자값을 기준으로 10+20의 계산이 이루어지겠죠. 그러면 덧셈함수이니 30이란 값이 계산되어 나옵니다. 이때 30이란 값이 반환 시킬 때 30의 자료형이라고 생각하시면 됩니다. 30이니깐 사용자 정의 함수의 자료형은 int add() 함수가 되겠죠. 어떤 자료형인지 아시겠지요. 그리고 반환시키는 명령어가 return 이라는 명령어가 수행합니다. "return a+b;" 하면 a+b의 값을 반환하시오라고 말로 이해하시면 됩니다.

결론, 위 그림처럼 a+b의 값을 return 반환 명령어로 반환되는 값이 정수형이니깐 함수 앞에다 int형을 붙였이게 된다는 것을 기억해 주세요.

그리고, void라는 표현이 있는데 이건 의미적으로 '빈'으로 비어있는 반환값이 없는 함수라는 생각하시면 될 듯 싶네요. 반환시킬 값이 있으면 반환되는 값의 자료형으로 함수 앞에 붙이시고요. 반환값이 없으면 void란 단어를 붙여서 표현하시면 됩니다.

[ 코딩 ]

[ 결과 ]

프리젠테이션에서 그림 그리기에 재미 붙여서 그림으로 만들었네요. 위 그림에서 보는 것 같이 대충 이런식으로 표현하시면 됩니다. 참고로 함수에 인자가 있을 때는 사용자 정의 함수에서는 인자 값에 맞게 자료형을 각각 선언해야하는 것은 꼭 기억해 주세요.

특이한 점은 아두이노에서는 사용자 정의 함수를 하단에 표현해도 됩니다. C 컴파일러에서는 하단에 표현할 경우 상단에 함수명을 선언해 줘야 합니다. 이게 좀 특이하더군요.

C언어의 경우,

int add(int a, int b){
  return a+b;
}
int main(void)
{
    int c=0;
    c= add(10,20);
    printf("%d\n",c);
    return 0;
}

이렇게 상단에 표현 해줘야 합니다. 아니면 하단에 표현할경우 상단에 해당 사용자 함수명을 선언을 꼭 해줘야 합니다.

int add(int a, int b);
int main(void)
{
    int c=0;
    c= add(10,20);
    printf("%d\n",c);
    return 0;
}
int add(int a, int b){
  return a+b;
}

나중에 코딩한 뒤에 컴파일 때 문제가 생깁니다. main()함수가 먼저 코드에 대해 처리하면 add()라는 함수가 정의되어 있지 않기 때문에 에러가 발생합니다. 그래서 main()앞에 표현을 하던 main()함수 앞에 함수 선언을 해 줘야 합니다. 혹시 C언어 컴파일로 사용자 정의 함수를 사용했는데 에러가 발생하는 이유를 찾지 못하고 해맬 수 있으니깐 이 부분을 주의해 주세요.

아두이노에서는 그냥 상관없이 돌아가더군요. 아두이노 내부에서는 setup(), loop()함수를 처리하는 main() 함수가 따로 하단에 있어서 loop() 아래 표현을 해도 main() 함수 상단에 표현된 것인지 모르겠군요.

3. 아두이노에서 사용자 정의 함수

아두이노에서는 언제 사용하면 좋을까요. 아마 초음파 센서 제어편과 3색 LED 제어편에서 보셨을 꺼에요. 초음파 센서를 이용하여 거리를 측정하는 식을 사용자 정의 함수로 만들어 놓으면 편하게 호출만으로 해당 명령을 수행할 수 있게 됩니다.

• 참고예제 : [아두이노] 초음파줄자 응용

void loop() {  
  if(digitalRead(5)==0){
    float v1=UltrasonicDistance(6);
    float v2=UltrasonicDistance(7);
    float total=v1+v2+10;
    Serial.println(total);
    delay(500);
  }  
}

위 로직에서 UltrasonicDistance()함수는 사용자 정의 함수로 거리를 측정하는 함수입니다. 참고예제에 가셔서 보시면 잘 나와 있습니다. loop()함수에서 두번 호출되었는데 만약 그냥 코딩을 했다면 UltrasonicDistance()안에 로직이 좀 길고 두번 중복 코딩을 했겠죠. 단 두줄로 코딩할 것을 꽤 길게 코딩을 하게 된다면 비효율적인 코딩으로 가독성도 떨어지겠죠.

위 코딩에서는 뭔지는 모른데 사용자정의함수에서 계산된 값이 v1과 v2에 저장되고 이 값들고 10을 더한 값을 시리얼모니터로 출력했네하고 쉽게 코드를 해석할 수 있습니다. 뭔가 복잡한 로직을 사용자 정의 함수로 만들어 외부로 빼놓으면 위에서 표현한 것처럼 쉽게 의미 전달 형태의 코딩으로 표현 할 수 있게 됩니다. 이게 바로 사용자 정의 함수의 장점입니다.

• 참고예제 : [아두이노] 3색 LED 제어

void loop(){
    Color(255,0,0);
    delay(1000);
    Color(0,255,0);
    delay(1000);
    Color(0,0,255);
    delay(1000);
}

위 로직에서 Color()함수는 사용자 정의 함수입니다.

void Color(int red, int green, int blue)
{
  analogWrite(rpin, red);
  analogWrite(gpin, green);
  analogWrite(bpin, blue); 
}

코딩은 간단합니다. 세개의 출력핀에 아날로그 값을 출력하는 명령어 입니다. 그런데 외부로 빼서 사용자 정의 함수를 만든 이유가 뭘까요. 바로 중복 코딩을 제거하는 방식입니다. loop()함수는 R->G->B로 순서대로 색이 1초단위로 출력됩니다. 문제는 하나의 색을 만들려면 RGB핀 3개에 아날로그 신호를 보내는 세줄의 명령어를 코딩해야 합니다. 그러면 코딩을 analogWrite()함수를 9번 코딩해야 합니다. 이걸 길게 코딩해 놓으면 시각적으로 보면 가독성이 떨어지고 무슨색이 출력되는지도 쉽게 알 수 없습니다.
하지만 사용자 정의 함수로 표현을 하면,

Color(255,0,0);

Color(R, G, B);

시각적으로 R의 인자만 255니깐 빨간색이구나하고 쉽게 해석할 수 있습니다. 이렇게 중복되는 코딩을 줄일 수 있고 가독성을 높이는 효과를 지닌게 바로 사용자 정의 함수입니다.

사용자 정의 함수를 쓰면 얼마나 좋은지 아시겠지요.

마무리

원래는 C언어 하면 포인트 변수를 배워야 하는데 그건 생략하겠습니다. 지금까지 배운 변수, 배열변수, IF, For, While, Switch, 사용자 정의 함수였네요. 이정도만 이해하시면 아두이노를 사용하는데 아무런 문제가 없습니다.
C언어는 이외에도 더 많은 문법이 있지만 사실 그렇게 까지는 아두이노에 사용되지는 않습니다. 알고 있으면 좋기는 하지만 위 기초정도만 이해하시면 왠만한 표현은 다 하실 수 있습니다.

이정도만 이해하실 수 있으면 다른 프로그램 언어도 충분히 독학으로 배우 실 수 있습니다. 모든 프로그램 언어의 문법은 거의 비슷하거든요. C언어만 잘하면 다른 언어를 배우는데 그렇게 어렵지 않습니다. 단지 처음에 표현하는 부분만 익숙치 않을 뿐이죠.

암튼 기본적으로 사용하는 기초만 이해하시면 무난히 아두이노를 제어 하실 수 있습니다.
포인트랑 클래스까지 더 나가고 싶지만 이부분은 프로그램 언어 영역이라 아두이노에 대한 흥미를 읽을 수 있기 때문에 너무 깊게 들어가는 것은 좀 문제가 있겠죠.

사설이지만 이번에 설명한 개념을 가지고 자바스크립트언어를 살작 독학으로 공부하셔서 Steem API를 사용해 보세요. 그리 어렵지 않을꺼에요. 스티미언 분들이라면 Steem API를 다루면 효율적인 스티미언 활동을 할 수 있습니다. 여기서 제공되는 함수들을 불러다 쓰기만 하면 되니깐요. Steem 블록체인을 읽고 쓸 수 있으면 많은 것들을 할 수 있게 됩니다. 그러니 한번 여기까지 따라오셧으면 w3school 사이트에 가셔서 자바스크립트 문법을 독학하시고 Steem API를 접근해 보세요.

아무튼 기초설명은 이정도로 해서 마무리 합니다.

[아두이노] 아두이노 코딩 Switch-case 문

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/

오늘은 제어문 중에 Switch-case 문에 대해서 살펴보도록 하겠습니다. 이전 시간에 IF문은 조건식에 의해서 참 or 거짓으로 둘 중 하나를 선택하는 제어문이라면 이번시간에 배우는 Switch-case문은 둘 이상의 case 중에 하나를 선택하는 제어문입니다. 쉽게 말해서, 여러개 중에 하나를 선택하는 제어문이라고 생각하시면 됩니다. IF문은 두개로 고정되어 있다면 Switch-case은 여러개의 선택문으로 개념을 잡아 주세요. 이제 Switch-case 문을 어떻게 다루는지 자세히 알아보도록 합시다.

1. Switch-case 문의 순서도

Switch문은 어떤 값이 입력이 되면 각 case 값들 중 일치하는 case의 명령문을 수행하는 제어문입니다. 입력값이 case 1과 일치하면 True로 다음 명령문 1을 수행하지만 일치하지 않으면 다음 case 2와 비교하고 일치하면 명령문 2를 수행하고 일치하지 않으면 다음 case문을 비교하게 됩니다. 여기서, 모든 case 값들이 일치하지 않으면 default가 수행 됩니다. 한마디로 여러개의 case 중에서 일치하면 해당 case 라인의 명령을 수행하고 일치하는 case가 없다면 default의 명령문을 수행한다고 생각하시면 되겠습니다.

그리고, 입력값이 case 2랑 일치하면 명령문 2를 수행하고 뒤에 break 명령으로 Switch문을 빠져 나오는데 이 break 단어를 만나면 더이상 진행하지 말고 해당 Swtich문을 빠져나오라는 명령이니깐 꼭 기억해 주세요. 만약에 break라는 명령문이 없다면 어떤 현상이 발생할까요.

case 1 : 명령문 1;
case 2 : 명령문 2;
case 3 : 명령문 3;
default : 불만족명령문;

이렇게 코딩되어 있으면 break가 생략할 경우 입력값이 2로 case 2랑 일치하여 명령문 2을 수행하고 다음 라인인 명령문 3과 불만족명령문까지 전부 수행하게 됩니다. 이 말은 처음 case 진입은 일치한 위치에서 진입이 이루어지고 수행명령은 일치한 라인을 기준으로 순차적으로 다음 라인의 명령문을 수행한다고 생각하시면 됩니다. case 2의 명령문만 수행할려면 해당 명령문 2를 수행한 뒤에 break 명령으로 더이상 진행하지 말고 해당 Switch문에서 빠져나오라는 강제 명령으로 이해해 주세요.

왜! break 명령을 쓰는지 이해 하셨죠.

2. Switch-case 문의 코드

위 그림과 같은 구조로 구성되었습니다. 입력값 ch변수이고 ch의 저장된 값이 case랑 일치하는 라인의 명령문을 수행합니다.

[ 동작 ]

• ch=='a' 이면 명령문 1 수행하고 break 명령으로 탈출
• ch=='b' 이면 명령문 2 수행하고 break 명령으로 탈출
• ch가 일치하는게 없다면 default의 불일치명령문이 수행되고 끝납니다.

대충 어떻게 동작하시는지 아시겠지요. 실제 코딩을 해볼까요.

[ 소스 ]

void setup()
{
  Serial.begin(9600);  

  char ch = 'y';
  
  switch(ch){
    case 'y': 
                Serial.println("Input : Y");              
                break;  
    case 'n':  
                Serial.println("Input : N");              
                break;  
    default:  
                Serial.println("error");                        
  }  
}

시리얼통신으로 입력 받으면 좋은데 코딩이 길어질 것 같아서 그냥 ch = 'y'가 입력 했다고 치고 진행해보도록 하겠습니다. switch(ch)함수로 입력을 하면 case가 'y'와 'n'이 있습니다. 그래서 'y'가 입력되었기 때문에 첫번째 case문이 수행되고 해당 라인의 "input : Y"라는 문자열이 시리얼모니터로 출력됩니다. 그리고 break명령문으로 switch문을 빠져 나옵니다.

여기서, 'y' or 'n' 이 아닌 다른 문자나 숫자를 입력하면 어떻게 될까요. 바로 default라인이 수행되고 시리얼모니터에는 "error"라는 문자열이 출력되고 끝나게 됩니다. 대충 switch 문을 이해하셨나요.

[ 결과 ]

위에 빨간 사각형이 입력 'y'과 일치하는 첫번째 "case 'y':"라인이 명령문을 수행하고 시리얼모니터로 결과가 출력됩니다. 그리고 break명령으로 switch문을 빠져 나오게 됩니다.

3. Switch-case 문 범위

원래 이경우는 잘 사용하지 않고 여러개의 범위를 나누어서 선택할 때는 IF~else if문을 사용합니다. 비주얼베이직 같은 경우 같은 표현이지만 Select 문이 Switch문인데 범위 지정하는게 의미적으로 편한데 C에서는 좀 표현이 제 경우 부자연스럽게 보입니다. 그래서 그냥 IF~else if문을 사용하고 있네요.

[ 범위 ]

swtich(ch){
    case 1 ... 10:
    case 11 ... 20:
    case 21 ... 30:
    default:
}

    case 'a' ... 'z':

이렇게 점 세개로 표시 합니다. 비주얼베이직의 경우는 To라는 단어로 범위를 표시를 합니다.

Select Case ch
    case 1 To 10 :
    case 11,12,13 :
    case else:
End Select

이런식이면 좀 좋은데 점 3개라 그리고 붙어서 표현하면 안되고 암튼 좀 부자연스러운 범위 지정이네요.

이제 지난시간에 IF문에서 성적 학점을 출력하는 예제를 switch문으로 변경해 보겠습니다.

[ 원소스 ]

void setup()
{
  Serial.begin(9600);
  
  int Eng = 75;
  if (Eng >= 90) Serial.println("A");
  else if (Eng >= 80) Serial.println("B");
  else if (Eng >= 70) Serial.println("C");
  else if (Eng >= 60) Serial.println("D");
  else Serial.println("F");
}

[ Switch-case 소스 ]

void setup()
{
  Serial.begin(9600);
  
  int Eng = 75;  
  switch(Eng){
    case 90 ... 100: 
                Serial.println("A");              
                break;  
    case 80 ... 89:  
                Serial.println("B");              
                break;  
    case 70 ... 79:  
                Serial.println("C");              
                break;  
    case 60 ... 69:  
                Serial.println("D");              
                break;  
    default:  
                Serial.println("F");                        
  }    
}

[ 결과 ]

대충 소스들을 보시고 코딩한 뒤에 입력값들을 다른 값으로 변경하고 실제 돌려보시면 선택 제어문의 동작을 어느정도 이해하실 수 있을거에요.

마무리

Switch문은 IF문가 다르게 여러개의 case 중에 일치하는 하나의 case의 명령을 수행하는 선택 제어문이라고 머리속에 넣어 두세요. 범위의 경우는IF~else if문을 그냥 사용하는게 보기 더 좋겠죠. 오늘 배운 범위 switch 문에서는 이런 표현이 있다는 정도만 알아 두시고요. 개별적인 경우에만 여러개 중에 하나를 선택할 때는 if문보다 Switch문이 가독성이나 표현에서 더 나을 것 같다는 생각이 듭니다.

코딩이라는 것은 우선 자신이 코딩하고 그 코딩한 내용을 읽기 편한 형태로 코딩하는게 무척 중요합니다. 그래서 프로그램 언어 교재들을 보면 스타일들이 약간씩 다릅니다. 분명 동일한 코딩인데 느낌 상 자신과 잘 맞지 않는 코딩들이 있어서 읽어도 무슨 표현인지 잘 이해가 안되는 경우가 많을꺼에요. 제가 쓴 글을 이해 못한신다고 해서 초보분들은 자신이 부족한게 아니라 제 코딩 스타일이 잘 안맞아서 그런거니깐요 여러 코딩들을 살펴보고 자신에 맞는 스타일을 찾아서 공부하시는게 진짜 중요합니다.

저도 C언어 책이 5권이 넘습니다. 필요에 따라서 여러 종류를 구매를 했는데 어떤 책은 보기가 쉽고 어떤 책은 나와 안맞아서 읽기가 힘든 책들도 있었습니다. 이게 저자의 코딩과 나의 코딩 스타일이 다를 때 발생하는 문제인데요 혹시 프로그램언어에 관심있으시면 서점에서 같은 종류의 서로 다른 저자들의 책들을 한번 읽어보세요. 어떤책은 느낌이 오고 어떤책은 봐도 모르겠다고 생각이 드는 느낌이 전혀 없는 책들도 있습니다. 그 책이 문제가 있는게 아니라 자신이 공부한 수준과 또는 지금까지 공부해왔던 코딩 스타일이 책을 쓴 저자와 나의 코딩이 다르기 때문입니다.

혹시 이글을 읽고 이해가 안되면 다른 루트로 검색을 통해서 해당 제어문을 찾아서 읽어 주시기 바랍니다. 아두이노 입문자에게 코딩을 할 때 필요한 최소 문법만 소개하는 포스트라서 생략된 부분이 많습니다. 이해가 안되면 타이틀 제목을 키워드로 해서 구글 검색을 통해 해당 문법을 따로 공부해주세요.

이상으로 마무리 하도록 하겠습니다.

[아두이노] 아두이노 코딩 WHILE 문

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/

오늘은 제어문 중에 While문에 대해 설명하고자 합니다. While문은 For문과 유사한 반복문을 수행하는 제어문입니다. 대개 For문에서 배운 코딩을 While문으로 표현을 억지로 시키는 경우가 있고 그 반대로 While문을 배운 표현을 억지로 For문으로 코딩해보라고 시키는 경우가 있습니다. 사실 동작원리가 유사하기 때문에 표현은 가능하지만 이렇게 처음 배운분들은 대개 어떤 경우에 For문을 쓰고 While문을 쓰는지 선택하기 어렵습니다. 오히려 두 제어문을 배우면서 초보분들의 머리속에서는 "나보고 어떤 것으로 코딩하라는 거야!"라고 생각이 들게 합니다. 진짜 안좋은 학습인데 둘은 구분지어 따로 사용하는 방법으로 배우셔야 합니다. 두 제어문은 동작원리는 동일합니다. 하지만 사용하는 방향은 차이가 있습니다. 그런데 두 제어문을 배우면서 똑같은 코딩을 하라고 강요를 하게 되면 사실 두 제어문을 어떻게 써야할지 역효과가 발생하기 때문에 억지로 For문의 코딩을 While문으로 표현하는 방식을 강요하지 않겠습니다. 사설은 이만하고 While문에 대해서 알아보도록 하겠습니다.

1. WHILE 문을 FOR 문과 왜 구별해야 하는가?

지난 시간의 For문의 순서도를 왜 다시 While문을 설명하는데 올려놨냐고 의아해 하시는 분들이 많을꺼에요. 이게 While문 순서도 입니다.

[ For 소스 ]

void setup()
{
  Serial.begin(9600);
  
  int A[6] = {10,20,30,40,50,60};
  
  for(int i=0;i<6;i++){
    Serial.println(A[i]);    
  }
}

[While 소스 ]

void setup()
{
  Serial.begin(9600);
  
  
  int A[6] ={10,20,30,40,50,60};
  int i=0;
  while(i<6){  
    Serial.println(A[i]);
    i++;
  }
}

[ 결과 ]

결과는 For문과 동일하게 나왔네요. 소스를 보니깐 "For문과 다르네!"라고 하시겠죠. 초기값, 조건식, 증감연산, 실행문의 명령부분들이 For문에 있던 것들이 그대로 표현되었습니다. 해당 명령들의 코딩 위치만 좀 바뀌었을 뿐이죠.

for(초기값; 조건식; 증감연산){
    실행문;
}

초기값;
while(조건식){
    실행문;
    증감연산;
}

위 그림처럼 구조가 나뉘고 순서도에서 본것처럼 For문이나 While문 유사하게 동작합니다. 그래서 처음 접하시는 분들은 For문과 While문에서 어떤 제어문을 써야할지 잘 구별을 못합니다. 처음 배울때 While문 배울때 억지로 While문으로 표현했던 내용을 For문으로 만들어 오라고 레포트를 내줬던 기억이 나네요. 의도는 For문의 사용능력도 키우기 위한 목적이였지만 처음 배우는 사람은 서로 다른 제어문이 똑같은 동작 코딩을 하라고 요구하면 나중에 뭔가를 표현하려고 할 때 두 제어문에서 선택에 대한 혼동을 하게 됩니다.

초보분들은 완전 분리된 개념으로 차이나게 학습 해야 합니다. 그래야 이럴 때 이 제어문을 사용하고 저럴 때 저 제어문을 사용하게 됩니다. 초보분들에게는 For문이나 While문이나 그게 그거라고 생각되기 때문에 개념을 잡는게 무엇보다 중요합니다.

2. WHILE 문과 For 문의 차이점

For문은 일정한 규칙의 반복문에서 사용하기 좋고 While문은 불규칙적인 반복문에서 사용하기에 좋습니다. 처음에는 구분하여 생각해 주세요. 즉, For문은 시작과 끝이 일정한 간격으로 규칙적으로 접근하거나 반복하거나 할때 For문을 사용하고 While문은 시작은 주어졌지만 끝이 날때까지는 명령을 가변적 반복할 때 사용한다고 생각하시면 됩니다.

위 그림 표현에서 For문은 반복하기전에 시작때 반복횟수가 정해져 있고 일정한 간격으로 해서 순차적으로 반복을 하게 됩니다. 이 느낌을 잘 기억해 주세요.

그리고 While문은 뭐랄까 반복 횟수가 정해져 있지 않고 While문이 실행되면은 그안에서 반복을 하다가 조건이 끝나면 빠져나오는 느낌이라고 생각하시면 됩니다.

예를들면, 번호 자물쇠가 있는데 자물쇠 번호를 모를때 자물쇠를 열려고 계속 시도하는 과정을 While문이라고 생각하시면 됩니다. 번호 자물쇠가 운좋게 한번에 눌러서 열릴 수도 있고 100번을 눌러서 열릴 수도 있잖아요. 이렇게 계속 반복적으로 번호를 누르는 동작을 수행하면서 어떤 조건에 만족하면 빠져나오는 원리라고 생각하면 좋을 듯 싶네요.

뭔가 For문은 순차적으로 정해진 횟수만큼 반복하는 느낌이고 While문은 진입하게 되면 계속 그 안에서 탈출하려고 반복적으로 시도하는 느낌이라고 생각하면 좋을 것 같네요.

다른 예로는 회원 주소록을 만든다고 해봅시다. 주소록을 입력하는 창을 코딩했을 때 사용되는게 While문이고 주소록을 조회할 때 사용되는게 For문의 느낌입니다.

while(상태=="Y"){
 이름 입력;
 나이 입력;
 주소 입력;
 계속 입력하시면 "Y" 종료하실려면 "N";
}

이렇게 회원 등록을 입력하고 나서 또 등록이 필요하면 "Y"을 입력해서 다시 While문을 반복합니다. 하지만 이게 시작값에서 회원 주소록이 꼭 입력횟수가 정해져 있는게 아니라 주소록 입력을 한명하고 나서 바로 나올 수 있고 2명이상이면 그 이상 입력하고 빠져 나오기 때문에 반복횟수가 정해져 있지 않는 상황에서는 For문 보다는 While문이겠지요.

주소록 조회 같은 경우는

for(int i=0;i<회원수;i++){
    회원[i]정보;
}

회원 주소록 조회할때는 이미 입력이 끝났고 고정된 회원수에서 회원정보를 조회하게 됩니다. 입력된 회원수만큼 검색을 해야 하잖아요 고정된 회원수 만큼 반복명령을 수행하게 됩니다. 그럴때 For문을 사용하게 되는 것이죠.

For문은 반복의 횟수가 정해져 있고 While문은 반복의 횟수가 정해져 있지 않는 제어문에 사용하기 좋다고 생각하시면 됩니다. 둘 다 반복문이지만 약간 다른 느낌으로 개념을 처음에 잡아 주세요.

그냥 이렇게 생각하세요. For문은 일정한 반복문을 수행하는데 고정된 정해진 횟수만 만큼 반복되는 제어문에 어울리고, While문은 고정되어 있지 않은 끝이 만족할 때까지 반복 횟수는 달라지는 제어문에 어울린다라고 생각하시면 되겠습니다.

엄밀이 따지면 For문도 반복 횟수를 고정 시킬 수 있고 반복 횟수를 가변적으로 코딩 할 수 있습니다. 그리고 While()문도 반복 횟수를 고정 시킬 수 있고 반복 횟수를 가변적으로 코딩 할 수 있습니다. 처음 공부하시는 분들은 둘을 동일하게 생각하고 배우게 되면은 코딩을 할 때 어떤것을 써야할 지 어려워 합니다.

처음은 이정도로 해서 차이나게 구분 지어 주세요. 참고로 For문을 이용해서 While문처럼 가변적인 횟수로 반복할 수 도 있고 While문에서 For문처럼 고정적인 횟수로 반복할 수 있는데 그렇게 코딩하면 코딩의 가독성이 떨어집니다.

그 상황은.

for(int i=0;i<10;i++)

이 문장 한줄 For문 안에 반복명령이 0~9까지 10번 반복수행한다는 것을 쉽게 확인 할 수 있습니다. 한줄로 for문의 반복횟수를 쉽게 이해할 수 있죠. 하지만 아래의 같은 경우를 살펴봅시다.

int i=0
while(i<10){ 
반복명령문; 
i++;
}

이 경우는 i++ 증감연산이 while문 안에 있기 때문에 코딩이 짧으면 쉽게 찾을 수 있지만 코딩이 복잡하고 길면 사실 while()문이 10번 반복되는지 확인이 쉽지 않습니다. 코딩 안에서 i=i+2로 2씩 증가한다면 반복 횟수는 절반으로 줄어 들겠죠. 코딩의 가독성이 현저하게 떨어집니다. 그래서 For문으로 표현하고 While문으로 표현하지 않습니다.

반대의 경우은,

while(입력값>0){
    반복명령문; 
    입력값변화;
}

이렇게 입력값변화에 따라서 while문은 반복합니다. 이 한줄로 "아! 입력값이 도달할때까지 계속 반복수행하구나!"로 가독성이 높습니다. 하지만 아래와 같은 경우를 살펴봅시다.

for(입력값;입력값>0; ){
 반복명령문;
 입력값변화;
 }

이렇게 표현을 할 수 있지만 실제 코딩을 하고나면 부자연스러워 집니다. 증감연산부분을 생략해서 빠진 느낌과 For문이 가지고 있는 고정적이고 순차적인 이미지에서 벗어나게 되고 억지로 실을 꿰맨 느낌을 갖는 코딩이 됩니다. 이 느낌은 아직 For문과 While문의 개념이 서지 않는 상태에서는 잘 모를 수 있습니다. 이부분은 나중에 코딩을 많이 연습해 보시면 그 의미를 이해가 됩니다.

3. WHILE 문

While문은 두가지 표현 형식이 있습니다.

while(입력값>0){
  명령문;
    입력값의 변화;
}

위 식은 표에서 설명 했듯이 while문의 명령문을 수행하기 전에 조건식에 만족하는지 먼저 체크합니다. 입력값이 '0'보다 큰가를 체크하고 '0'보다 크면 조건식이 참이 되고 명령문을 수행합니다. 이때 수행된 명령문에 의해 입력값은 변하게 되고 그 변화된 입력값이 다시 '0'보다 크면 방금 수행된 명령문을 다시 반복 수행하게 됩니다. 이렇게 입력값이 '0'보다 클 때 까지 계속 반복하는 제어문이라고 생각하시면 됩니다.

do{
  명령문;
    입력값의 변화;
}while(입력값>0);

위 식은 표에서 설명 했듯이 while문의 명령문을 먼저 한번은 꼭 수행한 뒤에 수행 후의 결과값을 기준으로 while()문을 계속 반복할지를 결정하는 방식입니다.

두개의 차이점을 예를 들면은,

while("배고파"){
    밥먹어;    
}

이렇게 처음에 "배고픈지"체크 한뒤에 배고프면은 밥을 계속 먹게하다가 어느정도 포만도에 도달하면 배가 안고파지면 While문을 빠져 나온다고 생각하시면 됩니다. 먼저 배고픈지 체크를 한 뒤에 밥을 먹는 방식이고요.

do{
 센서값 측정해;
 계산해;
}while("원하는 값 아냐!")

이렇게 표현하면은 아두이노가 센서의 값을 측정하고 나온 값이 원하는 값인지를 계산한 뒤에 원하는 값이 아니라면 다시 측정을 하고 원하는 값이 나올때까지 계속 반복하는 방식이라고 생각하시면 됩니다. 이렇게 먼저 명령을 수행한 뒤에 그결과를 토대로 다시 명령을 수행할지를 결정하는 방식입니다.

두가지 비유가 좀 이상했지만 순간 떠오른 것을 글로 쓰다 보니깐 적절한 비유가 생각이 안나네요.

혹시 이해가 안되면 다시 순서도로 보시기 바랍니다.

위 순서도에서 While문에서 조건식이 참일때 명령문을 수행하고 다시 조건식으로 돌아와서 체크합니다. 그리고 계속 True일때는 계속 반복하다가 조건식이 거짓(False)가 되면 빠져 나옵니다.

위 순서도에서 먼저 do의 중괄호 안에 명령문을 먼저 수행한 뒤에서 조건식을 체크합니다. 그리고 참이면 다시 do안에 문장을 반복 수행합니다. 조건식이 거짓(False)가 될때 비로소 빠져 나오게 됩니다.

위에서 말로 만든것처럼 이 순서도에 일상의 말로 대입해서 한번 표현해 보세요.

While 예제

이게 실험 할 예제를 마땅치 않아서 시리얼통신 예제로 loop()함수를 대신 while()함수로 표현 해보았습니다.

• 참고 자료: [아두이노] Serial 통신 제어

[ 원소스 ]

void setup() {
  Serial.begin(9600);    //시리얼 통신 9600 통신속도로 시작
}
void loop() {
  
  if (Serial.available() > 0) { //데이터가 수신되었는지 확인
    char ch = Serial.read(); //1byte 읽음
    Serial.println(ch); //1byte 읽은거 출력
  }
}

ch변수에 시리얼 통신을 통해서 들어온 1byte 데이터를 저장합니다. 그리고 저장된 값은 시리얼모니터로 다시 출력하는 프로그램입니다. 주석을 달았지만 이해가 안가셔도 괜찮습니다. 여기서 외부로 부터 시리얼통신으로 데이터를 읽고 그 데이터를 시리얼모니터로 출력하는 로직이라고만 알고 계시면 됩니다. loop()함수 안에서 이 동작을 계속 반복하잖아요. 그것을 While문으로 표현을 하면 아래와 같습니다.

[ While 소스 ]

void setup()
{
  Serial.begin(9600);  
  
  while(1){
    if(Serial.available() > 0) { //데이터가 수신되는지 확인
      char ch = Serial.read(); //1byte 읽음
      Serial.println(ch); //1byte 읽은거 출력
    }
  }  
} 

원소스에서 loop()함수는 전류가 공급되면 계속 무한 반복하는 함수라고 했죠. 그 역할을 while(1)으로 표현을 해서 setup()함수에 넣어 While문을 loop()함수와 동일하게 무한 반복을 시켜버려린 코딩입니다. 원소스나 While문 소스는 동일한 동작을 수행하는 명령입니다. while(1)은 조건식이 0이 아니면 참이라고 했죠. 1이니깐 무조건 While 문은 참이되고 영원히 참이되는 문한 방복함수가 됩니다. 그래서 시리얼통신으로 계속 데이터를 읽고 그 값을 시리얼모니터로 출력이 이루어 집니다. 원소스 loop()함수와 같은 함수가 되어버린 것이죠.

[ 결과 ]

결과는 위 그림처럼 나오게 됩니다. 시리얼 통신으로 'a'를 입력 하면 그 값이 시리얼모니터로 'a'가 출력됩니다. 아두이노 예제를 들어 표현을 하다 보니깐 시리얼통신 예제를 사용했네요. 시리얼통신 명령문을 설명하자면 또, 길어지니깐 참고 자료에 링크가 걸린 시리얼 통신 포스트를 보시기 바랍니다.

다른 예제로는,

 while (!Serial.available());  

이런 문장이 있으면 어떤 의미일까요. 데이터 수신되었는지 확인하는데 문장입니다. Serial.available()함수는 시리얼통신으로 데이터가 수신되지 않으면 반환값은 '0'이 됩니다. 수신되면 '0'이 아닌 값이 되겠죠. 그러면 저렇게 문장을 표현하면 데이터가 입력이 될 때 까지 무한 대기하게 됩니다. 한마디로, "난! 데이터가 입력될 때 까지 기다리고 있을꺼야!"라고 생각하시면 됩니다. 데이터가 입력이 되면 While()문을 빠져나와서 다음 명령문을 수행 하겠죠.

void setup()
{
  Serial.begin(9600);   
 
}  
void loop()
{
   while (!Serial.available());  
   char ch = Serial.read(); //1byte 읽음
   Serial.println(ch); //1byte 읽은거 출력
 
}

표현은 이렇게 됩니다.

시리얼통신 명령문으로 예제를 들었는데 좀 어렵게 되어 버렸네요.

loop()함수를 대신 while(1)로 표현을 했고 그다음 어떤 상태가 만족할 때까지 무조건 대기하는 "while(조건식);"을 다뤄 보았습니다. 아두이노 상에서 While문을 설명하려고 하니 적절한 예제가 시리얼통신 뿐이 생각 안나네요. 시리얼통신을 이해해야 하는데 오히려 더 복잡하게 되었네요.

그냥, 1부터 입력된 수 까지의 합을 구하시오. 예제로 하겠습니다. For문의 느낌이 강해서 이런 예제를 안들려고 했는데 While문의 동작을 이해하는 차원으로 소개 합니다.

int input_val = 10;
int total=0;

while(input_val>0){
    total=total+input_val;
    input_val--;
}

코딩에서는 input_val로 변수를 선언하고 임이의 숫자 '10'을 저장 시켰습니다. 이것을 입력값이라고 정하고 나서 조건식이 '0'보다 클때 참이니깐 입력값이 '0'이될때 까지 while문은 반복하게 됩니다.
그리고 'input_val--'로 한번씩 반복명령문을 수행할 때마다 input_val값은 1씩 감소하게 됩니다. 이 의미는 10이 입력되면 10에서 부터 1씩 감소해서 0이 될때 While문을 빠져나오게 된다는 의미가 됩니다.

입력된 수 까지의 합은,

total = total+input_val

input_val이 10일때  => total = 0 + 10;
input_val이 9일때  => total = 10 + 9;
input_val이 8일때  => total = 19 + 8;
...
input_val이 1일때 => total = 54 + 1;

이렇게 입력된 수까지의 합이 구해지게 됩니다. 마지막 "total = 55"가 되겠죠. While문이 어떤 느낌으로 돌아가는지 이해가 되셨는지 모르겠네요.

위 시리얼통신 예제는 이해가 안되면 이 예제로 이해해 주세요. for문 성향이 유사해서 예제 코딩을 좀 고민 했네요.

마무리

While문의 의미를 보다 쉽게 전달해야 했는데 For문과 차별화를 너무 고집한 나머지 예제를 어려운 걸 보여 드린 것 같고 좀 어렵게 설명이 되었네요.

For문과 While문은 반복 제어문으로 유사하지만 For문은 회수가 정해진 고정된 일련의 규칙적인 반복 제어문에 어울리고 While문은 고정되지 않는 반복 제어문의 표현에 어울리는 제어문이라고 생각해 주세요.

While문과 For문의 소스들을 많이 접해 보고 따라 해보면 그 차이를 구분하여 사용하실 수 있을꺼에요.

[아두이노] 아두이노 코딩 배열과 FOR문

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/

오늘은 제어문 중에 FOR문에 대해 설명하고자 합니다. FOR문을 들어가기 전에 배열에 대해서 살펴보고 FOR문을 다룰 예정입니다. 배열를 먼저 다루는 이유는 FOR문 한쌍을 이루고 있으면 같이 배우면 이해하기 쉽기 때문입니다. 배열와 FOR문은 한쌍을 이룬다고 생각하시면 됩니다. 1차배열은 FOR문 한개, 2차배열은 FOR문 2개, 3차배열은 FOR문 3개로 표현이 되는데 이게 무슨 소리인지 아직 모를 수 있으나 대충 배열과 FOR문의 갯수는 같구나 정도만 생각하시고 이제 본격적으로 포스팅 하겠습니다.

1. 배열변수

지난 시간에 변수 선언은 어떻게 했나요.

int a = 10;

a라는 변수를 int형으로 선언했고 a변수에 10을 저장했습니다. 대충 이렇게 변수를 선언 했습니다. 이것을 단일변수라고 부릅니다.

그러면, 배열변수는 a라는 변수명을 갖는 것 까지는 단일변수와 같은데 차이점은 여러개의 저장공간을 하나의 변수명으로 갖을때 이 변수를 배열변수라고 부릅니다. 즉, a변수에 여러개의 값을 저장할 수 있다는 것이죠.

[ 표현식 ]

A[6]는 A라는 변수명을 가지고 6개의 저장공간을 가지고 있다는 의미가 됩니다. A[6] 배열변수에는 순서대로 "10, 20, 30, 40, 50, 60"이라는 값들이 저장하게 됩니다. 선언하면서 값이 저장될 경우 숫자인 경우는 중괄호({ })를 사용하여 위와 같이 표현 합니다. 참고로 C언에서는 첫번째 위치가 0부터 시작합니다. 그리고 A[6]으로 표현했다고 해서 0부터 시작하니깐 7개의 저장공간이 있겠구나 생각하실 수 있는데 공간은 있는게 맞지만 마지막 7번째 저장소는 사용되지 않습니다. 배열을 선언하시면 A[7]하면 7개의 저장소를 갖는데 "0~6"의 위치(index)에 값을 저장한다고만 머리속에 담아 두시면 됩니다.

여기서, 배열변수의 각 저장소 접근은 다음과 같은 방법으로 접근하게 됩니다. 배열변수에 위치(index) 값으로 배열의 위치를 지정하고 그 위치에 저장된 값을 가리키게 됩니다.

** A[index] => ?**

실제로 접근해보면,

A[0] => 10
A[1] => 20
A[2] => 30
A[3] => 40
A[4] => 50
A[5] => 60

어떻게 배열변수가 선언되고 접근되는지 아시겠지요. 시리얼모니터로 출력을 한번 해볼까요.

[ 소스 ]

void setup()
{
  Serial.begin(9600);
  
  int A[6] = {10,20,30,40,50,60};
  Serial.println(A[0]);
  Serial.println(A[1]);
  Serial.println(A[2]);
  Serial.println(A[3]);
  Serial.println(A[4]);
  Serial.println(A[5]);
}

[ 결과 ]

배열변수를 선언하고 그안에 값을 넣고 다시 그 배열변수에 저장된 값을 출력을 하였습니다. 여기까지 배열변수의 선언과 출력을 어떻게 하는지 이해 하셨죠.

그런데 자세히 살펴보세요. Serial.println()함수가 6번 반복됩니다. 만약에 배열변수에 100개 아니 1000개의 데이터가 있다면 1000개의 println()문을 코딩해야 겠죠. 정말 비효율적인 코딩이겠죠. 이 문제를 해결하기 위한 제어문이 있습니다. 배열변수가 표현되면 한쌍을 이룬다는 제어문이 있는데 그게 바로 FOR문입니다.

이제 FOR문에 대해서 본격적으로 다뤄보겠습니다.

2. FOR 문

위와 같은 형식으로 표현이 되는데 시작값은 i=0부터 조건식(i<6)이 참이 될때까지 반복 수행 한다고 생각하시면 됩니다. 좀 햇갈릴 수 있는데 다음 표현으로 이해해 주세요.

번호 순서대로 진행되는데 1번 i=0에서 시작해서 2번 조건식(i<6)이 참이면 아래 수행문 3번을 수행합니다. 그리고 나서 4번 i++ 증감연산으로 i=i+1의 표현인데 1씩 증가한다고 생각하시면 됩니다. i가 1이 증가된 값에서 다시 2번 조건식으로 참인지 거짓인지 비교하게 됩니다. 이렇게 "i<6"이 거짓이 될때까지 수행문은 반복한다고 생각하시면 됩니다.

잘 이해가 안 갈 수 있으니 예제로 들어 설명할께요. 위 소스에서 Serial.println()문이 6번 반복된다고 했잖아요. for문으로 표현을 하면 다음과 같습니다.

[ 소스 ]

void setup()
{
  Serial.begin(9600);
  
  int A[6] = {10,20,30,40,50,60};
  
  for(int i=0;i<6;i++){
    Serial.println(A[i]);    
  }
}

i는 0부터 조건식(i<6)이 참이 될 때 까지 Serial.println()함수를 반복 수행하는 코딩입니다. 여기서 A[i]라는 표현을 잘 기억해 주세요. for문은 i가 0부터 1,2,3,4,5까지 반복 수행 합니다. 그럴 때 A[i]로 표현하면은 i의 값은 0부터 1,2,3,4,5가 되겠죠.

A[i] => A[0], A[1], A[2], A[3], A[4], A[5]

A[i]은 위에서 표현한 것처럼 순서대로 가리키게 됩니다. 이 표현이 가장 중요합니다. for문을 돌리는 핵심이고요.

배열 변수 A[10]이면,

for(int i=0;i<10;i++){
    A[i]
}

이렇게 기계적으로 나와야 합니다.

2차배열변수 A[5][5]이면

for(int j=0;j<5;j++){
    for(int i=0;i<5;i++){
        A[j][i]
    }
}

이렇게 기계적으로 나와야 합니다. 배열변수이면 for문은 저렇게 기본적으로 표현한다고 생각하시면 됩니다.

위 소스에서

  for(int i=0;i<6;i++){
    Serial.println(A[i]);    
  }

이 표현을 아시겠지요. 혹시 모르시겠다면 다음 순서도를 보시기 바랍니다.

시작 하면 i=0으로 초기값이 정해지고 조건식 i<6보다 작으면 참(True)일때 아래 Serial.println()문이 수행되고 i++로 i가 1이 증가합니다. 파란색 화살표 방향으로 참일때 계속 반복 수행 됩니다. 그러다가 i가 6일 때 거짓(False)이 되면 for문을 빠져나와 종료가 됩니다.

순서도의 진행 과정을 머리속에서 그려 보세요. For문의 진행과정이니깐 꼭 숙지해 주세요.

[ 결과 ]

이제 for문이 어떻게 돌아가는지 이해가 되셨겠죠.

3. FOR문을 언제 사용할까요.

기본적으로 배열변수가 있을 때 배열변수의 위치(index)를 순서대로 접근을 할 때 사용합니다. 그리고 순서가 있는 중복되는 코딩이 있을때 for문을 사용하여 중복된 코드 부분을 줄이고자 사용합니다.

예를 들어 아두이노에서 단일변수에 저장된 값을 bit단위로 추출하고자 할때를 생각해 봅시다. p라는 단일 변수에 저장된 8bit로 구성된 1byte 값을 bitRead(입력값, 추출위치)로 1bit씩 추출이 가능한 함수입니다. 이 함수를 이용해서 총 8bit로 이루어진 1byte 데이터를 1bit씩 추출하기 위해서는 bitRead()함수가 8번 중복이 되겠죠. 이 중복된 명령을 for문으로 표현하면 다음과 같이 간단히 표현 됩니다.

const byte p=0B01110000;
for(int i=0;i<8;i++){
     bitRead(p, i);
}

[ 결과 ]

추출한 결과를 println()함수로 순서대로 출력되었네요.

간단히 정리하자면 for문은 일정한 순서가 있고 반복되는 코딩이 있을 때 사용하는 제어문이라고 생각하시면 됩니다. 명령이 일정한 순서가 있다면 "아! for문으로 표현해야지!"라고 생각을 하시면 됩니다. "배열변수가 있네! for문을 써야지!" 이렇게 바로 생각을 떠올리셔야 합니다.

4. 추가 공부

1) 문자열변수

문자배열변수는 char형으로 선언되고 "abcde"라고 단어를 그냥 표현하시면 됩니다. 참고로 5글자라고 해서 A[5]로 하시면 안됩니다. 문자의 경우는 마지막 끝나는 기호 '\0'이 저장되어야 합니다.

문자열 => 단어+'\0'

이 표현을 주의하셔야 합니다. 문장의 끝을 나타내는 기호를 저장하는 공간이 필요하니깐 문자배열변수를 선언할때 문자의 갯수와 마지막 문자의 끝 '\0' 기호를 포함된다는 것을 기억 해주세요. 그리고 각 알파벳을 접근하는 방식은 배열의 위치(index)로 접근하시면 해당 알파벳을 접근 할 수 있습니다.

위 그림에서 처럼 A[i]의 위치의 알파벳을 순서대로 출력했네요. 저장하는 것과 접근하는 것과 출력하는 것의 느낌을 잘 기억해 주세요.

2) 2차원배열

위 그림은 2차원 배열입니다. 표에 있는 것은 위치(index)라고 생각하시면 됩니다. 3차배열은 3x3x3인데 위 그림의 2차배열을 x,y 평면으로 생각한다면 3차는 여기서 z축으로 깊이 만큼 x,y 평면인 2차 배열이 3개 있는 거라고 생각하시면 됩니다. 2차 배열은 예를 들면은 이미지같은 평면적 데이터를 제어할 때 사용하고요. 3차 배열은 3차원 형태의 3D 데이터를 제어할 때 사용한다고 생각하시면 됩니다.

3차배열은 이런 느낌입니다.

2차 배열을 For 문으로 접근한다면

for(int j=0;j<3;j++){
    for(int i=0;i<3;i++){
        A[j][i]
    }
}

이렇게 접근을 하겠죠.

For문을 편하게 사용하실려면 다양한 예제들을 구글 검색을 통해 찾으시고 직접 코딩을 해보셔야 합니다. 왜냐면 문법을 알아도 정확히 어떤 느낌의 제어문인지 그 의미를 잘 모르시는 분들이 많아요. 그러다보니 For를 활용을 잘 못하더군요. For문은 계속 다양한 예제를 검색하셔서 직접 코딩하고 그 코딩의 의미 해석을 여러번 하셔야 For문을 자유자재로 쓰실 수 있을거에요.

3) 증감연산자

[ 증감연산자 ]
i++ => i=i+1 => i가 1씩 증가
i-- => i=i-1 => i가 1씩 감소

대충 '++'과 '--'의 의미를 아시겠지요. 그런데 이게 좀 햇갈려 하시는 분들이 많아요. 혼동하는데 과거 전산직 공무원 시험문제로 자주 출제되는 문제인데 지금은 바뀌어서 나온지는 모르겠네요. 아무튼 혼동하시는 분들이 은근 많습니다.

증감연산자는 원래는 다음과 같은 4가지로 표현됩니다.
++i => i를 먼저 1증가 시키고 나서 대입
i++ => i를 먼저 대입하고 나서 1증가
--i => i를 먼저 1감소 시키고 나서 대입
i-- => i를 먼저 대입하고 나서 1감소

int a =10;
int i = 2;
s1 = a + (++i);

int a =10;
int i = 2;
s2= a + (i++);

이 둘의 s1과 s2 값은 다릅니다.

그리고,

int a =10;
int i = 2;
s1 = a + (++i);
s2 = a + (i++);

이렇게 연달아 있으면 s1과 s2에 저장된 값은 같습니다. 그 차이점을 아시면 증감연산자를 혼동하지 않습니다. 위의 증감연산자 4가지 표현 부분의 해답이 있습니다.

s1 = a + (++i);

a+i가 i=2일때 i를 먼저 1을 증가시킨후 a에 더해집니다. 그래서 i은 3이 되고 s1은 13이 됩니다.
그다음 문장에서는

s2 = a + (i++);

a+i가 i=3이 된 상태에서 먼저 a에 더한 후에 i가 1이 증가되기 때문에 a+i은 s2에 13이 저장됩니다.

혹시 햇갈릴 수 있으니간 위 코딩을 setup()함수 안에다가 넣고 println()문으로 그 값을 출력를 해보세요.

마무리

For문에 대해서 살펴보았습니다. For문은 일정한 규칙으로 반복수행 할 때 배열변수가 있을 때 중복되는 코드들이 있을 때 그 부분을 간소화 된 코딩으로 표현을 할 때 사용합니다. 꼭 숙지해 주세요.

For문이 처음에는 잘 이해가 안될 수 있는데 계속 For문 예제를 찾아서 몇번 코딩하게 되면 이해가 되실 거라 생각합니다. 대개 C언어 For문에 대해 배울때 숙제로 많이 내주는게 구구단 프로그램 입니다. 한번 C언어로 된 구구단 프로그램을 찾아보시거나 상상력을 동원해서 표현을 직접 코딩을 해보세요. 2차 배열의 대표적인 예제이니깐요.

제 포스트 중에 종종 For문을 써왔는데 한번 잘 살펴보세요. 여러게 아두이노 핀을 제어할 때 주로 For문을 사용했고요. 패턴을 만들때 배열변수에 저장하고 그것을 출력 할 때 For문을 사용하였습니다. for문을 얼마나 자유자재로 잘 사용하느냐에 따라서 아두이노의 코딩량을 대폭 줄일 수 있으니깐 꼭 For의 의미를 이해해 주세요.

계속 머리속에서 "중복되는데 순서를 가지고 있다 For문을 써야지", "배열변수네 For문 써야지" 생각하시고 어떻게 접근하는지만 숙지하시면 For문을 사용하는데 어려움이 없을꺼에요.

마지막으로, For문으로 1부터 100까지 더한 합을 구해 보세요. '*'기호로 삼각형, 마름모 등 다양한 도형으로 출력시켜 보세요.

[아두이노] 아두이노 코딩 IF문

• 온라인 가상시뮬레이터 : https://www.tinkercad.com/

오늘은 제어문 중에 IF문에 대해 설명하고자 합니다. IF문은 어떻 구조이고 어떤 느낌인지 그리고 코딩할때는 어떤 느낌일 때 IF문을 사용하는지에 대해서 알아봅시다.

1. 비교연산자

위 표에 나와 있는 비교연산자의 의미를 잘 기억해 두세요. 다음에 다룰 IF문에서 조건문으로 사용하는 표현입니다.

2. IF문

IF문은 기본적으로 3개의 형식으로 구분하여 살펴 볼 수 있습니다. 위 표가 약간 가독성이 떨어지게 표현 되었는데 자세히 한번 읽어보세요. IF문은 조건식이 참이냐 거짓이냐 두가지 상태로 나눌 때 사용합니다.

예)

조건식이 밥을 먹었는지 체크했는데 참이면 "응! 먹었어"라고 답변할 것이고 거짓이면 "아니! 안먹었어!"라고 답변하게 됩니다. 이렇게 IF문은 조건식으로 참 or 거짓으로 나눌때 사용합니다. 대충 어떤 느낌인지 아시겠지요.

이제 if문 표현들을 살펴보도록 하겠습니다.

1) IF문

if(조건식) { 참 명령; }

if(조건식)은 조건식이 참이냐 거짓이냐 구분 할 때 사용합니다.

  if(a>b) { 
    Serial.println("a>b");
  }

이 문장을 잘 살펴보세요. if문의 "a>b"의 조건식이 참이되면 if문의 영역인 중괄호({...}) 안의 문장을 수행합니다. if문만 딸랑 있고 중괄호로 되어 있으면 거짓이면 if문 안에 문장을 수행하지 않고 지나가고 참이면 if문 안의 있는 문장을 수행한다고 생각하시면 됩니다.

즉, a>b가 참이면 시리얼모니터에 "a>b"라는 문장이 출력되고 만약 a>b가 거짓이라면 a가 b보다 크지 않다는 의미로 시리얼모니터로 아무런 문장도 출력하지 않습니다. 오로지 참일때만 시리얼모니터로 "a>b"가 출력됩니다.
[ 블록 ]

블록 코드를 보시면 IF문이 "a>b"가 참일때 안에 파란블록 println()문이 수행되고 거짓일때는 그냥 지나 갑니다. 블록으로 코딩하면 이 블록은 loop()함수으로 코딩되어 무한반복하니깐 의미만 이해하시고 text창에서 아래와 같이 코딩하세요.

[ 소스 ]

void setup()
{
  Serial.begin(9600);

  int a = 10;
  int b = 5;
  if(a>b) { 
    Serial.println("a>b");
  }
}

[ 결과 ]

여기서, 거짓일 때 b가 더 크다는 표현을 출력하고 싶지 않으세요. 그런 표현이 다음 두번째 형식입니다.

2) IF~else 문

  if(a>b) { 
        Serial.println("a>b");
  }
  else {
        Serial.println("b>a");
  }

위 식에서는 else문이 추가 됩니다. if문이 조건식이 참이면 "a>b"문장이 출력되지만 조건식이 거짓이면 else이하 문장을 수행합니다. 이말은 if문이 참일때 if문을 수행하고 거짓일때는 else 문을 수행한다고 구분 지으면 됩니다.

if(조건식) { 참 }
else { 거짓 }

이 부분을 머리속에 넣어주세요.

[ 블록 ]

파란블록을 잘 보세요. "a>b"참일때 "a>b"가 출력되고 거짓일때 "b>a"가 출력됩니다. 블록으로 대충 어떤 느낌인지만 잘 구분해 주세요.

[ 소스 ]

void setup()
{
  Serial.begin(9600);

  int a = 5;
  int b = 10;
  if(a>b){
        Serial.println("a>b");
  }
  else {
        Serial.println("b>a");   
  }
}

[ 결과 ]

결과창에 소스를 보시면 약간 차이가 있는 것을 보실꺼에요 중괄호"{"와 "}"가 사라졌습니다. if문에서는 만약 수행할 명령문이 한줄일 경우는 중괄호를 생략 가능합니다. 위 소스에서는 중괄호를 넣고 결과에서는 중괄호를 생략한 이유는 우선 중괄호를 넣고 if문의 영역을 구분하고 그 영역을 참일때와 거짓일때 수행된다는 개념을 잡기 위해서 중괄호를 넣었어요. 처음 배우시는 분들은 한줄이라도 중괄호를 넣어주세요. 익숙해지면 한줄짜리를 생략하시고요. if문에 대한 의미를 이해하시는게 중요하니간 중괄호를 넣는 습관을 가져주세요.

[ 참고 사항 ]
위 코딩에는 약간 문장 상 문제가 있습니다. 뭘까요. "a>b" 크지 않다고 해서 b가 크다고 말할 수 없습니다. 그것은 "a==b"가 같을 수 있는 조건이 나오기 때문입니다.

즉,

void setup()
{
  Serial.begin(9600);

  int a = 5;
  int b = 10;
  if(a>b){
        Serial.println("a>b");
  }
  else if(a==b){
        Serial.println("b==a");   
  }
  else {
        Serial.println("b>a");   
  }
}

위와 같이 코딩을 해야 합니다. 한번 위와같이 코딩하시고 a, b 변수의 값을 동일한 값으로 넣어보세요. 그리고 시뮬레이터에서 실행시켜서 시리얼모니터에 어떤 문장이 수행되는지 살펴보세요.

비교 대상이 여러개 일때는 IF ~ else IF 문을 통해서 비교가 이루어집니다. 첫번째 조건식이 거짓이면 두번째 조건식을 비교해서 참 or 거짓을 결정하는데 만약에 두번째 조건식에도 거짓이면 else 문이 수행되는 표현입니다.

다음에 이 제어문에 대해서 살벼도록 하겠습니다.

3) IF ~ else IF 문

마지막 세번째 형식은 IF문이 하나 더 추가하는 방식입니다. IF문이 참과 거짓 두가지 상태뿐이 없습니다. 그런데 비교 대상이 둘 이상일때가 생기게 됩니다. 예를들어 시험을 보고 영어 점수의 학점을 주려고 할때 "A,B,C,D,E,F" 학점을 줄때 IF문으로 하면 어떻게 될까요.

영어  = 75점;
if(영어>=90){ A학점}
else{
  if(영어>=80){ B학점}
  else {
      if(영어>=70){C학점}
        else{
          if(영어>=60){D학점}
            else {
              F학점
            }
        }
    }
}

이렇게 표현해야 됩니다. else 이하 문으로 계속 if문이 추가되지요 이렇게 복잡하게 표현하지 않고 다음과 같이 간단히 표현됩니다. 비슷한 의미인데 가독성으로 이렇게 표현 하지요.

영어  = 75점;
if(영어>=90){ A학점}
else if(영어>=80){ B학점}
else if(영어>=70){C학점}
else if(영어>=60){D학점}
else {F학점}          

만약 영어가 90이상이면 A학점
거짓이면 영어가 80점이상이면 B학점
거짓이면 영어가 70이상이면 C학점
거짓이면 영어가 60이상이면 D학점
거짓이면 F학점

어떤 입력값에 대한 여러개의 비교가 필요할 때 이렇게 IF문을 활용하게 됩니다. 이런 표현을 잘 숙지해 주세요. 여기서 다중 IF문의 의미를 잘 이해하시면 다양한 곳에서 활용이 가능합니다. 다중 IF문에서 조건식이 참과 거짓의 의미를 약간 혼동하시는 분들이 많습니다.

위 표현은
90이상
89~80
79~70
69~60
60미만

이걸 의미하는데 잘 매칭이 안되는 분들이 많은 것 같아요. 실제 영어 점수를 다르게 입력해서 어디에서 멈춰 결과가 출력되는지 체크를 여러번 하셔야 표현의 의미를 알 수 있습니다.

[ 블록 ]

[ 소스 ]

void setup()
{
  Serial.begin(9600);
  
  int Eng = 75;
  if (Eng >= 90) Serial.println("A");
  else if (Eng >= 80) Serial.println("B");
  else if (Eng >= 70) Serial.println("C");
  else if (Eng >= 60) Serial.println("D");
  else Serial.println("F");
}

[ 결과 ]

75니깐 C학점으로 출력되었네요. 75점이니 C+이 되어야 겠지만 암튼 대충 다중 IF문까지 코딩 해 봤습니다. 이 세가지 표현 방식을 가상시뮬레이터에서 그대로 코딩해보세요. 위 예제대로 하셔도 되고 다른 것을 생각하셔서 IF문을 적용하셔도 됩니다.

IF문 어디서 사용할까요?

코딩을 하면 IF문을 사용안하는 곳이 없습니다. 대부분 IF문을 사용합니다. 아두이노에서는 체크문으로 많이 사용합니다. 센서에서 입력된 값이 정상적으로 들어왔는지 확인할때 사용합니다. 또는 센서의 값을 읽어왔는데 그 값에 따라서 특정한 동작을 수행할 때도 사용합니다.

예를들면,

int val = digitalRead(센서디지털핀);

이와 같은 표현으로 센서값을 읽어올 경우에 val에는 디지털 신호 1과 0의 값을 갖게 됩니다. 그러면 IF문으로 사용하게 된다면 이렇게 표현을 할 수 있습니다.

if(val!=0){
  val은 1입니다.
}
else {
 val은 0입니다.
}

두가지 상태로 나눌 수 있게 됩니다. val 1일때 1의 문장을 수행하고 val 0일때는 0의 문장이 수행 될 수 있습니다. 만약, LED를 제어 한다면은 어떻게 될까요. LED가 13번 핀에 연결되었다고 가정를 해봅시다.

if(val!=0){
 digitalWrite(13,HIGH);
}
else {
 digitalWrite(13,LOW);
}

val이 1이면 13번 디지털핀에 HIGH(5V)상태로 5V의 전류가 공급됩니다. val이 0이면 13번 디지털핀에 LOW(0V)의 전류가 공급됩니다. 즉, 13번 핀은 센서의 값이 1일때 불이 들어오고 센서의 값이 0일때 불이 꺼지게 됩니다.

이렇게 IF문을 통해 두가지 상태를 제어할 수 있게 됩니다.

마무리

오늘은 IF문을 배웠습니다. IF문의 의미와 사용법을 잘 이해해 주세요. 아두이노에서 대개 제어를 할때 IF문을 활용하여 특정한 명령을 내리게 됩니다. 주의할 것은 IF문은 참과 거짓으로 이 두가지 상태만 있지만 그렇다고 해서 1과 0의 두가지 상태만 있는게 아닙니다. IF문은 0이 아닌 모든 것이 참이 됩니다. 햇갈리 수 있는데요. 조건식이 0이 아니면 IF문은 참이 된다는 소리가 됩니다. IF(조건식)에서 조건식의 결과가 0이 아니면 무조건 참이라는 의미가 됩니다. 1도 참이고 1.2도 참이고 2도 참이라는 소리입니다. 좀 표현이 그렇지만요 0과 아니면 조건식은 무조건 참인데 우선은 IF문은 참과 거짓으로 두가지 상태로 나뉜다고만 구별해서 사용하시고 너무 복잡한 생각은 잠시 미뤄주세요.

오늘 배운 IF문의 의미만 잘 이해하시면 아두이노를 재미있게 즐길 수 있습니다. 그냥 편하게 일상의 대화처럼 위에서 표현대로 IF ("너 밥먹었니") 참이면 "응! 먹었어!" 거짓이면 "아니! 안 먹었어!" 라고 일상의 표현들로 IF문을 사용해 보세요. 계속 그렇게 문장을 만들고 상상을 하시면 IF문은 어떤 느낌인지 느끼실 꺼에요.