【 프로세싱 기초#18 】 그림 이동하며 그리기

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

moving_Line.zip

0.00MB