2D 도형 응용 (위치, 회전, 색깔)

도형 위치 바꾸기

• translate(x, y): 파라미터 2개에 각 축으로 이동하고 싶은 만큼 숫자 입력

• translate()로 이동하는 정도가 계속 누적된다.

• 도형 함수 자체에 x, y 위치를 정하는 파라미터가 있다는 점을 기억하자

  • translate()로 이동한 새로운 기준점(원점)에다가

    • 도형의 x, y 파라미터까지 계산해야 도형의 최종 위치가 나온다.

• translate_guide() 함수는 이동된 기준점을 표시해주도록 제가 커스터마이즈한 함수입니다.

  • translate()를 처음 쓰면, 위치 이동을 계산하기 어려워서 pink circle로 표시했습니다.

  • translate() 함수 원래 사용법과 똑같이 사용하시면 됩니다.

translate(width * 0.5, height * 0.5);  // 캔버스의 중앙으로 기준점을 옮긴다.
rect(10, 10, 50, 50);                  // 새로운 기준점에서 x: 10, y: 10 에 도형 배치

translate(20, 20);               // x: 20, y: 20 만큼 더 이동
ellipse(30, 30, 50, 50);              // 기준점 + x: 30, y: 30 에 도형 배치.

각각 도형 위치 다르게 바꿔보기

• push, pop

push();
translate(30, 30);
rect(_, _, _, _);
pop();

push();
// 캔버스의 중앙: 너비의 반, 높이의 반
translate(width * 0.5, height * 0.5);
ellipse(_, _, _, _);
pop();

---

색깔 바꿔보기

• 색깔을 표현하는 방법 3가지

• 유용한 웹사이트: https://www.coolors.co

• rgb: 0 ~ 255

  • 0에 가까울수록 검은색, 255에 가까울수록 흰색

  • rgba: 네번째 숫자는 alpha(opacity) 값이다. 0 ~ 255 사이의 숫자.

• hex: 문자열 #

• hsb: hue 0 ~ 360, saturation 0 ~100, brightness 0~100 (색상, 채도, 명도)

색깔 함수

• fill(), noFill()

• stroke(), noStroke()

• strokeWeight()

• 색깔 설정은 뒤에 나오는 모든 코드에 apply 된다.

  • 개별 도형에만 특정 색상을 적용하고 싶다면

• 실습: 색깔 함수를 각 도형 함수 바로 위에 적어보자.

fill(0, 255, 0);
ellipse(_, _, _, _);

stroke(255, 0, 0);
rect(_, _, _, _);

noStroke();
fill(255, 100, 0);
arc(_, _, _, _, _, _);

noFill();
stroke(0, 0, 255);
triangle(_, _, _, _, _, _);

도형 회전시키기

• rotate()

  • 기준점 (0, 0)을 기준으로 회전한다.

  • 만약 translate(x, y) 함수로 기준점을 바꿨다면, 해당 (x, y)를 기준으로 회전한다.

  • 컴퍼스의 뾰족한 부분이 기준점을 찍은 상태이고, 연필 위치에서 도형이 회전하는 것과 비슷하게 생각하면 좋다.

source: Daniel Klose

• 주의할 점

  • translate() 처럼 회전되는 각도는 누적된다. 누적을 피하려면, push() pop() 으로 감싸줘야 한다.

  • push() pop() 밖에다가 rotate()를 계속 적으면, 캔버스가 회전값을 계속 기억하고 누적한다.

rotate(45);     // 전체 캔버스에 적용

push();
fill("#ff00ee");
translate(40, -40);
rotate(45);     // push, pop 안에서만 적용
arc(_, _, _, _, _, _);
pop();

각 도형을 다른 중심 축을 기준으로, 다른 각도로 회전시키기

• translate(x, y)

• rotate()

push();
fill("#ff00ee");
translate(40, -40);
rotate(45);            // push, pop 안에서만 적용
arc(_, _, _, _, _, _);
pop();