시각화/프로세싱

▶Processing :: 프로세싱 기초예제 – video #4 - 움직임 추적하기 + 원 그리기

비주얼라이즈 2014. 5. 30. 02:21


Processing :: 프로세싱 기초예제 – video #4

움직임 추적하기 + 원 그리기



프로세싱 기초예제 - VIDEO의 4번째 포스팅입니다.

오늘 포스팅에서는 #2, #3포스팅에서했던 움직임 감지에서 조금 더 나아가서

전체 움직임의 양을 감지하고, 이를 바탕으로 원을 그리는 과정을 살펴보겠습니다.



import processing.video.*;

Capture cam;
PImage prevFrame;
float threshold = 50;

이전 예제에서 했던대로 먼저 프로세싱의 비디오라이브러리를 로드하고

기본세팅을 먼저해주는 부분입니다.


PImage prevFrame부분은 이전 프레임을 저장해줄 변수이며

float threshold 부분은 '얼마나 다른 픽셀을 움직임로 판단할지'에 대한 설정입니다.


void setup(){
  size(640, 480);
  smooth();
 
  String[] cameras = Capture.list();
 
  cam = new Capture(this, width, height, 30);
  prevFrame = createImage(cam.width, cam.height, RGB);
 
  cam.start();
}

setup()부분은 지난 #3예제와 다르지 않습니다.


void draw(){
  background(0);
  image(cam, 0, 0);
 
  if(cam.available()==true){
   
    prevFrame.copy(cam, 0, 0, cam.width, cam.height, 0, 0, cam.width, cam.height);
    prevFrame.updatePixels();
   
    cam.read();
  }


draw()함수 부분을 살펴보면

지난 예제와다르게 background(0)을 지정해주었으며

첫 부분에서 image(cam, 0, 0)을 통해 화면을 출력하는 것을 볼 수 있습니다.




이는 우리가 영상에 나타난 전체 움직임 정보로

원을 그릴 것이기 때문입니다.^^


  loadPixels();
  cam.loadPixels();
  prevFrame.loadPixels();
 
  float totalMotion = 0;
 
// 각 픽셀의 밝기를 합칠 것 입니다.
  for(int i = 0; i < cam.pixels.length; i++){
    color current = cam.pixels[i];
    color previous = prevFrame.pixels[i];
   
    float r1 = red(current);
    float g1 = green(current);
    float b1 = blue(current);
   
    float r2 = red(previous);
    float g2 = green(previous);
    float b2 = green(previous);
   
    float diff = dist(r1, g1, b1, r2, g2, b2);
   //전체 움직임(totalMotion) = 색상이 변한 경우를 모두 합하여 산출
    totalMotion += diff;
  }
 // 평균움직임(avgMotion)은 전체움직임 나누기 전체 픽셀 수!
  float avgMotion = totalMotion/cam.pixels.length;
 


이렇게 전체움직임과, 그를 바탕으로 평균움직임을 구했습니다.

이제 이 정보를 바탕으로 원을 그리는 일만 남았습니다^^


  noStroke();
  fill(100+avgMotion*3, 100, 100);
  float r = avgMotion*2;
  ellipse(width/2, height/2, r, r);
}

fill과 r 값의 기반을  avgMotion에 두었기때문에

변화하는 avgMotion값에 따라 원의 모양과 색이 달라지게됩니다.




여기까지 마치셨다면

실행하여 결과를 살펴보겠습니다.





[프로세싱 기초예제 비디오 - 전체움직임 추적하기 + 원그리기]