라즈이노 iOT

【 프로세싱 기초 #9】선 그리기

 프로세싱에서 실행창의 배경의 음영을 변경하는 것도 매우 간단하다. 

색을 설정해서 1픽셀 단위로 라인을 그리면 바로 배경 음영이 들어간 것 처럼 할 수 있다.

▶ 문제 : 배경의 음영을 검정과 흰색의 중간 값(125)으로 표시해보고, 여러가지 밝기 조절도 시도해보라. 

▶ 포인트 :  

- size(400, 400),  background 설정 대신 stroke(125)를 이용.

- stroke의 값은 0~255 사이의 값  (0은 검정, 255는 흰색)

- 화면 밝기는 stroke의 값을 조절 해도 되나 그리는 라인의 간격을 띄워도 비슷한 효과를 볼 수 있다.

- 프로세싱은 setup()  ~ draw() 형태의 구조를 가지나 ,  기본적으로 이런 구조 없이도 바로 사용이 가능 하다

▶ 프로그램(code) : 

 ▶ 실행결과 :

- 프로세싱은 setup()  ~ draw() 형태의 구조를 가지나 ,  기본적으로 이런 구조 없이도 바로 사용이 가능 하다

  ▶ 코드 설명 : 

- width 와 heigh 는 실행창의 폭과 높이를 의미하는 내부 변수 이다. 

(즉, 보더 사이즈의 가로, 세로 사이즈를 의미한다)

- line() 함수로 수직선을 그리는 것이다 :  

 line (x1, y1, x2,y2)  : 시작점의 좌표와 끝점의 좌표를 입력하면 라인을 그려주는 함수이다

- " i=i+1 " 는 C언어와 마찬가지로 " i+=1 "  또는 " i++ " 형태로 줄여 쓸수 있다.

(추가 예제) 라인을 4픽셀씩 건너 띄어 그려보아도 음영의 변화를 줄 수 있다.

void setup() {

  size(400,400);

  stroke(125); // 진하기 : 검정(0) ~ 흰색(255) 사이값

}

void draw() {

  for (int i =0; i<width; i=i+4){

    line(i, 0, i, height);

  }

}

- " i=i+4 " 는  " i+=4 " 형태로 줄여 쓸수 있다.

▶ 코드 다운로드 : 

sketch_09_line_draw2.pde

【 프로세싱 기초 #8】 함수 ( Function ) 만들기

 프로그램에서 자주 사용되는 부분을 모듈 형태로 만들어 주어 프로그램을 간결하게 만들어 주는 것이 사용자 함수이다. 

 프로그램에 내장되어 있는 함수도 있지만 반복적으로 사용되는 부분을 직접 프로그래머가 만들어 사용하면 편리하다

▶ 문제 : 화면의 중간에 원을 그리는데, 원의 중심에서 마우스까지의 거리를 반지름으로 하는 원을 계속적으로 그려주는 프로그램을 

사용자정의 함수를 이용하여 작성하라. ( 마우스의 위치에 따라 원의 크기가 계속적으로 변경되어야 함) 

▶ 포인트 :  size(400, 400),  background(255) 로 적당히 설정.

- 원의 중심에서 마우스까지의 거리를 반지름으로 하는 원을 그리는 것.

- 원 그리기 내장함수 이용 : ellipse(x좌표, y좌표, 가로직경, 세로직경)

- 거리를 구하는 부분을 함수로 정의 할 것.   

- 원 중심에서 마우스까지의 거리(d) : 거리는 피타고라스 정리 공식을 이용하여 식을 세운다.  거리(d) : 

프로그래밍에서 은 X * X 를 하면 된다.

 거리공식에서 X 와 Y는 중심점에서의 마우스의 위치이며, 마우스가 움직임에 따라 계속 변화 됨으로, 보더 사이즈(400x400)를 파라메터를 넣어(감안하여) 작성해야 한다. 

▶ 프로그램(code) : 

 ▶ 코드 설명 : 

  원그리기 함수인 ellipse 와 제곱근 구하기 함수인 sqrt()는 프로세싱에서 기본 제공하는 함수이다.

- 함수의 기본 골격 설명

 ▶ 실행결과(동영상) :

▶ 코드 다운로드 : 

sketch_08_Function.pde

【 실습예제 2 】

 ※ x,y 좌표와 직경을 입력하면 단순히 원을 그려 주는 함수를 아래 처럼 만들어 볼 수 있다. 

 void drawCircle(int x1, int y1, int diameter) {

ellipse(x1, y1, diameter, diameter);

}

▶ 프로그램(code) : 

▶ 실행결과(동영상) :

▶ 코드 다운로드 : 

sketch_08_1circle_function.pde

【 프로세싱 기초 #7】프로세싱에서의 연산자

 프로세싱에서의 연산자는 C언어에서의 연산자 사용형태와 거의 같다. 

따라서 C언어 기초를 익혔다면 더욱 쉬울 것이며, 배우지 않았더라도 수학에서의 사용형태와 유사하여 크게 어렵지 않을 것이다.

▶ 포인트 :  수학에서 처럼 연산자의 우선순위가 있으니 확인 하기 바란다.

  연산자는 크게 아래와 같이 분류 할 수 있다.

- 대입 연산자 : 

  a  =  10;   // 변수 a에 10을 대입한다

  a += 10;   // a의 값이 10 증가된다

  a  *= 10;  // a의 값이 10배가 된다

  a  /= 10;  // a의 값이 1/10이 된다

  a %= 10;  // a에 a를 10으로 나눈 나머지가 대입된다

- 논리 연산자 : 

 if ( a <b  &&  b<c )     // a <b 이고 b <c 이면 조건문이 참이 된다

 if ( a <b  ||  b<c )        // a <b 이거나 또는 b <c 이면 조건문이 참이 된다

- 비교 연산자 : 

 if ( a == b)     // a와 b의 값이 같으면, 조건문이 참이 된다

 if ( a != b)      // a와 b의 값이 같지 않으면, 조건문이 참이 된다

 if ( a > b)      //  a가 b의 값 보다 크면, 조건문이 참이 된다

 if ( a < b)      //  a가 b의 값보다 작으면, 조건문이 참이 된다

 if ( a >= b)     // a가 b보다 크거나 같으면, 조건문이 참이 된다

 if ( a <= b)     // a가 b보다 작거나 같으면, 조건문이 참이 된다

【 프로세싱 기초 #6】 공 움직이기 3

 앞 예제에서 공이 한 쪽 방향으로 지나가기만 해서는 별 재미가 없었다. 

그래서 이번엔 공이 한 쪽 끝에 다다르면 튕겨서(?) 반대편으로 계속 왔다 갔다 하는 프로그램을 만들어 보자 

▶ 포인트 :  size(300, 200) 의 x 좌표 값인 width 함수를 이용 하여 비교문을 통해 끝점 값 인지 비교하여 Direction 변수에 -1 값을 곱하여 반대 방향으로 x 값이 줄어 들도록 한다. 

▶ 프로그램(code) : 

 ▶ 코드 설명 : 

  if문에   xDirection = xDirection * -1    또는 xDirection *= -1;  를 넣어 처리 한다.

 ▶ 실행결과(동영상) :

【 프로세싱 기초 #05 】 공 움직이기 2

 앞의 문제에서 공이 움직이는 것으로 보이긴 했으나, 이미 그려진 것을 지워 주지 않아 깔끔하지가 않았다.  여기서는 지우는 방법 외에 잔상의 색과 배경색을 일치시키는 간단한 방법으로 지워진 효과를 구현해보려 한다.

▶ 포인트 : background()  함수를 이용하여 배경색을 바꿀 수 있다.  

인자 값으로 : 0~ 255 값을 지정할 수 있다.   ( 0: 검정색,   255 : 흰색 )

▶ 프로그램(code) : 

  ▶ 코드 설명 : 

  기존 앞 예제의 코드에 background(128); 를 추가 하였다. 

 ▶ 실행결과(동영상) :

【 프로세싱 기초 #04 】 공 움직이기 

프로세싱 언어가 얼마나 쉽고 간결한지 아래처럼 단 한 줄 만으로도 화면에 타원을 그릴 수 있다. 

▶ 포인트 : 원 그리기 ellipse 를 이용하며,  x 좌표 값을 변수로 처리하여 반복 실행 시키면 원이 이동하면서 계속 그려진다.

▶ 프로그램(code) : 

 ▶ 코드 설명 : 

  가로 세로 20 픽셀의 원을 그리고 Y 좌표 100의 위치에, X(xPos) 좌표 0 의 위치부터 draw()루프 를 통해 계속 반복으로 그려지게 된다. 

 ▶ 실행결과(동영상) :

【 프로세싱 기초 #03 】 다양한 도형 그리기 

▶ 선 그리기 :  line(x1, y1, x2, y2) // 선의 시작과 끝 좌표

→ 코딩 :  line(20, 10, 250, 60);  

→ 실행 결과 :

▶ 삼각형 그리기 : triangle(x1, x2, y1, y2, z1, z2); //삼각형 세 꼭지점의 좌표

→ 코딩 :  triangle(450, 10, 300, 50, 550, 50);

→ 실행 결과 : 

▶ 사변형 그리기 : quad(x1, x2, y1, y2, z1, z2, f1, f2); //사변형 네 꼭지점 좌표

→ 코딩 :  quad(20, 70, 200, 70, 300, 200, 10, 180);

→ 실행 결과 : 

▶ 기타 기능  : 

 → 선의 두께 조정 :  

    strokeWeight(8);

    arc(250, 300, 100, 100,0, radians(270));

 → 선을 그리지 않기 : 

notroke(); 

arc(250, 300, 100, 100,0, radians(270));

 ▶ 프로그램 코드  : 

 → 실행 결과 : 

 ▶ 코드(PDE) 다운로드 :

sketch_03_Draw_Figure_code.pde

【 프로세싱 기초 #02】 원, 타원 그리기 II

▶ 문제 : 가로 300 x 세로 200 픽셀 영역을(그림영역) 설정하고  100,100 좌표에 30x30 픽셀의 원을 그려라.

▶ 프로그램(code) : 

▶ 다양한 색의 원 그리기 :

  fill() 채우기 함수를 이용하여 도형 내부에 명암을 입혀 보자. 

▶ 실행결과 :

 ▶ 코드 설명 : 

   -   fill() 함수는 0~255 사이의 값으로 명암을 조절 할 수 있다. 

 ▶ 코드(PDE) 다운로드 :

sketch_02_draw_circle_fill.pde

【 프로세싱 기초 #01 】 원, 타원그리기 

프로세싱 언어가 얼마나 쉽고 간결한지 아래처럼 단 한 줄 만으로도 화면에 타원을 그릴 수 있다. 

▶ 원(타원) 그리기 (실행결과) :

▶ 프로그램(code) : 

 프로세싱은 크게 두가지 형태로 나뉜다, 위처럼 간단히 처리된 결과만 보여주는 정적모드(static mode) 와 아래에 소개할 동적모드(active mode)로 나뉜다.

▶ 동적모드 프로그래밍 :

  동적모드는 출력 결과물이 동적으로 계속 움직이거나, 상호작용이 가능 하도록 작성하는 모드(mode) 이다. 이는 아두이노의 스케치 작성모드와 유사하다. 아두이노 또한 설정 영역과 계속 반복 실행되는 루틴을 가지고 있다.

우선 동적모드로 원만 그려보자 

 어디서 많이 본 것 같지 않은가?

그렇다 아두이노 스케치의 작성 형태와 매우 유사하다.  

그러기에 프로세싱을 부담없이 시작할 수 있다. 

 그리고 아래와 같은 결과를 얻을 수 있다.

 자 이제 ,  동적모드로 타원을 움직여 보도록 하자.

마우스의 움직임을(위치) 좌표로 해서 움직여 볼 것이다.

 ▶ 코드 설명 : 

   -   size (200, 200);  // 그림 영역의 크기 (가로 세로 200 픽셀)

   -   ellipse(mouseX, mouseY, 80, 80);   // 타원 그리기, mouseX : 마우스의 X좌표,  mouseY : 마우스의 Y 좌표,   가로 세로 크기가 80, 80 픽셀인 원을 그려라.

 ▶ 실행결과(동영상) :

 마우스의 움직이는 좌표에 따라 원이 이동하고 있다(실은, 새로운 원이 계속 그려지고 있음)

※ 프로세싱 IDE (줄여서 PDE )

프로세싱 언어 코딩을 위한 프로그램 작성 툴(IDE)을 함축해서 PDE라 칭하고 있다. 

아래 PDE 툴의 주요 메뉴를 표시해 놓았다.

사용하는 기능과 형태가 아두이노 스케치 툴과 거의 흡사해서 사용하기 어렵지 않다. 

프로세싱 언어는 자바 언어와 관련이 있고, 자바 언어 자체가 C 언어와 유사한 특징이 있기 때문에, C언어와 함께 공부해도 좋을 것이다.