[프로세싱/Processing/디자인 프로그래밍] 튜토리얼 ( Tutorial )

 프로세싱은 JAVA를 기반으로 하는 디자인 쪽에서 쓰이는 프로그램이다. 

우선 처음 아주 간단한 원만들기나 점찍기, 선그리기 등을 해보고 느낀점은

유니티에서 했던 C# 코딩이나, 그래픽스에서 배운 오픈젤 코딩보다도 훨씬 직관적이고

이해하기 쉽다는 점이었다.

JAVA 기반이다 보니 기본적인 Random 함수나 if, for 등의 함수를 간단하게 사용할 수 있었고,

width, height, mousePressed 등의 변수가 기본설정이 되어있어서 사용자가 수비게 사용할 수 

있도록 배려를 참 잘해놓은 것 같다. 라는 인상을 받았다.

간단한 Random 함수를 이용해서, 랜덤하게 원과 직사각형이 랜덤한 색으로 생성되게 했다.

수업 시간을 통해서 배운 선, 도형 등을 그리는 함수들을 정리하겠다.

ellipse ( X 좌표, Y 좌표, 가로 지름, 세로 지름 )

원을 그리는 함수로, 정확히는 원이 아니고 타원을 그리는 것도 가능하다. 가로반지름과 세로반지름이 일치하면 원일 것이고, 둘이 다르면 타원의 모양을 이루게 될것이다.

rect ( X 좌표, Y 좌표, 가로 길이, 세로 길이 )

직각사각형을 만드는 함수로, 왼쪽위 꼭지점과, 오른쪽 아래 꼭지점을 준다고 생각해도 무방하다. 마찬가지로 가로길이와 세로길이가 같다면, 정사각형이 될것이다.

point ( X 좌표, Y 좌표 )

해당 좌표에 작은 점을 하나 찍어준다. 끝

line ( X 좌표, Y 좌표, 2번째 X좌표, 2번째 Y좌표 )

선을 그리는 함수로, 첫번째 지점과 두번째 지점을 연결하는 직선을 그려준다.

quad ( X 좌표, Y 좌표, 2번째 X좌표, 2번째 Y좌표, 3번째 X좌표, 3번째 Y좌표, 

            4번째 X좌표, 4번째 Y좌표,  )

사각형을 그려주는 함수로 말그대로 사각형이다, 선 4개를 연결시켜주는데, 각각의 점의 순서는

왼쪽위 부터, 시계방향으로 점을 설정해주는데, 점의 순서를 이상하게 줄경우에는 원하던 모양이 나오지 않을 수 있으므로, 점의 순서를 제대로 넘겨주도록 하자.

triangle ( X 좌표, Y 좌표, 2번째 X좌표, 2번째 Y좌표, 3번째 X좌표, 3번째 Y좌표 )

삼각형을 그리는 함수로, 삼각형 위쪽 꼭지점을 시작으로 시계방향으로 점을 준다. 역시 이상한 순서로 주면 원하던 그림이 나오지 않는다.

arc ( X 좌표, Y 좌표, width, height, start, stop ) 

호를 그리는 함수로, 누군가 몇조각 먹은 피자모양을 생각하면 좋을 것 같다. 혹은 파이라던가.

색을 칠하는 함수로는

fill ( float ) 

fill ( R, G, B ) 

채운다. 색으로 이 함수가 등장한 이후로 나오는 녀석들은 fill 에서 정한 색으로 채워지게 된다.

색을 채우는 함수다 채우는 함수 

stroke ( float )

stroke ( R, G, B ) 

얘는 선을 칠하는 함수로, 이 함수가 등장한 이후로 나오는 녀석들의 테두리는 stroke 에서 설정한 색으로 나오게 된다.

설정 관련 함수로는

void setup( )

유니티 에서, Start 등에 해당하는 함수로, 컴파일 될때 딱 한번 먼저 수행되는 함수이다. 이런 저런 설정들을 넣어서 사용하는 함수이다. 한번 수행된다 한번

void draw ( ) 

유니티에서 Update 에 해당하는 함수로, 이 함수에 들어있는 코드들은 매 프레임마다 수행된다.

무언가 움직이는 것을 표현하거나, 매 순간순간 랜덤하게 설정해야 할 값 등은 이 안에서 처리한다고 생각 하면 되겠다.

clear ( ) 

화면을 검은색으로 클리어 시켜버린다. 무조건 검은색인 것 같다.

size ( 가로길이, 세로길이 ) 

컴파일 했을때 나타나는 윈도우 창의 크기를 설정한다. 위의 가로길이와 세로길이는 각각 width와 height로 참조가 가능하다.

랜덤 관련 함수로는

random ( float ) 

random ( float, float )

랜덤한 float 형 숫자 하나를 반환하는 함수로 인자가 하나일 경우 0 ~ 설정 float 중 하나를

인자를 두개 설정할 경우 첫번째 인자 ~ 두번째 인자 사이의 수 중 랜덤한 하나를 반환한다. 

주의할 점은 random ( 5 ) 라고 할경우 5 미만으로 설정되서 5는 나오지 않는다는 점이다.

기본 정의되어 있는 변수들 이 있는데 이들을 잘만 사용하면 굉장히 유용하다.

width  윈도우 창의 가로길이

height  윈도우 창의 세로길이

mousePressed  마우스가 눌렸는지, 안눌렸는지 True/ False 

mouseX  마우스 포인터 위치의 X 좌표

mouseY  마우스 포인터 위치의 X 좌표

==============================================================

예제 코드 1

// 그냥 단순하게 setup 이나 draw 를 선언하지 않고 바로 코딩을 하면 setup에 선언한것 처럼 행동한다.

size ( 800,600) ;   // 가로

float temp = 2 * PI / 31 ;   // temp 라는 변수를 이용, 각도설정

for( int i = 1 ; i < 31 ; i ++ ){    // 30번 반복 

 line(width/2 , height/2 , width/2  + 100*cos( temp * i ) , height/2 + 100 * sin( temp * i ) ) ;   

}    // 선을 그리는데, temp 만큼 돌려가며 하니까 태양을 그리는 것처럼 선이 그려질 것이다.

quad( 158 , 55, 199, 14, 392, 66, 351, 107 ) ;    // 사각형 만들어보기

triangle ( 100, 100,  300, 300, 500, 500 ) ;    // 삼각형 만들어보기 하지만 제대로 나오지 않을 것이다 

왜일까

================================================================

예제 코드 2

int select ;      // random 으로 원이 그려질지, 사각형이 그려질지 선택하기위한 변수

void setup(){      //  설정 선언

  size(640,480);      // 윈도우 창의 크기 설정

}

float num1 , num2, num3 ;      // 임의의 RGB 설정을 위한 변수

void draw(){      //  Update 처럼 매 프레임 수행될 함수다.

  if( mousePressed){      //  만약 클릭이 되었다면

     clear();         // 화면을 밀어버린다. 비워버린다.

  }

  else{        // 마우스가 눌리지 않았다면 랜덤하게 3개의 숫자를 셋팅한다.

    num1 = random(255);

    num2 = random(255);

    num3 = random(255);

    select = (int) random(3) ;      // select 의 값을 0 , 1 , 2 중 임의로 선택한다.

    fill(num1,num2,num3);         // 랜덤하게 설정된 3개의 숫자로 색을 채우겠다 선언

  }

  

  switch(select){  

   case 1 :       // 랜덤한 좌표에 원을 2개 그림

          ellipse(random(640), random(480), 80,80 ) ;

          ellipse(random(640), random(480), 80,80 ) ;

          break;

       case 2 :      // 랜덤한 좌표에 사각형을 2개 그림

       rect(random(640), random(480), 80,80 ) ;

       rect(random(640), random(480), 80,80 ) ;

  }

}

================================================================

예제 코드 3

float num = 0 ; 

float add = 0.2 ;

int select ;

void setup(){

  size(640,480);

}

float num1 , num2, num3 ;

void draw(){

  if( mousePressed){

   fill(100);

    clear();

  }

  else{

    num1 = random(255);

    num2 = random(255);

    num3 = random(255);

    select = (int) random(3) ;

    fill(num1,num2,num3);

  }

  

  switch(select){

   case 1 :         // 위와 동일하지만 원이 생기는 좌표를 마우스의 위치에 따라 생기게 했다.

          ellipse(mouseX, mouseY, 80,80 ) ;

          break;

       case 2 :           // 위와 동일하지만 사각형이 생기는 좌표를 마우스의 위치에 따라 생기게 했다.

       rect(mouseX, mouseY, 80,80 ) ;

  }

}

   // 이 코드를 따라하면, 마우스의 위치에 따라서 원 혹은 사각형이 랜덤하게 랜덤한 색으로 따라서 생길 것