라즈이노 iOT

【 프로세싱 기초#21 】 빗방울 효과 내기 (10개의 커지는 원 구현)

 지난시간 원 하나를 화면 사이즈 만큼 키워 보았다. 이 원리를 이용해서 10개의 원을 랜덤으로 생성시켜 커지도록 해보려 한다. 마치 빗방울이 잔잔한 수면위에 퍼지는 듯한 멋진 효과를 구현해볼 수 있을 것이다. 

[ 프로세싱의 화면 좌표 ]  - 100 x 100 pixel 예시 

▶ 문제  :  화면에 10개의 원을 랜덤(크기와 위치)으로 생성 시켜 점점 커지도록 구현 하라.

   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) , 
              2. 배경색 및 라인: background(200), stroke(0), strokeWeight(3), fill(255, 10)
              3. 10개의 원은 배열과 반복문(for문)을 이용하여 간단히 구현할 것.
              4. 원 그리기는 ellipse(x, y, diam, diam) 함수 사용  ]

▶ 문제 (실행결과) 
아래처럼 동작되도록 코딩하라.

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

int [] arrayOfDiam;         // 원의 지름값을 위한 배열 선언 (arrayOfDiam)
float [] arrayOfCentX, arrayOfCentY;    // 원의 중심 좌표를 위한 배열 (X , Y) 선언
void setup() { 
  size(500, 500);     //   출력 화면 크기 
  background(200);   //  배경화면 값 
  arrayOfDiam = new int[10];   //   10개의 원을 위한 배열 변수 생성
  arrayOfCentX = new float[10];   // 10개의 원을 위한 배열 변수 생성
  arrayOfCentY = new float[10]; // 10개의 원을 위한 배열 변수 생성
  for (int i=0; i<10; i++) {                      // 10개의 원,  for 반복문 사용
    arrayOfDiam[i] = int(random(500));   // 원의 배열 변수 값들에 초기값(랜덤)을 지정
    arrayOfCentX[i] = random(500); 
    arrayOfCentY[i] = random(500); 
  } 
  stroke(0);               //   선의 색,  굵기, 채우기 설정 
  strokeWeight(3);                    // 
  fill(255, 10);                            // 
} 
void draw() { 
  background(200);   // 
  for(int i=0; i<10; i++) {      //  원그리기 함수와 반복문을 이용해 랜덤으로 원을 그리기
    ellipse(arrayOfCentX[i], arrayOfCentY[i], arrayOfDiam[i], arrayOfDiam[i]); 
    arrayOfDiam[i] +=2;   //  원의 직경 증가 값 (pixel) 
    arrayOfDiam[i] %= width;   //  직경이 화면 폭(width)과 같아지면 나머지값(0) 을 넣어 리셋
  } 
}

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

▶ 내용설명&실행결과(영상) :
(영상을 확대하고 고화질로 보세요)

(유튜브에서 보기  : 1080p 지원)

https://youtu.be/cYJt96xzHVk

( 카카오 : 720P 화질 지원)

【 프로세싱 기초#20 】 점점 커지는 원 그리기

 지난시간 10개의 선을 랜덤생성시켜 움직이는 것처럼 구현해 보았다. 
이번 시간은 직경 10픽셀의 원이 점점 커지도록 구현해보려 한다.  실제로 하나의 원이 커지는 것은 아니지만 시각적으로 그렇게 보이도록 프로세싱으로 처리할 수 있다.   내용이 길지 않으므로 차근 차근 따라해보면 어렵지 않게 이해 할 수 있을 것이다.

[ 프로세싱의 화면 좌표 ]  - 100 x 100 pixel 예시 

▶ 문제  :  화면 가운데 10픽셀의 원이 화면 사이즈 까지 점점 커지도록 구현 하라. 

   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) , 
              2. 배경색 및 라인: background(180), stroke(0), strokeWeight(5), fill(255, 20)
              3. 원 그리기는 ellipse(x, y, diam, diam) 함수 사용  ]

▶ 문제 (실행결과) 
아래처럼 동작되도록 코딩하라.

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

int diam = 10;           // 원의 직경 변수 선언(초기값 10 pixel)
float centerX, centerY;  // 원의 중심점 좌표 변수 선언

void setup() {
  size(500, 500);
  centerX = width/2;     // 화면 가운데 중심점 잡기(폭)
  centerY = height/2;    // 화면 가운데 중심점 잡기(높이)
  stroke(0);           
  strokeWeight(5);       // 선의 굵기
  fill(255, 20);             // 원의 테두리 색(255)과 내부 채움의 투명도(Alpha:20)
}
void draw() {
  background(180);     // 잔상이 남지 않도록 루프를 반복할 때 마다 배경을 새로 입힌다
  ellipse(centerX, centerY, diam, diam);
  diam += 10;          // 직경을 10pixel 씩 증가 시킨다
  if (diam == width) diam = 0;   // 원의 최대크기가 화면 사이즈를 벗어나지 않도록 리셋 시켜준다
//  diam %= width;                  // 원의 최대크기 = 화면 사이즈가 되면 나머지 값(%)이 0이 된다.
  delay(50);                           // 원이 커지는 시간지연 값
}

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

▶ 내용설명&실행결과(영상) :
(영상을 확대하고 고화질로 보세요)

(유튜브에서 보기  : 1080p 지원)

https://youtu.be/5mQgZXo9IbY

( 카카오 : 720P 화질 지원)

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

 앞선 과제에 이어, 움직이는 도형(라인)을 구현해 보려한다.  이번에는 배열이라는 요소를 사용하는데, 간단하고 효과적인 방법이므로, 잘 기억하면 좋다. 

[ 프로세싱에서의 좌표 ]

▶ 문제 1  :  선 움직이기 2
    조건 :  1. 화면 사이즈(가로x세로 픽셀) : 400 x 400) .
              2. 배경색 및 라인: background(0) . 
              3. 10개의 세로 라인을 배열을 이용하여 위치값을 주면서 그릴 것. (세로라인 그리기 : y1=0, y2=height 고정)

              4. 배열에 선의 처음 위치값을 초기 값으로 지정 해줌 (0, 40, 80, ... 360)

              5. 선의 이동할 범위를 -10~+10 사이값으로 랜덤생성시켜 적용할 것.
              6. 랜덤 값이 화면 사이즈를 벗어 나지 않도록 함(constrain (a, b, c) : a변수의 값을 b이상 c이하 값으로 함)
              7. 이동되는 느낌을 주기위해 draw() 반복 루프에, 배경을 검은색으로 줄 것 ( 'background(0)' )

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

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

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

float[] arrayOfPositions; // 배열 변수의 선언
void setup() {
  size(400, 400);
  background(0);
  stroke(255);  // 라인을 흰색으로
  arrayOfPositions = new float[10]; //'10'자리 배열변수 메모리할당
  // 배열변수를 초기화하는 루틴 
  for (int i=0; i<10; i+=1) {
    arrayOfPositions[i] = width/10 * i; //"0, 40, 80, ... 360" 초기 위치값 주기
  }
}
void draw()  {
  background(0);  // 배경을 검은색으로 매번 지우지(매우지) 않으면 잔상이 남는다.
  for(int i=0; i<10; i+=1) {
    arrayOfPositions[i] += int(random(-10,10));//'±10' 범위 랜덤값 적용    
    arrayOfPositions[i] = constrain(arrayOfPositions[i], 0, width);//0~width까지 한정
  }  
  for(int i=0; i<10; i+=1) {
    line(arrayOfPositions[i], 0, arrayOfPositions[i], height); //line(x1, y1, x2, y2)
  }
  delay(300);
}

▶ 프로그램(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

【 프로세싱 언어 】 #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