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()함수를 사용하여 프로그램의 흐름을 제어하는 예제

발표 챕터

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값이 있는 함수의 예

발표 챕터

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() 함수로 곡선 그리기
 

발표 챕터

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설정 방법

발표 챕터 

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문을 함께 사용한 예제

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

안녕하세요 박동윤입니다. 오늘 모임 내용 정리해 드립니다.

- DIP Introduction
- Exhibition 2008
- Processing?
- Why Programming? : Digital Era, New Design Environment
- Programming "Language" : Just like Japanese, English, Chinese
- Programming Basic : Grammar
- Reference, Examples


1. 프로그래밍 기본

- 순차적 실행 : 윗줄의 코드가 먼저실행되고, 아랫줄의 코드가 나중에 실행됨
   예) rect 를 이용해 사각형을 먼저그리고, 같은 좌표에 ellipse 로 원을 그리면 사각형 위에 원이 덮히는 모양이 나옴

- 매 행이 끝날때 세미콜론 ; 을 붙여주어야 함
   (한줄의 명령이 끝났다는 표시, 세미콜론이 없으면 몇줄에 나누어써도 상관은 없음)

- 함수(function, method) : 특정한 기능을 수행하는 모듈, 우리는 프로세싱에서 제공하는 다양한 함수들을 사용하여 작업
   예) rect(), ellipse(), size(), fill(), noStroke() ... 등등 - 어떻게 구현되어있는지는 알필요 없음

- 다양한 함수의 사용 => REFERENCE(http://www.processing.org/reference/) 를 적극 활용!

- // 으로 시작하는 줄은 주석 (comment)처리되어 실행되지 않음. 설명을 달아놓거나 할때 유용

- 여러줄에 걸친 주석은 /* 로시작하여 */ 로 끝내면 됨


2. Processing의 기본 뼈대


- setup 부분은 최초실행시 한번만 실행되며, draw 부분이 반복적으로 실행이 됨(예:초당 30번 - 설정에 따라 바꿀 수 있음) 
- draw 부분이 반복적으로 불려지는 점을 활용하여 변화하는 애니메이션, 또는 잔상을 남기는 작업등이 가능 
- void 는 추후설명

사각형 그리기


사각형 움직여보기

위의 결과는 매번 불리는 draw 에서 매 프레임마다 새롭게 배경을 그리지 않으므로 이전 프레임의 잔상이 남음
이를 없애기 위해서는 background(0); 을 삽입해서 매 프레임마다 사각형을 그리기 전에 전체를 검은색으로 칠함

사각형 움직여보기 - 잔상 없애기

 

3. Reference의 활용

 

예제들에서 알 수 있듯이, 프로세싱에는 다양한 기능을 하는 메소드들이 있고, 주로 이들을 호출해서 다양한 작업을 합니다.
이때 메소드(method)는, 언어에따라 함수(function)로 표기하기도 하고 같은 것이라고 일단 아시면 됩니다.

플래시 AS2.0 / 3.0 에서도 function 많이 보셨죠. 특정 기능을 수행하는 모듈이라고 보면 되고요.
중요한점은, 프로그래머들도 이런 수많은 메소드들을 전부 외워서 사용하는게 아니라는겁니다.

그래서 제일중요한것이 바로 Reference 입니다. 

http://www.processing.org 에 가시면 상단 메뉴중 Reference 가 있는데요, 들어가보시면 프로세싱에 내장된 다양한 함수들이 보입니다. rect() 나 ellipse() 등 부터 다양하게 카테고리별로 잘 분류가 되어있습니다.

클릭하면 사용 방법에 대한 설명이 아주 자세히 나와있는데요,
사용 예제와 결과 화면을 일단 간단히 보시고, 어떤기능을 하는 메소드인지 Description 을 보고 이해하신 후
사용 방법을 보시면 됩니다.

Syntax, 말그대로 문법이라고 할 수 있겠는데, 메소드를 사용할때 몇개의 파라매터가 필요하고 각각의 파라매터는 무엇을 의미하는지 잘 설명이 되어있습니다. 이부분이 가장 중요하겠죠.

물론, 문법은 말그대로 규칙/약속과 같은 것이기에, 파라매터의 개수가 틀리다던가, 타입이 틀리다면 에러를 냅니다.

 

마지막으로 가장 밑의 Releated 는 말그대로 관련이 있는 메소드들인데, 한번씩 보시면 유용하게 함께 사용할 수
있는 것들이 많습니다.

결론은, 모든 정보와 해결책은 processing.org 에 있다는 점이고요, 특히 Reference 는 영어공부할때 영어사전을 사용하듯이 항상 북마크 해놓고 사용하세요-
(중국어, 일본어 공부하듯 역시 컴퓨터와 대화할 수 있는 '언어'를 공부한다는 점을 한번 떠올리시고...당연히 사전이 필수겠지요?)

그리고, 참고로 코딩시 주황색으로 나타나는 프로세싱 내장 메소드들은 블럭지정후 오른쪽클릭해서 Find in Reference 하면 마찬가지의 위의 Reference 페이지가 열립니다. 코딩중간중간에 유용하게 수시로 사용해야할 기능입니다.

 

4. Examples

위와같이 Processing 메뉴의 File - Examples 에 보시면 정말 무궁무진한 예제들이 많습니다.

간단한 기본 도형부터 복잡한 3D 예제까지 전부 소스가 있으니 한번씩 쭉 전부 실행을 해보시고요.
재미있는 것들이 워낙 많아서 이들 예제들만 조합해서도 충분히 멋진 interactive 한 작업들을 해낼 수 있습니다. 아이디어와 영감을 얻을 수 있는 좋은 소스이기도 하고요.

당장 코드가 이해 안되는 예제도 많겠지만, 일단 심심할때마다 하나씩 실행해보시고 어떠한 표현들이 가능한지 보는데 큰 도움이 됩니다.

다른 언어를 공부할때도 그렇듯이, 역시 반복적으로 자꾸 사용해봐야 언어는 실력이 늡니다. 꾸준하게 심심할때마다 간단히 배운것들을 쳐보고 실행을 해보시고요...

"백견이 불여 일타(打)" 라는 말이 있습니다. 아무리 영어 문법공부 해봤자 말한마디 못하는것과 마찬가지로,
직접 쳐보고 뭔가 만들어 보지 않으면 금방 다 까먹고 아무것도 못하게 됩니다^^

 

		5.17	전시 작업에대한 개략적인 아이디어
학과(학년)	이름	출석
CD2	박동윤	o	몸 컬러 분석 - 카메라, 그래프, DB 통계화 도로 차량 움직입에 따른 비주얼 생성 - 카메라 3D Lifeform - data from the internet, camera …
FD1	류예림	DF보충수업
FD1	최윤정
FD1	심혜림
PD1	한재석	o	몸동작의 정도에 따른 랭킹화 + 상품?
PD1	안성민	o	음악 연동 - 손동작에 따른 에코,노이즈 effect
PD1	서리진
PD1	박정은	봉사활동	사람이 수묵화의 한 요소처럼 파묻히게 되는
PD1	김지연
PD1	형예명	o	구름-꽃에물주기-마이크타이밍이용 낙엽 - 타이밍, 음성 몸으로 튀겨서 공넣기
CD1	전정민		탈의 - 관음증 심리 이용 작업
CD1	김지인	DF보충수업
CD1	함경석	o	음악 톤에 따라서 관람객 초상화 구성 비트/주파수에 따른 얼굴 구현 차이
CD1	이현주
CD1	김재인		DF 보충수업-예술의전당
CD1	설승재	o	동작지시, 녹화, 영상 믹싱후 보여주기
CD1	김유정	o	사운드-키보드 입력에 따른 visualization
CD1	이정은	o	스프링클러, 여인 비막아주기, 참참참, 금붕어, 식탁보

금일 전시 작업 계획 발표 - 11명





2008.05.17 모임내용
----------------------------------------------------------------------------------------------
개략적인 아이디어 발표, 공유



공지사항
----------------------------------------------------------------------------------------------
- 일단, 5월 남은 2번의 스터디와 6월 4번의 스터디 모임에서 작업을 어느정도 일단락 짓는것으로 이야기 됨.
  (6월까지 모든 작업이 완료되기는 어렵겠지만, 작업의 형태, 크기, 필요장비는 확정이 되어야 함,
   추후에는 오직 작업만 더 하면 될 수 있도록)

- 갤러리 전시를 위한 장비 대여 및 공간 확정을 위해 6월까지 모든 작업물의 필요 장비/규모를 확정
   지어야 합니다.

- Processing 과 더불어 Arduino 를 활용 가능하다고 하니 이 부분을 염두에 두시고 작업 방향을
   잡으셔도 되겠습니다.

- 6월에 기초학과 파이널이 있고, 특히 PD학과 분들은 바로 계절학기가 시작되므로 이를 고려하셔서
  작업의 규모와 시간 계획을 잘 세우시기 바랍니다.
  (PD학과 계절학기의 강도가 상당하므로...; 이전에 작업의 큰 부분은 거의 끝내놓으셔야 할 것 같습니다)


과제
----------------------------------------------------------------------------------------------
개인별 전시 작업 계획안 작성 – 게시판 업로드
개인별 전시 작업 시안 1개(~2개) 로 줄이고
필요한 장비, 규모(프로젝터, 설치 필요 스크린 크기, 공간 등),
기능적으로 필요한 프로그램적 요소(라이브러리) 등 을 세부적으로 정리해 오기

다음시간에 전시 작업물의 숫자와 규모들을 확정지어야 전체 전시의 계획이 가능해지므로
다음시간 까지를 전시 작업 계획의 deadline 으로 하겠습니다.
(안나오신 주위 멤버들에게 꼭 알려주시고 참여 여부를 확정짓도록 하길 바랍니다.)

못오신다면 메일과 주위 멤버를 통해 알려주시기 바라고, 다음시간까지 전시 작업 계획에 대한이야기가 없으면 전시에 참여하지 않는 것으로 간주하겠습니다.

Processing 내장 Example 한번씩 보고 실행 해보기 (File 메뉴의 Examples)
다양한 예제를 보시면 아이디어 도출에 큰 도움이 될 수 있습니다.

2008.05.11 모임내용
----------------------------------------------------------------------------------------------

참고할 만한 사이트와 주로 사용되는 코드 (카메라 등)에 대한 소개 (유승환/김상은)
(processing reference 메뉴에 있습니다.)

많이 쓰이는 라이브러리 등은 processing library share 에 올려서 공유하도록 하겠습니다.


공지사항
----------------------------------------------------------------------------------------------

이번 토요일까지는 자유롭게 각자 여름 전시회때 했으면 좋을만한 작업들을 생각해와서
발표/공유하는 시간을 가질 예정입니다.

당장은 기술적으로 가능한지 여부에 너무 얽매이지 말고, 브레인 스토밍 단계라고 생각하시고
자유롭게 생각하면 좋을 것 같습니다.

다만, 말로만 설명하기보다는 간단한 스케치 등이 있으면 더 좋겠지요.
가능하면 두 세가지 이상의 안을 생각해 오면 좋겠습니다. (실현 불가능한 안이 있을 수 있기에)

스터디한 내용을 활용해서 어떤 컨셉을 잡고 동적인 비주얼로 나타내는 작업도 좋겠고
현재 만들고 있는 게임 등을 좀더 재미있게 발전시켜보는 방향도 좋을 듯 합니다.

토요일 6시반에 3학년과 전시회 관련 전체 미팅이 있습니다.
(3학년 수업이 토요일 오전/오후 전부 있고 저녁 6시에 끝나는 관계로…)
그래서 이번 모임은 저녁 5시에 하는 것으로 하겠습니다.


과제
----------------------------------------------------------------------------------------------
- 전시회 작품 컨셉, 아이디어


참고사이트 (processing reference 메뉴에도 있습니다.)
----------------------------------------------------------------------------------------------
http://webcamxtra.sourceforge.net/index.shtml
http://code.compartmental.net/tools/minim/
http://www.v3ga.net/processing/BlobDetection/index-page-home.html
http://www.realtimeart.com/index.php
http://www.silentlycrashing.net/ezgestures/
http://www.flong.com/
http://generative.info/works/2005/ptmail/
http://www.number27.org/
http://www.flight404.com/blog/
http://www.vimeo.com/137083
http://www.kinesis.be/
http://carohorn.de/anymails/
http://www.wefeelfine.org/index.html



인원현황 - 기초학과(FD3 / PD6 / CD9)
----------------------------------------------------------------------------------------------
제가 파일을 잘못 덮어쓰는 바람에 4.26, 5.3 일자 자료를 유실했습니다 ;;
? 표시된 분들은 계속 하시는 건지 불분명한 분들입니다. 확인 부탁드립니다.

		3.29	4.5	4.12	4.19	"5.10"
학과(학년)	이름	출석	출석	출석	출석	출석
CD2	박동윤	o	o	o	o	o
CD2	정용채	o	o	지각	o	?
FD1	류예림	아픔	o	모델샵	o	o
FD1	최윤정	o	o	모델샵	o	o
FD1	심혜림	집(지방)	o	o	o	o
PD1	한재석	o	결혼식	o	o	o
PD1	안성민	o	지방	o	o	o
PD1	서리진	o	o	o	o
PD1	박정은	o	o	o	o	o
PD1	김지연	o	o	o	o
PD1	형예명	o	o	o	o
CD1	전정민	아픔	o	o		?
CD1	김지인	o	모델샵	o	?
CD1	함경석	o	o	o	o	o
CD1	이현주	o	o	o	o
CD1	김재인(격주)	o	o
CD1	설승재	o	o	o		o
CD1	김유정	o	o	o	o	o
CD1	이정은	o	o	o	o	지방
CD1	박근명	o	o		?

2008.05.03 모임내용
----------------------------------------------------------------------------------------------
- 교재 스터디 진행 (~377p) : 박동윤
- 중요한 내용 :
   321p - 픽셀의 컬러값 / 이미지를 얻어내는 함수 get() / set() 활용
   342p - 컬러값 활용
   347p - 다양한 필터 활용
   355p - 프로세싱에서 화면은 pixels[] 라는 배열로 모두 저장이 되어있다. 이를 활용해 이미지 조작 가능
             loadPixels(), pixels[index], updatePixels() 를 활용한 이미지 가공 활용
   368p - save("파일명.jpg") 와 saveFrame() 을 활용한 현재 화면 저장


공지사항
----------------------------------------------------------------------------------------------
- 이번 시간을 마지막으로 Processing - A Programming Handbook for Visual Designers and Artists
   책 스터디를 마무리 지었습니다.
   이후 395 페이지 부터는 class 등의 기타좀더 심화된  프로그래밍적 요소가 많고,
   당장은 지금까지 스터디한 내용들로도 충분히 흥미로운 작업을 할 수 있다고 생각됩니다.
   이후 부분의 내용은 앞으로 작업을 하다 필요한 경우가 생기면 개별적으로 스터디 하면 되겠습니다.

- 다음시간부터는 전시회 작업에대한 이야기를 진행할 예정인데, 아직 구체적인 작업 형태나 주제는
  정해지지 않았습니다만, 그래도 지금까지 공부한 내용들을 바탕으로 꼭 해보고 싶은 것들을
  평소에 생각해 보면 좋겠습니다.

- 다음시간에 맥주한잔 하죠 ^^