【 프로세싱 기초#22 】 PVector 자료형 활용하여 도형 그리기

【 프로세싱 기초#22 】 PVector 자료형 활용하여 도형 그리기

 프로세싱 초기에 직선, 타원, 삼각형을 그려주는 함수에 직접 숫자를 입력하여 도형들을 그려보았다.  이번에는 PVector 자료형을 이용하여 그려보려한다.  이를 통해 PVector 자료형 활용하는 법에 대해 충분히 익힐 수 있을 것이다. 
 int, float 자료형을 기본자료형이라하고, 새롭게 등장한 PVecter 자료형은 백터 형태의 좌표를 활용할 수 있는 자료형입니다. 벡터 자료형을 사용하면, 예를 들어 움직이는 도형을 구현 할 때, 서서히 혹은 빨리 움직이고 멈추게 하는 등의 가속도를 쉽게 구현 할 수 있다.    

(참고 :  '스칼라' 와 '벡터'의 차이를 이해하면 좋은데, 스칼라는 크기만을 나타내는 물리량이지만,  벡터는 크기와 방향성을 동시에 나타낼 수 있는 물리량이다.  따라서 int, float 등은 크기값 만을 표시할 수 있는 '스칼라' 자료형 이지만, PVector는 속도, 가속도, 힘, 운동량 등을 구현해 줄 수 있는 '벡터' 자료형이다.)

 

[ 프로세싱의 화면 좌표 ]  - 100 x 100 pixel 예시 

▶ 문제  :  아래 실행 결과 화면을 PVector 자료형을 선언하여 아래 각각의 도형을 나타내어라. 

   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) , 
              2. 배경색 및 라인: background(255), strokeWeight(10)
              3. 직선, 점, 삼각형, 사각형, 타원, 호 그리기 함수, 각각 사용  ]

 

[참고]

 1. 점 그리기 :  point(x, y);   

 2. 선분 그리기 : line(start x, start y, end x, end y);

 3. 삼각형 그리기 : triangle(x1, y1, x2, y2, x3, y3); // 각각 세 꼭지점의 좌표

 4. 직사각형 그리기 : rect( x, y, width, height);  // x, y는 사각형 왼쪽 상단의 좌표

 5. 타원 그리기 : ellipse(center x, center y, width, height);

 6. 호 그리기 : arc(center x, center y, width, height, start angle, end angle);

 

▶ 문제 (실행결과) 
아래처럼 동작되도록 코딩하라.

▶ 프로그램(code) : 
(이미지를 클릭하면 확대 됩니다)

int diam = 10;           // 원의 직경 변수 선언(초기값 10 pixel)
float centerX, 

PVector v1, v2, k1, k2;   // PVector 선언
void setup( ) {
  size (500, 500);
  v1 = new PVector(30, 50);    // PVector(v1.x , v1.y)
  v2 = new PVector(width, height);  // PVector(v2.x , v2.y)
  k1 = new PVector(50, 100);   // PVector(k1.x , k1.y)
  k2 = new PVector(100, 200);  // PVector(k2.x , k2.y)
  strokeWeight(10);   // 선 굵기 (pixel)
}
void draw( ) {
  noLoop();       // 루프를 반복하지 않음
  background(255);
  line (v1.x, v1.y, v2.x, v2.y); //v1과 v2의 좌표값을 이용한 선 긋기
  point(v1.x+300, k1.x*2);   // 점을 찍을 때 위치: (330, 100) 
  //삼각형 세 꼭지점 triangle(x1, y1, x2, y2, x3, y3)
  triangle(v1.x+170, v1.y, k1.x+200, k1.y, k1.x+k2.x, k2.y-100);   
  // 직사각형 그리기 rect(x, y, width, height) 
  rect(k1.x, k2.y, width/3, height/3);     
  // 타원그리기 ellipse(center x, center y, width, height);
  ellipse(k2.x+200, k2.y+100, k1.y, height/4);
  // 호그리기 arc(center x, center y, width, height, start_angle, end_angle) 
  arc(250,400, 100,100, radians(0), radians(180));
  k2.add(k1);     // k2에 k1의 벡터 좌표를 더하라~! k2=(100+50, 200+100)
  arc(k2.x, k2.y, 100,100, radians(0), radians(v1.x+v1.y+k1.y));
}

▶ 프로그램(code) 다운로드: 
(압축 파일을 풀어서 사용하세요)

pvector.zip

0.00MB

 

※ 다음 시간에 도형에 가속도를 적용해 보면, 좀 더 흥미가 생길 것이다.