아두이노 코딩-53: Processing 아두이노 인터페이스에 의한 RGB LED Dimmering

in #kr6 years ago (edited)

Processing 코드를 사용하여 아두이노에 설치된 3색 LED 즉 RGB LED의 밝기를 analogWrite() 명령을 실행하여 조절해 보자. 밝기가 변동되는 것을 Dimmering 이라한다.

noname01.png

아두이노에 설치한 RGB LED 의 3색 발기 조정은 일전에 포스트한 아래의 블로그를 참조하기로 하자.

아두이노 코딩-33: 3색 RGB LED PWM analogWrite 제어
https://steemit.com/kr/@codingart/33-3-rgb-led-pwm-analogwrite

이 블로그에서 사용하였던 RGB 3색 LED 배선을 배선 핀 번호만 변경하여 사용이 가능하다.
아래 그림에서 사용된 RGB LED는 양극형 LED 임에 유의하고 반대의 극형 RGB LED 있응ㄹ 수 있음에 유의하자. 아울러 별도로 디지털 데이터 핀 9번에 붉은색 소형 LED를 전류 제한 저항과 함께 추가로 설치한다. 빵판에서 GND를 공용으로 사용하면 배선 절감이 가능하다.

noname02.png

빨간색 단색 LED 또는 RGB LED 의 색상을 조절하기 위하여 포텐쇼미터 대신 (0, 255) 에 이르는 mouseX 값을 사용하기로 하자. 동시에 y 좌표 값에 따라 흑백띠, 빨간색 띠, 초록색 띠 및 청색 띠를 생성하여 색상 별 포텐쇼미터로 사용하기로 하며 마우스의 위치를 아래 위로 움직임에 따라 mouseY 값을 얻어내기로 한다.

noname03.png

Processing 코드

시리얼 인터페이스를 위해 processing.serial.*를 헤더에 설정하고 Serial 의 클라스 명령을 위한 명칭 port를 선언한다.

색상띠를 그래픽 처리하기 위해서 RGB 가 각각 100%인 백색 즉 흰색을 (255, 255, 255) 로 정의하고 마찬가지로 빨간색, 녹색 및 청색 RGB 값도 정의한다.

setup()에서 색상띠를 그래픽 처리할 수 있는 스크린 크기를 (256, 220) 으로 정의한다. 높이 기준으로 0∼50까지는 흑백, 70∼120까지는 빨간색, 120∼170까지는 초록색, 170∼220까지는 청색 띠이며 각각 밝기가 변하는 명암 형태의 띠이다.

noname04.png

draw()에서 길이 256, 높이 50인 흑백띠를 stroke(i) 값을 바꾸어가면서 즉 명암을 주어 가면서 line 으로 플로팅한다.

색상별 명암 띠는 setGradient 루틴을 이용한다.
mouseX 의 값은 명암 띠 값이며 mouseY 의 값에 따라 단색 빨간색인지 아니면 RGB LED 의 Red, Green, Blue 인지 결정한다.

현재 커서의 값 즉 (mouseX, mouseY)=(xpos, ypos) 를 읽으면 sendMessage 루틴을 호출 실행하여 시리얼 인터페이스를 통해 아두이노 보드로 데이터를 송신한다.
여기서 보내야 할 데이터가 단색 빨간색 LED와 RGB LED 의 각각 색상의 값 도합 4바이트이므로 맨 앞에 ‘|’ 데이타를 합성하여 총 5바이트를 한 묶음으로 보내도록 한다.

아두이노 입력 버퍼에서는 값이 5로 정의된 MESSAGE_BYTES 값을 기준으로 5 바이트 한 묶음을 받아 첫 번째 바이트가 ‘|’인지 확인이 되면 순차적으로 읽어 brightness, red, green, blue 로 저장한다. 이 값을 사용하여 analogWrite() 명령을 실행하여 LED의 밝기를 조절한다.

noname05.png

다음의 동영상을 관찰하여 보자. 흑백 띠와 빨간색 띠는 아무런 문제가 없으나 초록색 띠는 뒤에 위치한 PC 스크린 컬러 영향으로 연한 청색으로 보이는데 직접 배선해서 확인해 보면 초록색임을 확인이 가능하다. 청색은 뒷배경 영향도 있지만 청색이란 것을 알 수있다.

//RGB_Dimmer: Processing
import processing.serial.*;
Serial port;

color white = color(255, 255, 255);
color red = color(255, 0, 0);
color green = color(0, 255, 0);
color blue = color(0, 0, 255);

String oldMessage = "foo";

int brightness = 0;
int redValue = 0;
int greenValue =0;
int blueValue =0;

void setup() {
size(256, 220);

println("Available serial ports:");
port = new Serial(this, Serial.list()[2], 9600);

}

void draw() {
// draw a gradient from black to white
for (int i = 0; i < 256; i++) {
stroke(i);
line(i, 0, i, 50);
}

setGradient(0, 70, 256, 50, white, red);
setGradient(0, 120, 256, 50, white, green);
setGradient(0, 170, 256, 50, white, blue);

int xpos = mouseX;
int ypos = mouseY;

if (xpos > 0 && xpos < 256)
{
if (ypos > 0 && ypos <= 50) {
// brightness
brightness = xpos;
}
else if (ypos >= 70 && ypos < 120) {
// red gradient
redValue = xpos;
}
else if (ypos >= 120 && ypos < 170) {
// green gradient
greenValue = xpos;
}
else if (ypos >= 170 && ypos <= 220) {
// blue gradient
blueValue = xpos;
}
sendMessage(brightness, redValue, greenValue, blueValue);
}
}

void sendMessage(int brightness,int red,int green,int blue){
String msg = brightness + "|" + red + "|" + green + "|" + blue;
if (!msg.equals(oldMessage)) {
println(msg);
port.write("|");
port.write(brightness);
port.write(red);
port.write(green);
port.write(blue);
oldMessage = msg;
}
}

void setGradient(int x, int y, float w, float h, color c1, color c2) {

noFill();

for (int i = x; i <= x+w; i++) {
float inter = map(i, x, x+w, 0, 1);
color c = lerpColor(c1, c2, inter);
stroke(c);
line(i, y, i, y+h);
}
}//끝

//RGB_Dimmer_01:아두이노
const int ledPin = 9; // the pin that the LED is attached to

const int redPin = 3; // the pin that the red pin of the RGB LED is attached to
const int greenPin = 5; // the pin that the green pin of the RGB LED is attached to
const int bluePin = 6; // the pin that the blue pin of the RGB LED is attached to

#define HEADER '|'
#define MESSAGE_BYTES 5 // the total bytes in a message

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

void loop() {

if ( Serial.available() >= MESSAGE_BYTES) {
if( Serial.read() == HEADER) {
int brightness = Serial.read();
int red = Serial.read();
int green = Serial.read();
int blue = Serial.read();

  analogWrite(ledPin, brightness);
  analogWrite(redPin, red);
  analogWrite(greenPin, green);
  analogWrite(bluePin, blue);
}

}

}//끝

Sort:  

codingart 님 프로세싱 하는 이유가 PC 화면에서 출력하는 건가요? 왜 사용하신 건지 궁금합니다.

PC의 Processing에서 색상띠에서 마우스로 스윕함에 따라 가변저항 돌릴때의 효과가 나죠. 이 제어결과로 시리얼인터페이스로 아두이노에 송신하고 아두이노에 설치된 LED 를 analogWrite() 명령에 의해 0-255까지 밝기 제어가 가능해 집니다. 아두이노에서는 가시적인 색상띠를 이용한 제어가 불가능하고 하드웨어 가변 저항을 필요한 갯수만큼 설치해야 합니다. 반면에 Processing 에서는 그래픽 처리 기능과 마우스 입력 기능이 우수하여 소프트하게 제어장치 구성이 가능합니다. 아직 포스팅 할려면 멀었지만 무선 공유기가 설치된 PC의 Processing에서 WiFi에 의한 ESP8266 아두이노 호환 보드 제어도 가능합니다.
경험적으로 비교해 보면 앱 인벤터 제어보다 Processing 날 경우도 있는듯 하군요. 참고하십시오.

오호 앱 인벤터 제어랑 비슷하게 써먹을 수 있는 거군요. 괜찮은데요. 프로세싱. 프로세싱 쓴다는 사람들도 소수 있던데요. 그걸 또 이렇게 써먹을 수 있네요. 저도 좀 관심 갖고 배워봐야겠습니다. ㅎㅎ

processing를 쓰는 이유는 시각화 할 수 있기 때문에 쓰는 거에요.
시각화 툴로서 쉽고 강력하기 때문에 사용합니다.

codingman 오호. 시각화가 가능하다. 그 시각화가 PC 모니터에서 시각화가 되는 거죠? 왠지 그런 것 같던데 제가 맞는지 모르겠네요. 그래서 영화예술 쪽 사람들이 쫌 쓴다고 하던데

당연히 pc모니터에서 시각화 가능합니다.
참고로 어떤 전자기기 시스템을 보면 몸체에 모니터가 붙어서 챠트형식이나 여러가지 이미지 형식으로 주변 기기들의 정보를 시각화로 보여주는 장비들 있죠
대충 그런것들에 많이 활용을 합니다.

PC 모니터만 되는 줄 알았는데, 시각화 장비도 되는군요. 아 충격입니다. 그러면 생각보다 쓰임새가 많겠네요.

짱짱맨 호출에 출동했습니다!!
고팍스에서 MOC상장 에어드롭 이벤트를 진행합니다.
혜자스러운 고팍스!
https://steemit.com/kr/@gopaxkr/moc

Congratulations @codingart! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on any badge to view your Board of Honor.

To support your work, I also upvoted your post!
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last announcement from @steemitboard!

Do you like SteemitBoard's project? Vote for its witness and get one more award!

Coin Marketplace

STEEM 0.16
TRX 0.15
JST 0.028
BTC 54370.47
ETH 2283.51
USDT 1.00
SBD 2.33