라즈이노 iOT

【 프로세싱 기초#18 】 그림 이동하며 그리기 

 이제까지는 박스에 색을 입히거나, 도형을 특정위치에 그리기만 해보았다. 이제 부터는 움직이는 도형을 구현해 볼 것이다. 프로세싱을 사용하는 주된 이유도 이런 동적움직임에 있다. 좀더 흥미롭고 재미가 있을 것이다. 

[ 직교 좌표계와 극좌표계 ]

▶ 문제 1  :  선 움직이기
    조건 :  1. 화면 사이즈(가로x세로 픽셀) : 400 x 400) , 
              2. 배경색 및 라인: background(0),  라인의 알파 값 (투명도: 20 )
              3. 라인이 화면 사이즈를 벗어 나지 않도록 함(constrain (a, b, c) : a변수의 값을 b이상 c이하 값으로 함)
              4. 새로운 라인을 그리면서 기존의 라인은 남겨 둘 것.(※그려진 라인을 이동시키는 것은 아님)

▶ 실행결과 1 (동작확인):

(전체 보기, 고화질 보기로 보세요)

▶ 프로그램(code)  1: 
(이미지를 클릭하면 확대 됩니다)

// x 와 y 변수는 전역변수로 선언한다

float x1, y1;  // 선의 한 쪽 끝점  
float x2, y2;  // 선의 다른 끝점 

void setup() { 
  size(400, 400); 
  background(0);   
  x1 = width/2;  
  y1 = 0; 
  x2 = width/2; 
  y2 = height;  } 
void draw()  { 
  stroke(255, 255, 255, 30); //RGB값 & 30은 투명도(Alpha) 
  x1 = x1 + random(-10, 10); //-10 이상 10 미만으로 랜덤생성 
  x2 = x2 + random(-10, 10); 
  y1 = y1 + random(-10, 10); 
  y2 = y2 + random(-10, 10); 
  // 라인이 스크린을 벗어나지 않도록 함(constrain) 
  x1 = constrain(x1, 0, width); // x1값은 0~width 사이로 고정 
  x2 = constrain(x2, 0, width); 
  y1 = constrain(y1, 0, 10); 
  y2 = constrain(y2, height-10, height); 
  line(x1, y1, x2, y2); 
  delay(50); 
}

▶ 프로그램(code) 다운로드 1: 
(압축 파일을 풀어서 사용하세요)

【 프로세싱 기초 #13】가운데 점을 중심으로 선을 램덤하게 그리기

 지난 시간 #12에서 일정한 간격으로 사선을 그려 보는 실습을 해 보았다.

이번 시간에는 화면 가운데 점을 찍어 놓고 이를 중심으로 랜덤하게 선을 그리도록 해볼 것이다.

[ 프로세싱의 화면 좌표 ] 

▶ 문제 1 : 우선 화면 가운데 점을 기준으로 1번 영역에 선들을 랜덤하게 그린 다음,  2번, 3번, 4번 영역을 그리는 것으로 생각하면 프로그래밍을 쉽게 도출해 낼 수 있다.    [ 화면 사이즈(가로x세로 픽셀) : 512, 256) ]

- 프로세싱 출력 빈화면

- 프로세싱 출력 화면 좌표 설명

▶ 문제1 (실행결과) 

▶ 문제1. 포인트 : 
- 라인 그리기 함수 [  line(x1, y1, x2, y2)  ]  : x1,y1 점에서 x2,y2로 이어지는 선을 그려준다. 

- 가운데 중심점 좌표는 "width/2, height/2"  이다. 
  (화면 사이즈 x와 y의 절반 값이 중심점이 된다. ) 

 - random 함수 [ random(x)  : x값 이하로 랜덤하게 값이 생성 된다 ]

 - 라인을 그리는 시작점은 영역의 가운데 지점(width/2, height/2)으로 정해놓고, 라인이 그려질 끝점을 랜덤하게 발생시키면 라인을 랜덤하게 그려낼 수 있다.  

 - 라인 끝점(x2, y2)을 정할 때, x2, y2 값 모두를 랜덤시키면 중복되는 라인이 그려질 수 있으므로, x2값은 for문을 돌려서 하나씩 증가시키고, y2값을 랜덤으로 돌리면 된다. 이때, 1번 영역에 한정해서 그려야 한 다는 것을 생각하자.

▶ 프로그램(code) : 

(이미지를 클릭하면 확대 됩니다)

▶ 문제 2 : 이제 1번 영역에 라인을 랜덤하게 발생 시켰으니, 나머지 2번, 3번, 4번 영역에 라인을 랜덤하게 발생 시켜 완성해보자.
 ( 답안 코드를 보기전에 미리 머리속으로 어떻게 짜야할 지 정리를 해보면 좋다)

▶ 문제2 (실행결과) 

▶ 프로그램(code) : 

(이미지를 클릭하면 확대 됩니다)

▶ 프로그램(code) 다운로드: 

(압축 파일을 풀어서 사용하세요)

Point_To_Spread_Line4View.zip

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