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 알 수 없는 사용자


Mac 에서도 인식이 잘 되는 웹캠들을 소개합니다.

작년 전시 때는 아래 보이는 네이버캠 플러스를 많이 사용했습니다.
따로 설치 프로그램이 필요없이 꽂으면 바로 인식되는 점이 편하고,
AF기능이 있어서 자동으로 피사체에 초점을 맞춰줍니다.




아래 웹캠들은 제가 다른 작업을 하면서 알아본 웹캠들인데요, 역시 mac에서 인식이 되며, 네이버캠 처럼 별다른
설치 프로그램이 필요없습니다.

한가지 유의하실 점은 아래 네가지 제품 중 새빛마이크로 Vije Q-350만 AF 기능이 있고 나머지 3개는 수동으로 초점을
맞춰주어야 합니다.


개인적으론 AF기능이 들어있는 웹캠이 범용적으로 사용하기가 편합니다(얼굴을 인식한다거나, 피사체의 위치에 상관 없이
깨끗한 화질을 원하는 경우)

하지만 피사체와의 거리가 항상 일정한 경우라면 아래 3개의 웹캠을 써도 무방하겠지요. 가격도 싸고.^^;


이 5가지 외에도 mac에서 인식되는 웹캠이 또 있을 수 있으니, 다나와나 네이버 같은 곳에서 찾아보셔도 되구요.
그리고 네이버캠의 경우 꼭 네이버 캠 '플러스'여야 합니다. 매물이 거의 없기도 하지만 , 그냥 네이버캠은 mac을 지원안하는 것으로 알고 있습니다.
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 알 수 없는 사용자

발표 챕터

197p   Shape 3: Parameters, Recursion
205p   Input 1: Mouse 1
217p   Drawing 1 : Static Forms
223p   Input 2: Keyboard
229p   Input 3: Events



- 이전 챕터의 function(함수)을 이용한 form을 만들어 본다
- Mouse와 keyboard로 입력을 받아서 활용하는 방법을 알아본다.



Shape 3: Parameters, Recursion




     - Parameter 값을 받는 function을 사용하면, parameter 값에 따라 다양한 모양을 같는 form을 만들 수 있다.

     - Function을 만들 때, 자신의 블록 안에 다시 자기 자신을 사용하여 반복적인 형태나 패턴을 만드는 방법을
       recursion이라 한다.

     - Recursive function에 random(), randomSeed()함수를 사용하면, 불규칙 적인 형태를 만들 수 있다.


     - 중요 pages
       199-200p : Parameter값을 받는 함수를 사용하여 만든 form들에 대한 예제
       201p : Recursion 개념을 사용한 function의 구조 설명
       203-204p : Recursive function에 random()함수를 사용한 예제




Input 1:
Mouse 1


     -주요 syntax
      mouseX, mouseY, pmouseX, pmouseY, mousePressed, mouseButton
      cursor(), noCursor()



     - mouseX, mouseY는 현재 실행 화면에 위치한 마우스 포인터의 x,y 좌표값을 읽어온다.

     - 마우스 좌표값을 이용하면 화면상에서 마우스에 따른 그래픽의 움직임을 만들어 낼 수 있고,
       다양한 수치를 적용하여, 움직임에 변화를 줄 수 있다.
     
     - mousePressed 는 현재 마우스 버튼이 눌러져 있는 상태인지 체크 한다.
       mouseButton은 가장 최근에 눌린 마우스 버튼(LEFT, CENTER, RIGHT)을 알 수 있다.

     - noCursor() 를 사용하면, 실행화면에서 마우스 포인터를 안보이게 할 수 있다.
       cursor()함수에 ARROW, CROSS, HAND, MOVE,TEXT, WAIT 과 같은 parameter를 사용하면
       마우스 포인터 모양을 바꿀 수 있다.



     - 중요 pages
       206-211p : 마우스 좌표값을 이용한 다양한 예제들.
       212-213p : 마우스 버튼을 이용한 예제들
      



Drawing 1 : Static Forms



     - 앞 챕터에서 배운 마우스 관련 코드들을 사용하면 간단한 drawing 프로그램을 짤 수 있다.

     - 마우스의 좌표값과 도형을 그리는 함수들을 응용하면, 여러가지 브러쉬 효과가 가능하다.

     - 도형이나 점 대신, image 파일을 불러와서 브러쉬처럼 쓸 수 있다.



     - 중요 pages
       218-220p : 점이나 도형들을 사용한 drawing 프로그램 예제
       221p : image 파일을 브러쉬로 사용하는 예제.





Input 2: Keyboard

     -주요 syntax
      keyPressed, key, keyCode



     - keyPressed는 키보드의 자판 눌린것을 확인하는 boolean 변수 이다.
       자판이 눌렸으면 true, 아니면 false값을 갖는다.

     - key는 특정한 가장 최근에 눌린 key가 저장이된는 char 변수 이다. key에 저장된 글자를 확인하려면
       작은 따옴표를 써야한다. (큰 따옴표를 사용하면 에러 발생)

     - Coded key는 특별한 용도가 미리 정해진 특수키들을 말하는데, alt, enter, return, 화살표키등이 이에 해당한다.
       key == CODED if문에 사용하면  coded key인지 확인할 수 있으며, keyCode를 통해 어떤 특수키가
       눌려졌는지 알 수 있다.




     - 중요 pages
       224-226p : key와 keyPressed를 사용한 예제들
       227p : coded key(화살표키, delete,enter,ctrl,alt,enter등)들을 사용한 예제들.





Input 3: Events



     -주요 syntax
      mousePressed(), mouseReleased(), mouseMoved(), mouseDragged()
      keyPressed(), keyReleased()
      loop(), redraw()





     - mousePressed(), mouseReleased(), mouseMoved(), mouseDragged() 를 사용하면, 각각 마우스가 눌렸을때,
       마우스 버튼을 놓을때, 마우스가 움직일때, 마우스가 드래그 될때, 우리가 원하는 동작을 하는 함수를 만들 수 있다.

     -
keyPressed(), keyReleased() 역시 키가 눌렸을대, 눌려진 키가 놓아질 때에 반응하는 함수를 만들 수 있다.

     - noLoop()함수를 쓰면 draw()함수가 한 번만 실행되며, loop()함수를 쓰면 draw()함수가 다시 반복해서 실행되게 된다
       redraw()함수를 쓰면, redraw()를 쓸 때마다 draw()함수가 한 번씩 반복된다.

     


     - 중요 pages
       230-231p : mouse event를 사용한 예제들
      232-235p : key event를 사용한 예제들
       235-236p : loop(), redraw()함수를 사용하여 프로그램의 흐름을 제어하는 예제
Posted by 알 수 없는 사용자
발표 챕터

127p   Math 4: Random
133p   Transform 1: Translate, Matrices
137p   Transform 2 : Rotate, Scale
173p   Structure 2: Continuous
181p   Structure 3: Functions

- random(), noise()함수를 이용하여, 무작위한 숫자들을 생성하고, 그것을 그래픽에 응용하는 방법을 다룬다.
- processing의 기본 좌표계(화면의 좌측 상단이 0,0)를 이동하고 회전하는 방법들을 알아본다.
- processing의 특징인 draw() 함수의 개념을 알아본다.
- 함수(function)의 특징과 생성 방법을 알아본다.




Math 4: Random



     -주요 syntax
      random(), randomSeed(), noise(), noiseSeed()





     - random()함수는 두 가지 방법으로 사용이 가능하며, 결과 값으로 실수(float)를 생성한다.
      
       random(high)             ->  0과 high값 사이의 random한 숫자를 생성(high값은 포함하지 않음)
       random(low, high)      ->  low와 high값 사이의 random한 숫자를 생성(high값은 포함하지 않음)
     
     - randomSeed()함수를 사용하면 randomSeed에 사용한 값이 같은 경우 동일한 random 숫자를 얻을 수 있다. 
       *random()함수는 기본적으로 매번 실행할 때마다 다른 숫자를 생성한다.

     - noise()함수는 파라미터 값을 입력하고 그 값을 증가시켜주는 값에 따라 생성되는 값의 패턴이 변한다.
       증가되는 값이 작을 수록 이전에 생성된 값과의 차이가 적은 특징이 있다.

     - noiseSeed()함수는 randomSeed()함수와 동일한 역할을 한다.
   


    - 중요 pages
       127-128p : random()함수 사용법
       129p : randomSeed()함수 설명
       130-131p : noise(), noiseSeed() 함수 설명, noise()를 이용한 2d texture(안개이미지)생성하기






Transform 1: Translate, Matrices



     -주요 syntax
      translate(), pushMatrix(), popMatrix()


     - translate()함수를 사용하면 실행 화면 상의 원점(좌측 상단)을 원하는 위치에 옮길 수 있다.
   
     - translate()함수는 연속하여 사용할 경우 누적되어 적용된다.
   
     - pushMatrix()와 popMatrix()를 사용하면 코드 상에서 translate()함수가 적용되는 범위를 설정할 수 있다.
      


     - 중요 pages
       133p : translate()함수 사용법
       134p : pushMatrix(), popMatrix()함수 설명
       135p : pushMatrix()와 popMatrix()의 개념을 이해할 수 있는 예제






Transform 2 :
Rotate, Scale


     -주요 syntax
      rotate(), scale()

    

     - rotate()함수를 사용하면, (0,0)을 기준으로 화면을 회전 시킬 수 있다.
       *rotate()함수는 parameter값으로 degree가 아닌 radian값을 사용한다.
   
     - scale()함수를 사용하면 x,y축 좌표계의 크기를 확대시킬 수 있다.
   
     - rotate(), scale()함수는 화면상에 표시된 그래픽을 회전시키거나 확대시키는 것이 아니라
       화면의 좌표계 자체를 회전시키고, 확대시킨다는 점에 유의한다.


     - 중요 pages
       137p : rotate()함수 사용법 및 개념 설명
       138p : scate()함수 설명
       139p : 앞서 배웠던 transform()함수와 조합하여 좌표계를 다양하게 변형하는 방법 설명





Structure 2: Continuous

     -주요 syntax
      draw(), frameRate(), frameCount, setup(), noLoop()



     - draw()함수는 processing 프로그램의 가장 큰 특징인 함수로 매 frame마다 반복 실행이 된다.

     - frame속도는 변경이 없을시, 기본적으로 60fps으로 설정되어 있고, frameRate()함수로 변경이 가능하다.
       *여기서 설정되는 frame속도는 최대값을 설정해 주는 것으로 컴퓨터의 사양과 코딩에 따라 속도가 느려질 수 있다.
   
     - draw()함수가 사용되더라도, noLoop()함수를 사용하면 반복 실행을 멈추 수 있다.
   
     - 일반적인 processing 코딩의 기본 구조는 아래와 같다.

         

          int y = 0;                   // 전역 변수 선언
        
          void setup() {           // setup() 함수 안에 기본적인 설정값 설정
             size(300, 300);     // setup() 함수는 프로그램 실행시 맨처음 한 번만 실행된다.
          }

          void draw() {            // draw() 함수 안에 실행될 내용을 넣으며, draw()함수는 매 frame마다 실행된다.
             line(0, y, 300, y);  
             y = y + 4;
          }

 
     - 변수가 선언되면 그 변수의 적용 범위는 변수가 선언된 괄호를 경계로 한다.
     
예외로 setup()함수 위쪽에 선언된 변수는 프로그램 전체에서 사용될 수 있다.


     - 중요 pages
       173p : draw()함수의 특징 설명
       175p : draw()함수의 특징을 사용한 예제들
       176p : processing 코딩의 기본적인 형태
       178-180p : 변수의 적용 범위에 대한 설명과 관련 예제들





Structure 3:
Functions



     -주요 syntax
      void, return



     - processing에 기본적으로 내장되어 있는 line(), rect()등 이외에도 사용자가 직접 자신만의 function(함수)를
       만들어 쓸 수 있다.

     - return될 값이 없는 함수를 만드는 경우아래와 같은 구조를 갖는다.
       *눈(eye)모양을 그리는 함수 만들기

       void eye(int x, int y) {                       // return값이 없는 함수는 함수의 이름 앞에 void를 써준다.
                 fill(255);
                 ellipse(x, y, 60, 60);
                 fill(0);
                 ellipse(x+10, y, 30, 30);
                 fill(255);
                 ellipse(x+16, y-5, 6, 6);
       }


       * 적용 예
 
       void setup() {
                 size(100, 100);
                 noStroke();
                 smooth();
                 noLoop();
       }

       void draw() {
                 eye(65, 44);
                eye(20, 50);
       }

 

       void eye(int x, int y) {                     // 함수를 선언하는 위치는 draw()함수 밑이나 위, 둘 중 아무곳이나 가능
                 fill(255);
                 ellipse(x, y, 60, 60);
                 fill(0);
                 ellipse(x+10, y, 30, 30);
                 fill(255);
                 ellipse(x+16, y-5, 6, 6);
       }

    

   
     - 함수의 parameter의 갯수, 종류에 따라 같은 이름의 함수도 다르게 사용될 수 있다.
   
     - return 값이 있는 함수는 함수 선언시 return되는 값의 type을 명시해 주어야 한다.
       return 값이 있는 함수의 예는 아래와 같다.
      *입력된 두 parameter의 평균값을 구하는 average()함수를 만든 예

       void setup() {
             size(100, 100);
             float f = average(12.0, 6.0); // Assign 9.0 to f
             println(f);
       }
   
      float average(float num1, float num2) {             //  두 parameter의 평균값을 실수값의 형태로 return하기 때문에
            float av = (num1 + num2) / 2.0;                    // 함수의 이름 앞에 float 이라고 써준다.
            return av;                                                      // return을 할 계산된 결과 값
       }
 
    

     - 중요 pages
       181-182p : 함수의 개념에 대한 설명
       183p : 간단한 함수를 만들어 보는 예제
       188p : parameter를 사용하여, 함수를 좀 더 다양하게 사용할 수 있는 방법
       193p : parameter의 종류, 갯수에 따라 같은 이름의 함수도 다르게 사용될 수 있다.
       194p : return값이 있는 함수의 예








Posted by 알 수 없는 사용자
발표 챕터

95p     Image 1: Display, Tint
101p   Data 2: Text
105p   Data 3: Conversion, Objects
111p    Typography 1: Display
117p   Math 3: Trigonometry


- Image 파일을 불러와서 processing의 실행 창에 보이도록 하는 여러가지 테크닉 설명
- char, String 타입의 변수를 이용하여, 낱글자나 단어, 문장등을 사용하는 방법
- 서로 다른 타입의 데이터를 변환하는 방법
- 컴퓨터에 저장된 폰트를 불러와서 텍스트에 적용하기
- procssing에 내장된 삼각함수 관련 함수들








Image 1: Display, Tint


     -주요 syntax
      PImage, loadImage(), image()
      tint(), noTint()



     - processing은 기본적으로 GIF, PNG, JPG 타입의 이미지 파일을 지원한다.
     
     - 이미지 파일을 사용하기 위해선 먼저 사용하려는 이미지 파일을 현재 스케치 폴더 내의 data폴더에 반드시 저장해야 한다.
       기본적으로 procssing을 설치하면 Window의 경우 내문서 폴더에 processing 폴더가 생기고 그 안에 모든 스케치들이
       저장되며, Mac역시 Document 폴더에 위와 동일한 폴더가 생성된다.
       
       이미지를 data폴더에 저장하는 방법은 아래 세가지와 같다.
          
               * 이미지 파일을 드래그 하여 processing에 끌어다 놓는다
              
              
               * Sketch 메뉴에서 Add File을 클릭한 후 해당 파일을 선택한다.
                     
          
         
              * Sketch 메뉴에서 Show Sketch Folder를 선택한 후, data 폴더에 해당 파일을 가져다 놓는다.
                    
    





     - Pimage는 이미지를 데이타로 받는 데이타 타입이며, loadImage는 data폴더에 저장된 이미지를 사용할 수 있도록 불러오는
       기능을 한다. image()함수로 이렇게 불러온 이미지를 화면에 표시할 수 있다.
  
     - tint() 함수는 이미지에 지정한 색상을 입히거나, 투명도를 조절할 수 있다.




    - 중요 pages
       96p : GIF, PNG, JPG 파일의 차이 설명
       96-97p : 이미지를 화면에 불러오는 방법
       98p : tint()함수를 사용하면 색상 및 투명도 조절이 가능





Data 2: Text

     -주요 syntax
      char, String



     - char(character의 줄임말)는 낱글자를 저장할 수 있는 데이타 타입이다.
       데이타를 char 타입의 변수에 저장할 때는 반드시 작은 따옴표를 사용한다.
       ex)
       char a = 'n';

     - String은 단어나 문장을 저장할 수 있는 데이타 타입이다.
       데이타를 String 타입의 변수에 저장할 때는 반드시 큰 따옴표를 사용한다.
       ex)
       String a = "Eponymous";
       String c = "E";


    - 중요 pages
       102p : char 타입 설명 및 ASCII 코드 설명
       103p : String 타입 설명
   




Data 3:
Conversion, Objects



     -주요 syntax
      boolean(), byte(), char(), int(), float(), str()
      “.” (dot operator)
      PImage.width, PImage.height
      String.length(), String.startsWidth(), String.endsWidth(),
      String.charAt(), String.toCharArray(), String.subString(),
      String.toLowerCase(), String.toUpperCase()
      String.equals()



     - 다른 타입의 데이타를 사용하기 위해선 데이타의 변환이 필요하다.
       
boolean(), byte(), char(), int(), float(), str() 은 각각의 데이타 타입으로 괄호안의 데이타를 변환한다.

     - PImage나 PFont, String의 경우 다른 데이타 타입과 다르게 object 개념을 갖는다.
       Object 안의 변수를 procssing에선 filed라고 하며, Object 안의 함수를 method라 한다.
       field와 method는 ". (dot operator)" 를 이용하여 사용할 수 있다.
      
       ex) 
"ohio.jpg"가 320 x 240 pixel의 이미지라고 가정
    
             PImage img = loadImage("ohio.jpg");  //  320 x 240 pixel의 이미지
             int w = img.width; //
"ohio.jpg"의 너비를 w에 저장
             int h = img.height; // "ohio.jpg"의 높이를 h에 저장
             println(w); // Prints "320"
             println(h); // Prints "240"

      

    - 중요 pages
       106p : 데이타간 변환을 보여주는 예시문
       107p : Object에 대한 간단한 설명 및 데이터 접근 방법
       108p : String 타입에 사용되는 method소개 및 사용방법 

  
 




Typography 1: Display



     -주요 syntax
     PFont, loadFont(), textFont(), text()
     textSize(), textLeading(), textAlign(), textWidth()


 

     - processing에선 컴퓨터에 저장된 font를 사용할 수 있으며 사용방법은 아래와 같다.

     

      Tools 메뉴에서 Creat Font 선택
  
    
     

      사용하려는 font와 사이즈를 결정한다.
       이렇게 지정된 font는 현재 sketch의 data폴더에 저장되며, 여러개의 font를 불러오는 것도 가능하다.



     - 이렇게 저장된  font를 loadFont()로 불러온뒤, textFont()로 loadFont()로 불러온 font중 실제 text()에 적용될
       font를 선택한다. 그 후 text()함수로 원하는 단어나 문장을 화면에 표시할 수 있다.

       ex)
     
           PFont font; // PFont 타입의 변수인 font를 선언
           font = loadFont("SansSerif-32.vlw"); // 저장된 폰트를 불러온다.
           textFont(font); // 사용할 폰트를 지정한다.
           fill(0);
           text("SADI", 0, 40); // (0,40) 에 "SADI" 표시
           text("DIP", 0, 70); //
(0,70) 에 "DIP" 표시
           text("2009", 0, 100); // (0,100) 에 "2009" 표시
        
        


    
      - textSize(), textLeading(), textAlign() 는 각각, text의 크기, 줄간격, 정렬방법을 설정할 수 있으며,
       
textWidth()는 표시된 텍스트의 너비 값을 알 수 있다.

    - 중요 pages
       112p : font를 불러오는 방법을 설명
       114p : text 사이즈나 정렬방법등을 설정하는 방법
 

  



Math 3: Trigonometry

     -주요 syntax
     PI, QUARTER_PI, HALF_PI, TWO_PI, radians(), degrees()
     sin(), cos(), arc()


     - processing에서는 sin(), cos()같은 삼각함수를 사용할 수 있으며, 입력 값으로 degree와 radian값을 사용한다.
 
     - degree는 일반적으로 사용하는 각도를 말하며, radian은 각도를 π(3.14) 로 치환한 값이며 360도는
2π 이다.

     - PI ->
π
       QUARTER_PI ->
π / 4
       HALF_PI  -> 
π / 2
       TWO_PI   -> 2π
     - sin()과 cos() 함수를 사용하면, 일정한 주기를 같는 곡선이나 색상 같은 그래픽 요소를 만들 수 있으며,
       원의 좌표를 두 함수로 나타낼 수 있다.
   
      




    - 중요 pages
       117p : degree와 radian에 대한 개념 설명
       118p : sin()과 cos()함수 및 이를 이용한 주기적인 이미지 그리기
       123p : sin()과 cos()함수를 이용하여 원의 좌표 표현
       124p : arc() 함수로 곡선 그리기
 















Posted by 알 수 없는 사용자
발표 챕터

69p   Shape 2: Vertices
79p   Math 2: Curves
85p   Color 1: Color by Numbers

- vertex를 사용한 보다 다양한 모양의 기하학적 shape 만들기
- 수학 방정식을 사용한 곡선 그리기
- processing에서 지원하는 color mode 및 color 사용 방법






Shape 2: Vertices

     -주요 syntax
       beginShape(), endShape(), vertex()
       curveVertex(), bezierVertex()



    - vertex 함수들을 사용하면 기존의 rect(), ellipse()등을 사용한 shape보다 더 복잡하고 다양한 shape을 만들 수 있음

    - vertex()는 반드시 beginShape()으로 시작하여 endShape()으로 닫아주어야함
 
    - beginShape()의 parameter(TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP)들을 사용하여
      같은 vertex() 값을 같더라도 다양한 shape이 가능함

    - processing에서 곡선을 그리는 함수에는 curveVertex()와 bezierVertex()가 있음.
      (curveVetex()는 시작과 끝의 control point 좌표값을 조정하여 곡선의 시작과 끝 모양을 바꿀 수 있음.
       bezierVertex() 일러스트레이터의 펜툴로 곡선을 그리는 방법과 같은 개념)




    - 중요 pages
       69p : vertex 개념 설명
       72p : beginShape()의 parameter를 바꿔서 다양한 shape 만들기
       76p : curveVertex()와 bezierVertex() 차이점을 그림으로 설명
     






Math 2: Curves


     -주요 syntax
       sq(), sqrt(), pow(), norm(), lerp(), map()



    - 수학적인 방정식을 곡선을 그리는데 이용하는 것을 설명하는 챕터
      (관련 함수들이 어떤 것이 있다는 정도만 알아도 충분함.)

    - Normalizing, Mapping 관련 함수들
      norm() : 특정 범위에 포함된 값을 0~1사이의 값으로 변환
      lerp()   : 0~1사이의 값을 특정 범위 사이의 값으로 변환( norm()과 반대의 기능)
      map() : 특정 범위에 포함된 값을 또 다른 특정 범위 사이의 값을 변환

    - 이  챕터의 함수들을 사용하면 수학적인 곡선을 그릴 수 있으며, 다른 도형을 그리는 함수들과 함께 사용하면 단순한 곡선이
      아닌 곡선의 성질을 갖는 다양한 형태의 shape을 그릴 수 있음



    - 중요 pages
       80p : Normalizing, Mapping 관련 함수 소개 및 개념 설명
       82p : 수학적인 공식으로 그려진 곡선들의 예시
       84p : 도형을 그리는 다른 함수들을 함께 사용한 예

     




Color 1: Color by Numbers



     -주요 syntax
       color, color(), colorMode()



    - processing은 크게 RGB와 HSB의 color mode를 지원함
  
    - Red, Green, Blue의 조합을 색을 만들어야 하는 RGB mode보단 색상이 0 ~360가지로 나눠져 있는 HSB mode가 대부분의
      경우 사용하기 편함.(그러나 사용 상황에 따라 적절한 color mode는 달라질 수 있음)

    - colorMode() 아래와 같은 방법으로 설정하며, RGB와 HSB 각각의 min, max값을 원하는 값으로 재설정 할 수 있음
        colorMode(mode)
        colorMode(mode, range)
        colorMode(mode, range1, range2, range3)
     


    - processing의 Tools 메뉴에 Color Selector를 사용하여 이용하고자 하는 색상의 값을 알 수 있음
     


    - color 라는 변수 타입이 있어서 지정한 color값을 변수에 저장할 수 있음
    
    - color() 함수의 parameter 갯수에 따라 사용 방법이 다름
         color(gray)                                          : parameter가 하나일때는 gray scale
         color(gray, alpha)                               : parameter가 두 개일때는 alpha값이 추가된 gray scale
         color(value1, value2, value3)             : parameter가 세 개일때는 color mode에 따라 R, G, B 또는 H, S, B 값을 나타냄
         color(value1, value2, value3, alpha)
  : parameter가 네 개일때는 위의 값에 alpha값이 추가된 것

 
   - 중요 pages
       86p : color를 사용한 예제들
       88p : alpha(투명도)에 대한 설명과 예제들
       89p : color변수와 사용예
       91p : colorMode설정 방법

Posted by 알 수 없는 사용자
발표 챕터 

43p    Math 1: Arithmetic, Functions
51p    Control 1: Decisions
61p    Control 2: Repetition

- processing에 사용되는 수학 연산용 syntax들과 관련 함수를 알아봄.
- if, else 를 사용한 conditionals(조건문)및 관련 syntax
- for를 사용한 repetition(반복문) 및 관련 syntax






Math 1: Arithmetic, Functions


     -주요 syntax
       + (add), - (subtract), * (multiply), / (divide),% (modulus)
       () (parentheses)
       ++ (increment), -- (decrement), += (add assign), -= (subtract assign)
       *= (multiply assign), /= (divide assign), - (negation)
       ceil(), floor(), round(), min(), max()


    - 기본적인 수학 연산자의 사용법은 일반적인 사용법과 동일
       (곱셉과 나눗셈은 덧셈과 뺄셈보다 우선하며, 괄호 안의 수식이 먼저 계산됨)

    - %는 나눗셈의 나머지 값을 돌려줌

    - float는 소숫점이 있는 숫자를 받는 변수 타입이며, int는 소수점이 없는 정수만을 받는 변수 타입
      (소숫점이 있는 숫자를 int 타입의 변수에 넣으면 error가 발생)

    - x++ 는 x = x + 1 과 동일한 의미. 단 ++x은 같은 연산을 하지만 계산된 값이 업데이트 되는 순서가 다름.
      x++ 는 다음 라인으로 넘어가야 계산된 값이 업데이트되며, ++x는 바로 그 라인에 계산된 값이 업데이트 됨.
        
         int x = 1;
         println(x++); // "1"을 콘솔창에 출력함
         println(x); // "2"를 콘솔창에 출력함 

         int x = 1;
         println(++x); // "2"콘솔창에 출력함
         println(x); // "2"콘솔창에 출력함



    - 중요 pages
       45p : %(modulous)관련 설명
       46p : int와 float의 차이 설명
       49p : ++, -- ,*=, /= 등 단축형 연산자 및 활용법.
       49p : ceil()올림, floor()내림, round()반올림, min(), max() 함수 소개 및 사용법





Control 1: Decisions



     - 주요 syntax
        > (greater than), < (less than)
        >= (greater than or equal to), <= (less than or equal to)
        == (equality), != (inequality)
        if, else, {} (braces)
        || (logical OR), && (logical AND), ! (logical NOT)
  


     - if, else를 사용하면 정해진 조건에 맞는 경우에만 코드가 실행되게 할 수 있음
       기본적인 형태는 아래와 같음
           
       if (주어진 조건) {
          실행될 코드
       }
       
   
       실제 코드 사용 예
       x에 할당된 값만 다른 같은 형태의 코드. x의 값에 따라 그려지는 도형이 달라짐
     
       * x가 100 보다 크기 때문에 원이 그려진다.
 



 
        * x 가 100보다 작기 때문에 사각형이 그려진다.
 
                                    
    


     - &&, || 는 두 개 이상의 조건이 필요할 때 사용하는 연산자.

  


    - 중요 pages
        54p : if, else 구조를 설명하는 다이어 그램
        57p : &&, ||, ! 등의 연산자 소개 및 사용 방법
        59p : boolean 타입의 변수 사용예








Control 2: Repetition



     - 주요 syntax
        for


    - for 문을 사용하면 여러 줄로 써야하는 반복적인 코드를 짧은 몇 줄로 줄여서 쓸 수 있다.

    

   
       for (int i = 20; i < 150; i += 10) {         => i의 초기값이 20으로 주어지고, i가 150보다 작을 때까지 i에 계속 10을
            line(i, 20, i, 180);                               더하면서 { }안의 코드를 실행하게 된다.
            }
    



    - 중요 pages
        62p : for문의 구조를 설명하는 다이어그램
        64p : for문을 사용한 예제들
        65p : for문에 또다르 for문을 사용하는 예제
        66p : for문과 앞 챕터에서 배운 if문을 함께 사용한 예제
Posted by 알 수 없는 사용자

양민하 선생님께서 작성하신 프로세싱 렉쳐문서입니다.
전반적인 감을 잡는데 도움이 될 것입니다.

Posted by chacolina