라즈이노 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