이번 강좌에서는 어떤 식으로 도형을 그리는지를 배우구요, 이전 강좌에서 다루지 않은 void draw()안의 내용을 여기서 다뤄보겠습니다.
좌표
도형을 그리기 전에는 좌표를 알아야 합니다.
여러분은 중학교 수학 때 좌표라는 것을 배우셨을 겁니다. 위치를 (x, y) 순서로 나타내는 것 말이죠.
이 좌표도 비슷한 것 같지만 다릅니다.
수학 때 배운 좌표는 정가운데가 (0, 0)이었지만 여기서의 좌표는 (0, 0)의 위치가 왼쪽 위이고, 좌표값은 그림에서 설명하는 것과 같이 정해집니다.
그림에서처럼 아래로 갈수록 Y값이 커지고, 오른쪽으로 갈수록 X값이 커집니다. 이렇게 그리고 싶은 도형의 좌표를 어느 정도 가늠할 수 있고, 프로세싱은 이 좌표를 보고 도형을 그립니다.
좌표의 단위는 픽셀인데, 이 픽셀은 모니터의 품질과 해상도에 따라서 달라지기 때문에 어떤 모니터에서는 작게 보이던 것이 어떤 모니터에서는 크게 보일 수 있습니다. 반대도 가능하구요. 그렇다면 이제 도형을 그려보겠습니다.
직사각형 그리기
직사각형은 rect라는 것을 써서 그립니다. rect는 rectangle을 줄여서 rect라고 한 것입니다. 사각형을 그리려면 다음과 같이 코드를 짜야 합니다.
rect(왼쪽 끝점 X좌표, 왼쪽 끝점 Y좌표, 너비, 높이);
그렇다면 Hello, world 강좌에서 다룬 이 코드가 이해되실 겁니다.
void draw() {
rect(160, 160, 80, 80);
}
void draw() 하고 중괄호 안의 코드는 여러 번 프로그램이 종료될 때까지 실행된다고 했죠? 그러면 이 코드는 X좌표가 160, Y좌표가 160인 곳을 직사각형의 왼쪽 위 위치로 하고 직사각형의 크기는 80x80픽셀로 해서 그리라는 뜻입니다.
이번 토픽이 너무 길어지면 안되니까 나머지 도형들은 하위 토픽에서 더 다뤄보겠습니다.
