▶ Processing :: 프로세싱 움직임 :: 속도와 방향

Processing :: 프로세싱 : 움직임과 방향

이번 포스팅에서는 프로세싱을 이용하여 도형의 움직임과 방향을

설정하는 과정을함께 살펴보겠습니다.

먼저 프로세싱을 열어줍니다.

int radius = 40;

float x = -radius;

float speed = 0.5;

**tip**

int와 float의 프레임당 최저속도

int의 프레임당 최저속도 : 1px

float의 프레임당 최저속도 : 소수점 자리

 > float(실수)를 사용하면 더 높은 해상도로 구현할 수 있다.

예제에서 float유형을 사용하는 이유가 있었습니다.

결과물에 모션이 들어간다면 꼭 기억해두어야할 것 같네요^^

void setup() {

size(240,120);

smooth();

ellipseMode(RADIUS);

}

void draw() {

background(0);

x += speed // x의 값을 증가시키는 부분!

arc(x, 60, radius, radius, 0.,52, 5.76);

}

여기까지 마치셨다면,

run(ctrl+R)을 해줍니다!

여기까지 마친 후 실행해본 영상입니다.

팩맨같이 생긴 도형이 왼쪽에서 오른쪽 방향으로

진행하는 모습을 보실 수 있습니다.

사진으로는 이런 모습입니다.

그런데, 위의 사진처럼 이 같이 실행했을경우,

도형이 화면밖으로 나간 다음에는 재실행되지않게되는데요~

이를위해 다시한번 코드를 살펴보겠습니다.

void setup() {

size(240,120);

smooth();

ellipseMode(RADIUS);

}

void draw() {

background(0);

x += speed // x의 값을 증가시키는 부분!

if (x > radius+width) {

x = -radius;

}

arc(x, 60, radius, radius, 0.,52, 5.76);

}

 

빨간색으로 표시된 부분이 수정된 부분인데요

if를 사용하여 화면에서 나갈경우 다시 

처음위치로 되돌려 놓는 방법입니다.

이처럼 잘 실행되는 모습을 볼 수 있으실거에요~

프로세싱은 알면 알수록

정말 재미있는 툴인 것 같습니다!ㅎㅎ