라즈이노 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: 
(압축 파일을 풀어서 사용하세요)