시각화/프로세싱

▶ Processing :: 프로세싱 배우기 :: 기초예제 5 - 배열예제 : 수평라인모션

비주얼라이즈 2014. 4. 28. 10:33








Processing :: 프로세싱 배우기

기초예제5 - 배열예제 ① 수평라인모션




수평 라인 모션 만들기


배열의 기초적인 예제로 '배열'에 대해서 살펴보려고 합니다.

오늘 만들어볼 수평라인모션의 모습은 이렇습니다.




float y;
void setup() {
  size(200, 200);
  smooth();
  frameRate(5);
}


예제의 기본적인 설정은 이렇습니다.


* frameRate()함수 초당 연산할 프레임 수 설정

: 5로 설정하여 애니메이션이 잘 보이도록 해줍니다.





void draw() { 
  background(255);
  line(0, y, width, y);
  y = y + 10;
}

 

 *background()가  draw()함수에 있을경우 매번 새롭게 배경을 그리기때문에, 1개의 선만 보이게 됩니다.

(setup()함수에 있을경우 그려졌던 선은 그대로 남깁니다.)

 

line()함수로 선의 형태를 지정해주고

 y = y + 10; 코드에의해 반복될 때 마다 y값이 10이 증가하여 선이 그려집니다.










 위 영상에서는 선이 생성된 후, 화면 밖으로 사라지게되면

다시 생성되지 않습니다.






반복수행하기



if구문을 이용하여 y값을 재설정해주는 방식으로

반복수행을 만들어줄 수 있습니다.

(선이 화면밖으로나가면, 0값을 다시 부여해주는 방식)





void draw() { 
  background(255);
  line(0, y, width, y);
  y = y + 10;
  if(y > height){
    y = 0;
  }
}




배열예제는 특히 중요한 것 같습니다.

기본적인 부분을 탄탄히 하져야 이를 토대로 응용이 가능한 것 같습니다.


다음포스팅에서는 배열에 대해 조금 더 깊게 살펴보겠습니다.