스타워즈 송을 Processing으로 Visualization하자

______________________________________________________________________________________________________________________________

아두이노에서 LED 번쩍거림은 이미해 보았으므로 약간 수준을 높여서 Processing의 그래픽 처리 기능을 이용해서 음악을 가시화해보자. 가시화하기 위한 기본 코드는 Processing 예제를 이용한다. Basic->Color->RadialGradient를 사용하기로 한다. 디스플레이 되는 원의 크기가 일정하지만 코드를 실행하면 원 속의 색상이 변한다. 색상 변화 알고리듬은 그대로 이용하기로 하자.

단 원의 크기를 아두이노 송에서 음악 연주에 사용되는 계명 즉 NOTE 에 따라서 변동되게끔 코드를 살짝 수정하여 시리얼 인터페이스를 통해 PC 의 Processing 에 전송하기로 한다.
즉 tone() 명령에 맞춰 원의 크기와 색상 변화를 보게 될 것이다.

아두이노 송은 지난번에 들어 보았던 스타워즈로 하기로 한다. 아래의 블로그를 참조하면 될 것이다. 스피커 배선 2줄만 주의하면 될 것이다.

초보자를 위한 아두이노 코딩 입문-15: 스타워즈 송과 함께 번쩍이는 LED(사운드 동영상 업데이트)
https://steemit.com/kr/@codingart/15-led

아두이노 송 코드는 오픈소스라 어디선가 가져온 그대로 상태이므로 코드를 정리하고 말고 할 필요는 없는 듯하다. 수정할 부분만 지적하기로 하자.

1) 시작 부분에 정수형 변수 Num을 정의한다.-> int Num;
2) 지난번 스타워즈 코딩의 setup()에 Serial.begin(9600); 이 없었는데 Processing과 시리얼 인터페이스를 사용하려면 반드시 필요하다.->Serial.begin(9600);
3) void beep(int note, int duration)에서 계명 note 가 파라메터로 제공되어 내부에서 tone() 명령에 사용된다. note는 결국 해당 계명의 주파수에 해당하는데 그 값이 적게는 100에서 크게는 1,000 정도 된다. 따라서 150으로 나누어 정수 값을 Num 으로 취한다.
-> Num=note/150;

4) 계산된 정수형 변수 Num 값을 Serial.write() 명령으로 PC의 Processing 에 넘겨준다.
->Serialwrite(Num);
1)∼4)까지 단 4줄만 수정하면 아두이노 코딩 작업이 끝난다.

Processing에서는 지난번 시계 코딩에서 사용했던 시리얼인터페이스 기법을 그대로 가져다 RadialGradient에 추가하기로 한다. 첨부한 코드를 참조하기 바란다.

아울러 아두이노에서는 아래 사이트의 나수발생기 코드를 가져다가 난수를 발생시키되 그 범위를 1-10 정도로 하면 좋다.

아두이노 코딩-59: 아두이노 난수발생기가 인터페이스된 Processing 시계 코딩

https://steemit.com/kr/@codingart/59-processing

수정한 부분은 다음과 같다.
정수형 변수 dim은 스래픽 화면 폭의 반 즉 dim = width/2에서 시작한다.  그리고 draw()에서 아두이노에서 보내오는 Num 값을 serialEvent() 루틴에서 정수형 변수 inByte로 읽어 다음과 같이 새로이 dim 값을 계산한다.

dim = width/(1+inByte)

1을 더한 이유는 한번이라도 inByte 값을 읽지 못하면 0으로 나누게 되므로 arithmatic division by zero 에러가 발생하기 때문에 이를 방지하고자함이다.

음악 연주와 함께 뭔가 싱크로나이즈된 영상을 감상해 보고 뭔가 수정하여 더 멋있는 영상을 만들어 보자.

https://youtu.be/piw6Vj8-NiA

//Random_RadialGradient_01

import processing.serial.*;//
Serial myPort;//

int dim, inByte;

void setup() {
  println("Available serial ports:");//
  println(Serial.list());//
  myPort = new Serial(this, Serial.list()[2], 9600);//

  size(640, 360);
  dim = width/2;
  background(0);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  ellipseMode(RADIUS);
  frameRate(1);
}

void draw() {
  background(0);
  dim = width/(1+inByte);
  for (int x = 0; x <= width; x+=dim) {
    drawGradient(x, height/2);
  }
}

void drawGradient(float x, float y) {
  int radius = dim/2;
  float h = random(0, 360);
  for (int r = radius; r > 0; --r) {
    fill(h, 90, 90);
    ellipse(x, y, r, r);
    h = (h + 1) % 360;
  }
}

void serialEvent (Serial myPort) { //
inByte = myPort.read();//
println(inByte);//
} //