[프로세싱] 움직이는 이미지 만들기

1  움직이는 이미지를 만들어 보자.

먼저, 스케치창의 크기는 640, 480 창의 색깔은 화이트(255)로 하고 원을 하나 만들어 준다

void setup() {
  size(640, 480);              
  background(255);  
}

void draw() {
  fill(200, 0, 200);                     
  ellipse(100, 240, 100, 100);
}

 

움직이는 그림 1

​

2  원이 X축으로 움직이도록 한다

 

int x=100;

void setup() {
  size(640, 480);              
  background(255);  
}

void draw() {
  fill(200, 0, 200);                     
  ellipse(x, 240, 100, 100);
  x=x+1;
}

위의 예제는 매 프레임마다 오픈쪽으로 1픽셀씩 이동하며 원을 그려 나간다. 그런 이유로 원의 잔상이 남게 된다.

​

​

3  잔상없이 움직이는 그림을 만들기

​먼저, 원이 스케치창 오른쪽으로 사라지면 다시 왼쪽에서 나타나도록 한다.

​스케치창의 x값이 640이고, 원의 반지름이 50이므로

x값이 690이 되면 원은 x값이 -50에서 다시 나타나도록 한다.

추가로,

잔상을 보이지 않게 하기위해 바탕색 background(255)로 지정해서 원이 보이지 않도록 한다.

int x=100;

void setup() {
  size(640, 480);   
}

void draw() {
  background(255);  
  fill(200, 0, 200);                     
  ellipse(x, 240, 100, 100);
  x=x+1;
  if(x >= 690) {
    x=-50;
  }  
}

 

​

​

4  사용자의 마우스 움직임에 따라 반응하며 이동하는 원 만들기

마우스의 mouseX, mouseY 값에 따라 원의 크기와 움직이는 속도가 변한다.

마우스를 스케치창에 올려보자.

​

​

응용1

마우스 위치에 따라 원의 색깔이 바뀌도록 해 보자.

마우스의 위치값 mouseX, mouseY를 fill()함수에 넣는다.

fill(mouseX, 0, mouseY);

​

​

int x=100;
int speedX=5;

void setup() {
  size(640, 480);   
}

void draw() {
  background(255);
  fill(200, 0, 200);                     
  ellipse(x, 240, 100, 100);
  x=x+speedX;  
  if(x > width-50 || x < 50) { 
    speedX=speedX*-1;
  }  
}

응용2

원이 오른쪽으로 이동하다가 스케치창에 닿으면 반대 방향으로 튕기기

 

 

​