▶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값에 따라 원의 모양과 색이 달라지게됩니다.
여기까지 마치셨다면
실행하여 결과를 살펴보겠습니다.
[프로세싱 기초예제 비디오 - 전체움직임 추적하기 + 원그리기]
'시각화 > 프로세싱' 카테고리의 다른 글
▶함께배우는 프로세싱 : 대한민국 와이파이 지도 만들기 (6) | 2014.06.18 |
---|---|
▶Processing :: 프로세싱 기초예제 – video #5 : blobDetction라이브러리 (6) | 2014.06.03 |
▶Processing :: 프로세싱 기초예제 – video #3 움직임 감지하기 (5) | 2014.05.29 |
▶Processing :: 프로세싱 기초예제 – video #2 (0) | 2014.05.29 |
▶Processing :: 프로세싱 기초예제 – video #1 (8) | 2014.05.29 |