시각화/프로세싱

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

비주얼라이즈 2014. 5. 29. 00:37



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




오늘은 캠을 활용하여 프로세싱내에서 비디오를 출력하고,

출력된 비디오를 간단하게 조작하는 부분까지 살펴보려고 합니다.





import processing.video.*;

먼저 프로세싱의 비디오라이브러리를 불러옵니다.






불러오셨나요?

여기까지 마치셨다면, setup()부분 먼저 살펴보겠습니다.



Capture cam;
void setup(){
  size(640, 480);
  String[] cameras = Capture.list();
 
  if(cameras.length == 0){
    println("There are no cameras available for capture.");
    exit();
  } else {
    println("Available cameras");
    for(int i = 0; i < cameras.length; i++){
      println(cameras[i]);
    }
   
    cam = new Capture(this, cameras[0]);
    cam.start();
  }
}

여기서 잠시 ‘this’에 대해서 짚어볼까요?


아마 프로세싱을 공부하시는 분들 중에 저처럼

난생처음 코드를 작성하시는 분들이 있으실거에요!



저는 ‘this’가 의미하는 것이 도대체 뭐야?!!<<와 같은 어려움을 겪었습니다.




이런 어려움을 겪으실 분들이 있으실 것 같아

프로세싱 날개를 달다에서 this에 관해 설명해 놓은 부분을 함께 살펴보려고합니다.






this?[각주:1]

this, this가 적힌 부분의 클래스에대한 인자를 뜻합니다.

(…) 자기 자신을 나타내는 설명입니다.


Capture객체에서의 이 ‘this’의 사용은 이런 뜻입니다.


난 카메라가 새로운 이미지를 가져올 수 있을 때 비디오를 캡쳐하고 싶어. "

"난 애플릿을 이프로그램에 알리고 싶어




설명이 이해가 가셨나요?^^;;

저는 음..90%정도 이해한 것 같습니다.

혹시나 더 쉽게 이해할 수 있는 설명이 있다면 댓글 부탁드립니다.^^



그럼 다음으로

void draw()부분을 살펴보도록 하겠습니다.


void draw(){
  if(cam.available() == true) {
    cam.read();
  }
image(cam, 0, 0);
}

이 예제에서는 available()함수를 이용하여 카메라를 읽고 있습니다.





available()?


프로세싱에서 available()함수는 

이미지의 존재여부에 따라 참 혹은 거짓을 반환합니다.






위 예제의 경우 available()함수가 참일경우

read()함수가 카메라의 이미지를 메모리로 가져오고 있습니다.


이 기능을 draw()함수 내에서 사용한다는 것은

계속해서 새로운 이미지를 가져온다는 뜻이겠지요^^





여기까지 마치셨다면 실행버튼을 조심스럽게 눌러봅니다.

정상적으로 실행이 되셨다면, 아래와같이 캠이 작동하고

카메라에 잡히는 이미지가 화면에 나타나게 됩니다.




[프로세싱에서 카메라에 촬영되는 이미지를 출력한 모습]




여기까지 정상적으로 실행이 되셨다면,

PImage를 조작했던 것과 같은 방법으로 비디오를 조작해보겠습니다.


Capture객체에도 PImage에 적용했던

[ 크기, 색조, 움직임 등 ]의 기능을 적용할 수 있습니다.


PImage를 조작했던 것과 같은 방법으로 비디오를 조작해보겠습니다.




void draw(){
  if(cam.available() == true) {
    cam.read();
  }
tint(mouseX, mouseY, 255);;
image(cam, 0, 0, mouseX, mouseY);
}


tint()함수를 이용하여 마우스의 위치에 따라

화면에 출력되는 영상의 색을 조절하게 되며






image(cam, 0, 0, mouseX, mouseY)

이와 같이 image부분에서 mouseX와 mouseY를 뒷부분에 추가해줌으로써

마우스움직임에 따라 출력영상의 크기가 달라지게 할 수 있습니다.




아래영상에서 최종 결과를 확인할 수 있습니다.






[프로세싱에서 마우스위치로 출력영상의 색과 크기를 조절하기]









  1. 다니엘쉐프만 지음, 랜덤웍스 옮김, '프로세싱 날개를 달다', 인사이트, 2010 [본문으로]