Processing은 Quicktime을 기반으로 영상처리를 하기 때문에 Mac 아닌 PC에서 processing으로 웹캠을 사용하려면,

QuicktimeWinVDig를 설치해야 합니다.

다른 방법은 JMyon library를 설치해서 사용하는 방법입니다.

JMyron의 설치 및 사용예제에 대한 이전 게시글을 링크하니 참고하시기 바랍니다.

[Processing] PC / Windows 에서 웹캠 사용하기 (with JMyron)

[Processing] JMyron 라이브러리 활용 - Motion detection / Color tracking



그리고 이전에 소개해 드렸던 blob detection library 외에 openCV를 사용한 library가 있습니다.

Download page: http://ubaa.net/shared/processing/opencv/index.html

위의 페이지에는 Window, Mac에서의 설치 방법과 blob detection 및 face detect 같은 예제들이 잘 나와있으니,

참고하시면 작업에 도움이 될 것 같습니다.
Posted by 알 수 없는 사용자

Processing 홈페이지에 가보시면 Library 페이지에 face detect library가 있지만 PC전용 library이기 때문에 mac에서는

사용할 수 가 없습니다

다행히 아래의 링크로 가시면 mac용 library를 구할 수가 있는데요,

사이트에 설명이 잘 되어 있지만, 그래도 아직 익숙하지 않은 분들을 위해서

 이 library의 설치 및 사용방법에 대해서 알아보겠습니다.

(원래 이 사이트도 processing 홈페이지에 link가 되어 있었는데, 언제부턴가 없어졌더군요)

 http://tokage.cafe24.com/facedetect/index.htm



1. 위에 링크된 사이트로 가보시면 설치 방법이 쓰여 있는데,
    Face detect library를 설치하기 전에 먼저 openCV Framework를 설치하라고 되어 있습니다.
    openCV는 Open Source Computer Vision 의 약자로 실시간으로 computer영상을 처리할 수 있게 해주는
    library라고 보시면 될 것 같습니다.
   
    아래 화면에 보시면  openCV사이트 링크가 있습니다.
   

  
   위의 링크를 따라 가면  openCV 페이지 아래쪽 링크에서 OpenCV-Private-Framework-1.1.dmg을 다운 받을 수
   있습니다.(아래 사진에서 빨갛게 표시된 부분)
   




2. 파일을 받아서 열면 아래 그림처럼 폴더가 들어 있는데 openCV.framework 폴더만
    ~/System/Library/Frameworks 폴더로 옮깁니다.

   


   



3. 이제 Face Detect library를 다운 받습니다.
   

   
    library를 다운 받아 열어보면 두 개의 폴더가 있는데, FaceDetect 폴더는 processing의 library폴더에 넣어주시고,
    data폴더는 그 안에 있는 파일들을 이 library를 사용해 작업할 sketch 폴더의 data 폴더에 넣어주세요.
   




4. 이제 설치는 다되었으니 Face Detect 사이트에 링크 되어 있는 예제 파일을 실행에 봅니다.
   

    두 개의 예제 중 face_example.pde(processing video library)를 클릭하면 소스 코드가 나오는데, 그것을 카피하여
    processing 창에 가져다 붙여보세요.
     *여기서 주의할 점은 3번에서 설명했던 것처럼 현재 sketch 폴더의 data폴더에, 다운 받은 library 파일에 들어있는
      data폴더의 파일들을 반드시 옮겨 주어야 합니다.

    실행하기 전에 code에서 size(320,240,P3D)의 P3D를 지워주세요. 그래야 실제 캠화면이 나옵니다.

    실행하게 되면 아래의 그림처럼 나오게 됩니다. 즉, 얼굴을 인식해서 얼굴위에 원을 그리는 코드 입니다.
    (아래 실행화면의 경우 fill 값을 준 것입니다.)
   
   




5. 예제 코드에서 중요한 부분만 간단히 설명하면 아래와 같습니다.



import processing.video.*;     //   video library와 FaceDetect library를 불러옵니다.
import FaceDetect.*;

FaceDetect fd;                     //   FaceDetect data type인 fd 와 카메라로 캡쳐된 것을 저장하는 Capture data type인 cam
Capture cam;

int MAX = 10;                       //   최대 10개까지 화면 안의 얼굴을 인식합니다.

int[] x = new int[MAX];
int[] y = new int[MAX];
int[] r = new int[MAX];
int[][] Faces = new int[MAX][3];    // 인식된 얼굴의 갯수와 얼굴의 화면상의 위치, 크기를 저장할 int type의 array

void setup(){

  size(320,240);
  cam = new Capture(this, 320, 240);
  fd = new FaceDetect(this);
  fd.start("haarcascade_frontalface_alt.xml", width,height,30);
  stroke(255,200,0);
  fill(255,200,0);
  //noFill();
}


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

    Faces = fd.face(cam);              
    int count = Faces.length;      // 화면 상에서 인식된 얼굴의 갯수   
    //    println(count);
    if (count>0) {
      for (int i = 0;i<count;i++) {
        x[i] = Faces[i][0];            // 얼굴 중심의 x좌표
        y[i] = Faces[i][1];            // 얼굴 중심의 y좌표
        r[i] = Faces[i][2] * 2;       //  얼굴의 크기
        ellipse(x[i],y[i],r[i],r[i]);    //  위의 데이터를 이용하여 얼굴 위에 원을 그림
      }
    }
  }
}


사실상 중요한 부분은 빨갛게 표시된 부분입니다.
얼굴의 화면 상에서의 좌표값과 크기값을 넘겨주는 부분으로
이 데이터를 이용하여 뭔가 재밌는 것을 해보면 되겠지요^^



Posted by 알 수 없는 사용자



지난 시간에 설명했던 processing에서 library 사용하는 방법을 정리한 것입니다.

library는 processing을 좀 더 다양한 방법으로 활용할 수 있도록 도와 줍니다.

기본적으로 processing을 다운 받아서 설치하게 되면 이미 video와 sound 등 몇가지 library가 들어있지만,

processing 홈페이지의 library 페이지(http://processing.org/reference/libraries/)를 가보면 사용자들이

직접 만들어 올려 놓은 다양한 library들을 다운 받을 수 있습니다.



library는 우리가 어떤 특정한 기능을 필요로 할 때, 직접 그것을 만들 필요 없이 활용할 수 있는 함수들과

클래스를 제공합니다. 만약 화면에서 얼굴만 캡쳐하는, face detect 같은 기능이 필요할 때

이것을 우리가 직접 만드는 것은 많은 노력과 시간을 필요로 하겠지요. 하지만, 제가 다운 받은 face detect library는

간단한 사용법만 익히면, 화면상에서 얼굴 중심값의 x,y좌표를 계산해 줍니다. 전 이 좌표를 이용해서 제가 원하는

작업을 하기만 하면 됩니다.




processing에서 library를 사용하기 위해선 사용하려는 library를 불러와야 합니다.

직접 코드를 쳐도 되지만, 간단히 아래 그림처럼 import library에서 필요한 library를 선택하면 됩니다.

붉게 표시된 부분은 외부  library를 다운 받은 것이고 아래 파란색으로 표시된 부분은 processing에

내장되어 있는 library들 입니다.
    




위의 메뉴에서  library 를 선택하게 되면 아래와 같이 library가 불려집니다.(아래의 예는 video library)

 




각 library의 예는 processing 홈페이지의 예제를 참고해 주시거나, processing 메뉴에 들어 있는 예제들을 참고해 주세요.
이외에 따로 다운 받은 library들은 해당 홈페이지에 사용방법과 예제들이 잘 나와 있습니다.

 







다운로드 받은 library를 설치하는 방법은 아래 게시물을 참고해 주세요

[Processing] 최신버전들의 library 설치 방법





windows 기반의 pc에서 processing으로 webcam을 사용하려면 JMyron이란 library가 필요합니다.
아래 게시물을 참고해 주세요.

[Processing] JMyron 라이브러리 활용 - Motion detection / Color tracking






화면상에서 밝은 부분이나 어두운 분을 detect하는 Blob detection library 설치 및 활용방법을 설명한 게시물 입니다.

[Processing] Blob detection library 설치 및 그림자/카메라와 활용


Posted by 알 수 없는 사용자
예전의 Beta 버전들과 달리 library 의 설치 방법이 달라졌습니다.
기존 버전들의 경우는 Processing Application 의 libraries 폴더에 넣었었습니다만, 최근의 버전들 에서는
다음과 같이 Sketch들이 저장되는 폴더에 libraries 라는 폴더를 생성 후 거기에 복사해 넣으면 됩니다.
(각각의 Sketch 에 넣는 것이 아님)

참고로 Sketch들이 저장되는 디폴트 폴더는 다음과 같이 Processing 의 Preference 에서 확인/변경이 가능합니다.





Posted by 알 수 없는 사용자
아시다시피 Processing 의 영상처리 기반이 Quicktime 을 기반으로 하여 Mac 이 아닌
PC Windows 환경에서 캠과 연동하기가 상당히 어려웠습니다.
(WinVDig 등 추가 설치, 잦은 오류, 느린 프레임 등)
Mac 용 웹캠은 단종되어 구하기가 어려운 iSight 이외에 별로 없다는 문제도 있고요.

한편, JMyron의 최근 버전에서는 이러한 WinVDig 등이 필요없이 연동이 된다고 하여
해보니 잘 됩니다. (중국산 만오천원짜리 웹캠으로 해봤습니다만, 잘 되는군요)

Download
http://webcamxtra.sourceforge.net/download.shtml

JMyron 활용
- 이전 작성한 글 참조

설치
- 다운로드받아 압축을 풀면 다음과 같습니다.

사용자 삽입 이미지










위 폴더들중 JMyron 폴더를 Processing 의 libraries 폴더에 넣으시고
Extra DLLs 의 두개의 .dll 파일을 Windows 의 system32 폴더에 넣으시면 됩니다.






Posted by 알 수 없는 사용자

Download
http://webcamxtra.sourceforge.net/download.shtml


Reference
http://webcamxtra.sourceforge.net/reference.shtml


JMyron 활용
- Motion detection
- Color tracking


다운받은 파일에 포함되어 있는 Example 들입니다.

예제 - Motion detection
frame difference (현재프레임과 다음프레임 이미지의 차이)를 이용하여 움직임을 감지해
녹색원을 그려주는 예제.
frame difference 이미지에서 검출된 여러 glob(덩어리)들의 중심좌표값들을 평균하는 방식


Myron_CameraAsMouse.pde
---------------------------------------------------------------------------------------------------
/*
the green oval is an averaged position of all the detected dark movement in the camera's view.
physical setup:
  - make sure there is a strong value contrast between your hand and a white background.
  - set all camera settings to "manual" for the most stable results.
 last tested to work in Processing 0090

 JTNIMOY
*/

import JMyron.*;

JMyron m;//a camera object

//variables to maintain the floating green circle
float objx = 160;
float objy = 120;
float objdestx = 160;
float objdesty = 120;

void setup(){
  size(640,480);

  m = new JMyron(); // JMyron 개체 생성
  m.start(width,height); // JMyron 시작
  m.trackColor(255,255,255,256*3-100); // white 를 track color 로 지정
  m.update();
  m.adaptivity(10); // frame difference 의 반응속도 설정
  m.adapt(); // 최초 시작시는 바로 adapt
  println("Myron " + m.version());
  rectMode(CENTER);
  noStroke();
}


void draw(){
  background(0);
  m.update();  //update the camera view
  drawCamera();
 
  int[][] centers = m.globCenters(); // glob 의 중심좌표 값들을 centers 라는 2차원 배열에 저장

  float avX=0;
  float avY=0;
 
  // centers 좌표를 모두 더해서 avX 와 avY에 저장
  for(int i=0;i<centers.length;i++){
    avX += centers[i][0];
    avY += centers[i][1];
  }
  // centers.length 로 나누어 평균을 구한다
  if(centers.length-1>0){
    avX/=centers.length-1;
    avY/=centers.length-1;
  }

  // 평균점을 빨간색 사각형으로 표시
  fill(255,0,0);
  rect(avX,avY,5,5);

  // 새로운 평균점을 destination 좌표에 저장
  if(!(avX==0&&avY==0)&&centers.length>0){
    objdestx = avX;
    objdesty = avY;
  }

  // 물체의 좌표를 destination 좌표로 이동 하고 녹색원을 그린다
  // (급작스럽게 튀는 이동을 방지하기위해 easing 방식 으로 더해가면서 이동)
  objx += (objdestx-objx)/5.0f;
  objy += (objdesty-objy)/5.0f;
  fill(30,100,0);
  ellipseMode(CENTER);
  ellipse(objx,objy,30,30); // 원 그리기 : 이를 대체해서 원하는 것을 그릴 수 있습니다.
}

void drawCamera(){
  // 화면에 frame difference 이미지를 그려준다
  int[] img = m.differenceImage(); //get the normal image of the camera
  loadPixels();
  for(int i=0;i<width*height;i++){ //loop through all the pixels
    pixels[i] = img[i]; //draw each pixel to the screen
  }
  updatePixels();
}


public void stop(){
  m.stop();//stop the object
  super.stop();
}



예제 - Color tracking
trackColor 함수로 지정된 컬러를 traking 하여 box들로 그려줍니다.
참고로 reference 에 보시면 trackNotColor 라는 함수도 있어서 검출을 원하지 않는 컬러도
지정이 가능한듯 합니다.


Myron_tracking.pde
---------------------------------------------------------------------------------------------------
/*

This example shows a whole lot of different
tracking methods being rendered at one time.
Don't be surprised if this one runs really slowly.

 last tested to work in Processing 0090
 
 JTNIMOY
 
*/

import JMyron.*;

JMyron m;
 
void setup(){
  int w = 640;
  int h = 480;
 
  size(w,h);
  m = new JMyron();
  m.start(640,480);
  m.findGlobs(1);
  println("Myron " + m.version());
}

void mousePressed(){
  m.settings();
}

void draw(){
  m.trackColor(180,180,120,255); // track하고자 하는 컬러 지정 (r,g,b,tolerance)

  m.update();
  int[] img = m.image();
 
  //first draw the camera view onto the screen
  loadPixels();
  for(int i=0;i<width*height;i++){
      pixels[i] = img[i];
  }
  updatePixels();
 
 
  // 마우스 포인터 영역 근처의 컬러 평균값으로 네모 그리기
  noStroke();
  int c = m.average(mouseX-20,mouseY-20,mouseX+20,mouseY+20);
  fill(red(c),green(c),blue(c));
  rect(mouseX-20,mouseY-20,40,40);

  noFill();
  int[][] a;


  // 검출된 glob 들의 중심점을 노란색으로 찍기
  a = m.globCenters();
  stroke(255,255,0);
  for(int i=0;i<a.length;i++){
    int[] p = a[i];
    point(p[0],p[1]);
    println("p[0]="+p[0]+", p[1]="+p[1]);
  }
 

  // 검출된 glob 을 사각형으로 그리기
  a = m.globBoxes();
  stroke(255,0,0);
  for(int i=0;i<a.length;i++){
    int[] b = a[i];
    rect(b[0], b[1], b[2], b[3]); // 위의 p[0],p[1] 이나 이 b[0], b[1] 등의 값들을 활용해서 작업.
  }


}

public void stop(){
  m.stop();
  super.stop();
}


Posted by 알 수 없는 사용자
Blob detection library 다운로드

http://www.v3ga.net/processing/BlobDetection/

library 설치
Procesing0135 - libraries 밑에 blobDetection 폴더 생성, 그안에 library 폴더 생성 후
그안에 다운받은 jar 파일 붙여넣기


사용자 삽입 이미지


프로세싱 실행 후 아래와 같이 Import Library 메뉴에 뜨면 성공
사용자 삽입 이미지



Blob detection 활용
크게 두가지 기능이 있음
- Blob (얼룩) 들을 잡아 외곽선 그리기 (draw edges)
- Blob 들을 잡아 사각형 그리기 (draw blobs)
- 특정 영역에 그림자(얼룩)이 침범했는지 여부는 draw blobs 의 x, y 좌표를 얻어내서 활용 하면 됨



Blob detection 샘플코드 - bd_webcam (위의 홈페이지의 download 메뉴에서 다운 가능)
간단하게 설명을 달았고, 홈페이지의 documentation 에서 자세한 내용을 볼 수 있음

import processing.video.*;
import blobDetection.*;

Capture cam;
BlobDetection theBlobDetection;
PImage img;
boolean newFrame=false;

// ==================================================
// setup()
// ==================================================
void setup()
{
    // Size of applet
    size(640, 480);
    // 카메라 비디오 입력 초기화
    cam = new Capture(this, 40*4, 30*4, 15);
    // BlobDetection
    // img which will be sent to detection (a smaller copy of the cam frame);
    // 카메라의 매 프레임을 이미지로 저장한 후 blob 분석
    // (얼룩 정도만 분별해 내면 되므로 해상도가 굳이 높을 필요가 없겠죠)

    img = new PImage(80,60);
    theBlobDetection = new BlobDetection(img.width, img.height);
    theBlobDetection.setPosDiscrimination(true); // true 면 검정부분, false면 밝은부분 감지
    theBlobDetection.setThreshold(0.1f); // 민감도 설정
}

// ==================================================
// captureEvent()
// ==================================================
void captureEvent(Capture cam)
{
    // 카메라 영상 입력 읽어서 화면에 보여주기 - 전시작업에서 주로 받아들인 영상을
    // 판별 작업만 하게되므로 나중에 이부분은 주석처리 되도 되겠죠
    cam.read();
    newFrame = true;
}

// ==================================================
// draw()
// ==================================================
void draw()
{
    if (newFrame)
    {
        newFrame=false;
        image(cam,0,0,width,height);
        img.copy(cam, 0, 0, cam.width, cam.height,
                0, 0, img.width, img.height);
        fastblur(img, 2); // 자잘한 너무 많은 blob을 완화 시켜주는 듯
        theBlobDetection.computeBlobs(img.pixels); // Blob 계산
        drawBlobsAndEdges(true,false);
    }

    // Hit test area 테스트를 위한 영역에 노란 사각형 그리기
    stroke(255,255,0);
    rectMode(CORNER);
    rect(400,350,100,100);
    rect(400,50,100,100);
}

// ==================================================
// drawBlobsAndEdges()
// ==================================================
void drawBlobsAndEdges(boolean drawBlobs, boolean drawEdges)
{
    noFill();
    Blob b;
    EdgeVertex eA,eB;
    for (int n=0 ; n<theBlobDetection.getBlobNb() ; n++)
    {
        b=theBlobDetection.getBlob(n);
        if (b!=null)
        {
            // Edges - 얼룩의 외곽선을 그려주는 부분.
            if (drawEdges)
            {
                strokeWeight(3);
                stroke(0,255,0);
                for (int m=0;m<b.getEdgeNb();m++)
                {
                    eA = b.getEdgeVertexA(m);
                    eB = b.getEdgeVertexB(m);
                    if (eA !=null && eB !=null)
                        line(
                            eA.x*width, eA.y*height,
                            eB.x*width, eB.y*height
                            );
                }
            }

            // Blobs - 얼룩에 사각형을 그려주는 부분.
            if (drawBlobs)
            {
                strokeWeight(0);
                stroke(255,0,0);
//                rect(
//                    b.xMin*width,b.yMin*height,
//                    b.w*width,b.h*height
//                    );
                                rectMode(CENTER);
                rect(
                    b.x*width,b.y*height,
                    b.w*width,b.h*height
                    );

                                // 얼룩의 중심좌표를 b.x 와 b.y로 얻어낼 수 있으므로 특정 영역에 얼룩이
                                // 들어왔는지 판별가능. 단 b.x 와 b.y는 0-1 사이의 값으로 width 와 height를
                                // 곱해 준 후 사용해야함 (아래처럼)
                                // 위에서 정한 노란색 사각 박스 영역안에 얼룩이 들어온 경우 HELLO SADI 출력
                                if((b.x*width>400) && (b.x*width<500)
                                                                && (b.y*height>350) && (b.y*height<450))
                                {
                                   println("******* HELLO SADI *********");
                                }


            }

        }

      }
}






Posted by 알 수 없는 사용자
Mac 사용시 사운드를 다른 어플리케이션 으로 라우팅 해주는 Soundflower 라는 유틸리티 입니다.
(디폴트로는 마이크-인 으로만 잡히고 옵션을 바꿔도 안됩니다.)

우리의 경우는 iTunes 나 VLC 같은 플레이어로 MP3 를 틀고 이를 프로세싱에서
입력으로 받아서 사용하는 경우 쓸 수 있습니다.(주로 이퀄라이저를 만들때 쓰겠죠)
아래는 관련글의 스레드와 다운로드 주소입니다.

http://processing.org/discourse/yabb_beta/YaBB.cgi?board=Sound;action=display;num=1189352183

http://www.cycling74.com/downloads/soundflower

일단 ess 의 inputFFT 예제를 기반으로 테스트 해보니 잘 됩니다.
http://www.tree-axis.com/Ess/examples.html  의 예제들 중 두번째 예제.
(응용프로그램>유틸리티의 오디오 MIDI 설정에서 아래처럼 Default Output 을 Soundflower(2ch) 로 잡고
  iTunes 나 기타 mp3 를 틀어주면 동작 확인 가능)

이를 기반으로 아래 ess library 의 input FFT 예제 코드에서 볼 수 있는
FFT.spectrum[i] 부분을 응용해서 스펙트럼드을 뽑아서 비주얼을 만들 수 있을것 같습니다.


사용자 삽입 이미지


그리고 이렇게 라우팅된 사운드는 스피커로 나오지 않습니다.
이를 다시 최종적으로 스피커로 나오게 하기위해서는 함께 포함되어있는
SoundflowerBed 라는 유틸리티를 사용합니다. (사이트 참조)

Soundflower 의 dmg 파일에 같이 있는 SoundflowerBed 를 응용프로그램에 복사해놓고 실행하면
위에 표시줄에 다음과 같은 꽃모양 메뉴가 뜹니다.
이를 이용해서 프로세싱으로 라우팅된 사운드를 다시 스피커로도 나오게 하면 됩니다.
(Soundflower(2ch)를 Built-in Output 으로 설정)


사용자 삽입 이미지



Posted by 알 수 없는 사용자

맥이 아닌 PC/Windows 기반에서 일반 USB 웹캠을 사용하려고 알아보니 상당히 제약이 많네요.
일차적으로 프로세싱이 비디오 관련 부분이 QuickTime을 기반으로 하고 있어서
윈도우즈용 USB 캠 대부분이 지원이 안된다고 하네요.

http://processing.org/reference/libraries/video/


그나마 이를 가능하게 해주는 수단이 WinVDIG (QuickTime-compatible video digitizer (VDIG)) 라는 건데
퍼포먼스도 떨어진다고하고 웹사이트도 현재 접속이 안되는군요.

결국 카메라를 속편하게 쓰려면 Mac 과 iSight 을 사용해야 한다는것 같은데 별다른 대안이 있는지 모르겠네요
(맥을 지원하는 USB 카메라도 정말 드물죠. iSight 는 단종이라 고가임에도 장터에 뜨면 5분안에 팔리고...
 iSight 도 분명 그렇게 CCD가 좋은 캠은 아니지만 대안이 거의 없는 관계로...)


모션 인식을 위해서는 저해상도의 웹캠보다는 일반적인 캠코더(DV캠들)을 쓴다고 하던데
이런 캠코더와 붙여보신분 있으신지요?

카메라 관련 정보 앞으로 여기에 공유합시다~


* 오늘 DD교수님(김영진교수님 http://a.parsons.edu/~yzkim ) 께 여쭤봤더니
   역시나 PC 에서의 캠과 프로세싱 연동은 어렵다는 결론입니다.
   WinVDIG 로 연동이 되어도 오작동이 많다고 하네요.
   MacBook 이나 iMac 계열의 내장 iSight 를 이용하는게 가장 속편하고 좋은 방법이라고 합니다.
   그리고, Cam corder 와의 연동도 가능한 것 같은데 구체적인 연동 사례(드라이버 등)는 알아봐야 할 것
   같습니다.




Posted by 알 수 없는 사용자
Posted by 알 수 없는 사용자