라즈이노 iOT

【 프로세싱 언어 】 #13 Tweak(변수 조정) 기능 이용해 보기

 프로그래밍을 하다보면 프로그램 내에서 각종 변수 값의 수치를 변경해보며 테스트 해보는 상황을 자주 겪게 된다.  이때 단순한 수치값 하나를 바꾸더라도 다시 컴파일 및 실행을 하여야 바꾼 수치가 반영된 결과를 확인 할 수 있다. 여러번 수치를 변경 테스트 할 경우 상당히 번거로운 일이 아닐 수 없다. 하지만 프로세싱에서는 이러한 문제를 버추얼하게 깔끔하고 재미있게 해결해준다.  

그 기능이 바로 지금 소개할 Tweak 기능이다. 

▶ 문제 1 : 앞선 예제를 가지고 Tweak 기능을 테스트 해보자. 

▶ 실행 동영상

(전체화면으로 보면 보다 선명하게 보실 수 있어요)

▶ 포인트 : 
- 프로그램 작성후 메뉴에서 :  Sketch(스케치) 》 Tweak(변수조정하기) 를 클릭한다. 이때, 먼저 저장 하라는 메세지가 뜨는데, 저장후 다시 실행하도록 한다.

▶ 프로그램(code) : 

 ▶ 코드 설명 : 

   - slash 값을 변경하면 배경 사선의 기울기가 변한다.

   - for 문에서 i= -slash 처럼 -값으로 시작되는 이유는 만약, 양의 값으로 시작되면 사선이기 때문에 왼쪽 하단부에 사선이 그어지지 않는 공간이 생기기 때문이다. 

▶ 코드 다운로드 :

 sketch__12_line_width_slash.pde

【 프로세싱 기초 #12 】 선(Line)으로 사선 배경 연출하기

 이제까지 직선을 이용해 배경의 음영을 넣거나 컬러배경, 그라데이션 배경등을 연출 해보았다. 이제 간단하지만 알아두면 도움이 되는 사선을 연출해보자. 

▶ 문제 1 : 배경에 일정 간격의 사선을 그어 보도록 하자.

▶ 사선 배경(실행결과) 

▶ 포인트 : 
- 기울기 값을 줄 수 있도록 기울기 인자에 해당 하는 변수를 선언해서 초기값을 준다

▶ 프로그램(code) : 

 ▶ 코드 설명 : 

   - slash 값을 변경하면 배경 사선의 기울기가 변한다.

   - for 문에서 i= -slash 처럼 -값으로 시작되는 이유는 만약, 양의 값으로 시작되면 사선이기 때문에 왼쪽 하단부에 사선이 그어지지 않는 공간이 생기기 때문이다. 

▶ 코드 다운로드 :

sketch__12_line_width_slash.pde

【 프로세싱 기초 #11】선(Line)으로 색상있는 배경 연출하기

 앞 글에서는 선으로 흑백 톤의 배경을 그려 넣는 것을 해보았다. 이번에는 같은 원리로 선에 색을 넣어 그려 볼 것이다. 배경을 그라데이션 효과처럼 연출해 볼 수 있다.

▶ 문제 1 : 라인 그리기를 이용하여 그라데이션 배경을 아래 처럼 나타내도록 코드를 작성하라.

▶ 그라데이션 배경(실행결과) 

▶ 포인트 :
- stroke() 함수를 이용한다.   

- stroke() 함수는 인자값이 하나이면 흑백(예, stroke(0)이면 검정, stroke(255)이면 흰색) 값을 조절 할 수 있고, 인자값이 3개면 RGB 컬러를 표현 할 수 있다. (예, stroke(R,G,B), stroke(255, 0, 0) → 빨간색) ,  또한, 인자값이 4개이면 투명도(알파)를 조절 할 수 있다.  즉, stroke() 함수의 파라미터 값이 1개이면 흑백색상, 3개이면 컬러 색상을 표현 할 수 있다. 

- 라인을 출력 화면 좌측에서 부터 수직으로 그려서 우측 끝까지 그려나가면서 그라이데이션을 주기 위해 for문을 이용하여 특정색의 농도를 조절 한다. 

- 본 프로그램에서는 Red 인자 값의 요소를 변화 시켜 보았다.

▶ 프로그램(code) : 

 ▶ 코드 설명 : 

   -   stroke(255-i/2, 0, 0);   // 처음 레드 라인을 하나 그리게 되고, 점차 R값의 인자값 255(레드)에서 i/2 값을 뺀 색의 라인을 폭(width)의 끝까지 그려나가게 된다. 

▶ 코드 다운로드 :

sketch__11_line_width_color.pde

 ▶ 문제2 : 화면을 위, 아래 두개로 분할 하여 서로 다른 그라데이션을 배경을 연출 해보라.

▶ 그라데이션 배경(실행결과) 

▶ 프로그램(code) : 

▶ 코드 다운로드 :

sketch__11_line_width_color2.pde

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

 stroke,  strokeweight 등의 내장 함수 를 이용하여, 다양한 형태의 선을 그을 수 있다. 

▶ 문제1 : 아래 실행 결과를 참고하여, 오른 쪽으로 갈수록 점점 밝아지는 그라이데이션 효과를 선 그리기를 이용하여 작성하라.

▶ 실행결과 :

▶ 포인트 :  

- size(400, 400),  stroke(i)를 for문을 사용하여 선의 밝기를 조절

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

- line(x1,y1,x2,y2) 함수로 수직선을 그린다

 ( 선의 시작점 은 x1,y1 ,   선의 끝점은 x2, y2 가 된다)

▶ 프로그램(code) : 

▶ 코드 설명 : 

- for 문을 사용하고, 그림을 그려주는 끝점의 위치 x좌표는 width,  y좌표는   heigh 가 된다. (즉, 보더 사이즈인 가로, 세로 사이즈 만큼 선을 그리게 된다)

▶ 코드 다운로드 : 

line_draw1.pde

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

▶ 문제2 : 오른쪽으로 갈수록 선의 굵기를 두껍게 그려라.

▶ 실행결과 :

▶ 포인트 :  

- size(400, 400),  stroke(i)를 for문을 사용하여 선의 밝기를 조절

- 배경을 기본 흰색으로 두고(background(255)), stroke의 가중치 값으로 그려주는 선의 굵기(폭)을 굵게 한다. 

▶ 프로그램(code) : 

  ▶ 코드 설명 : 

- strokeWeight(i/50) 에서 처음 값이 0 됨으로 폭 또한 0이 되어 처음 자리에 라인이 그려 지지 않으므로,  strokeWeight(i/50+1); 라고 바꾸어도 좋다. 

▶ 코드 다운로드 : 

line_draw2.pde

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

▶ 문제3 : 선의 굵기를 랜덤으로 하여 그려라.

▶ 실행결과 :

▶ 포인트 :  

- random(X) 함수를 이용 :  0 ~ X 미만 값 까지의 실수 값을 발생한다.

- int (random(X)) 으로 하면 쉽게 정수값으로 변환 된다.

▶ 프로그램(code) : 

  ▶ 코드 설명 : 

- strokeWeight(i/50) 에서 처음 값이 0 됨으로 폭 또한 0이 되어 처음 자리에 라인이 그려 지지 않으므로,  strokeWeight(i/50+1); 라고 바꾸어도 좋다. 

▶ 코드 다운로드 : 

line_draw3.pde

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

▶ 문제4 : 가로와 세로 선의 동시에 교차하여 그려라

▶ 실행결과 :

▶ 포인트 :  

- 배경색은 흰색으로 지정 background(255);

- 선의 진하기는 제일 진한 검정으로 고정 stroke(0)

- 라인 간격을 적당히 띄어 주어야 격자 형태로 그려진다

  (예, for 문에서 라인 간격 10을 줄 경우,  i += 10 )

▶ 프로그램(code) : 

  ▶ 코드 설명 : 

- 첫 번째 for 문은 라인의 세로 선을 그리기 위한 것이고, 

  두 번째 for 문은 라인의 가로 선을 그리기 위한 것이다. 

▶ 코드 다운로드 : 

line_draw4.pde

【 프로세싱 기초 #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

【 프로세싱 기초 #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); 를 추가 하였다. 

 ▶ 실행결과(동영상) :