라즈이노 iOT

【 프로세싱 기초#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: 
(압축 파일을 풀어서 사용하세요)

【 프로세싱 기초#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: 
(압축 파일을 풀어서 사용하세요)