▶ Processing :: 프로세싱 배우기 :: 기초예제 3 - ellipse()와 rect()

.

▶ Processing :: 프로세싱 배우기 :: 기초예제 2 - 이미지 불러오기

이번 포스팅에서는

 기초 도형에 관하여 살펴보려고 합니다^^.

오늘은 그중에서도

ellipse()와 rect()를 알아보겠습니다!

[오늘 사용하는 코드]

int x = 400;
int y = 200;
int w = 100;
int h = 100;

void setup(){
  background(20);
  size(800, 400);
  smooth();
  strokeWeight(3);
  stroke(255, 255, 0);
  fill(255);
    
  ellipse(x,y,w,h);
  rect(x,y,w,h);
}

간단한 코드로 만들어보았습니다.

결과는 아래 사진과 같습니다.

[ellipse와 rect생성모습]

그런데, ellipse와 rect는 같은 값으로

만들었지만, 위치가 다릅니다.

이는 각각의 도형마다

기준점이 다르기 때문입니다.

ellipse()의 기준점의 기본값은 중심이고,

rect()는 기준점이 왼쪽 상단 모서리 입니다.

이는 아래 코드로 바꿔볼 수 있습니다.

(다른 도형 및 이미지의 기준점 역시 바꿀 수 있습니다.)

rectMode(CENTER)

rectMode()의 적용결과는 아래와 같습니다.

[rectMode()의 적용결과]

같은 기준점을 바탕으로 그려진 모습입니다.

**

위에서 소개한 코드로 적용하면

사각형이 원 위에 나타나기때문에,

rect()를 ellipse()위에 적어 뒤로 배치하였습니다.

**

rect함수에 대해 조금 더 알아보겠습니다!

간단하지만, 유용하게 적용할 수 있는 부분입니다

앞서 rect()로 뾰족하게 각진 사각형을 그렸는데요~

위의 사진처럼, 둥글둥글한 사각형도 만들 수 있습니다^^

방법은 간단합니다.

[모서리가 둥근 사각형 만들기]

아까 넣었던 값 이외에 tl, tr, br, bl을 새로 추가할 수 있습니다.

가장 왼쪽 도형은

앞서 그려봤던 기본적인 사각형의 모습입니다.

두번째 도형은 모서리 모두

동글동글하게 바뀐 모습입니다.

방법은 아래와 같습니다.

[둥글둥글한 사각형 만들기 결과]

마지막으로

가장 오른쪽의 도형을 그리는 방법입니다.

[왼쪽 상단모서리부터 시계방향으로 tl,tr,br,bl 순서]

이렇게 각각 값을 부여해줄 수 가 있어서

원하는 모서리만 변화시킬 수 있습니다.

기초를 정리해두어야

제대로 응용할 수 있는 것 같습니다^^

앞으로도 하나하나 차근차근 정리해보겠습니다!