좌표 하나씩 바꿔 보기
3D 물체와 카메라의 관계를 배운 뒤, 웹페이지에서 그림을 그리는 영역인 canvas의 좌표를 살폈다. 이번 예제는 Canvas 2D로 그린 사각형 하나다.
기본 좌표에서 왼쪽 위는 (0, 0)이다. x는 오른쪽으로, y는 아래쪽으로 갈수록 커진다. 사각형의 위치는 왼쪽 위 꼭짓점을 기준으로 정했다.
크기가 40 × 40인 사각형을 (40, 40)에 놓고 x를 200으로 바꿨다. 세로 위치와 크기는 그대로이고 오른쪽으로 이동하는 모습을 확인했다. 다음에는 x를 고정하고 y를 40에서 120으로 바꾸면 아래로 이동할 것이라고 예측했다. y 변경은 실제 조작이 아닌 예측으로 확인했다.
이것은 기본 Canvas 2D 좌표의 규칙이다. 이후 배울 Three.js의 3D 좌표계에 그대로 적용하는 규칙은 아니다.
다른 위치에 그리면 이전 그림도 남는다
fillRect(x, y, 너비, 높이)는 해당 위치에 사각형을 채워 그린다. ctx는 canvas의 2D 그리기 도구다. 빈 canvas에 다음 두 명령을 실행하고, 중간에 지우지 않는 상황을 생각했다.
ctx.fillRect(40, 40, 40, 40);
ctx.fillRect(200, 120, 40, 40);
내 답은 사각형이 2개 남는다는 것이었다. Canvas 2D가 이미 그린 결과를 유지하고, 두 사각형의 위치가 겹치지 않기 때문이다. 이 질문은 코드의 결과를 예측한 것이며 별도의 실행 관찰로 기록하지 않는다.
지우고 새 위치에 다시 그리기
clearRect(x, y, 너비, 높이)는 지정한 영역을 투명하게 지운다. 기본 좌표를 사용하는 400 × 200 canvas에서 슬라이더 예제의 핵심을 줄이면 다음과 같다. 설명을 위해 격자를 그리는 부분은 생략했다.
function draw(x) {
ctx.clearRect(0, 0, 400, 200);
ctx.fillRect(x, 40, 40, 40);
}
슬라이더 값에 따라 draw(40), draw(80), draw(120)처럼 호출한다. 나는 이 동작을 “지우고 좌표를 바꿔 다시 그리는 과정을 반복해서 이동한 것처럼 보이게 한다”라고 설명했다.
여기서 기억할 것이 예제의 움직임은 이전 그림을 지우고 새 좌표에 다시 그리는 과정으로 만든다.
여기서는 canvas 전체를 지운다. 여러 물체를 그리는 장면이라면 전체를 지울 때 다른 물체의 그림도 사라지므로 필요한 장면을 다시 그려야 한다.
영어로 다시 설명하기
처음에는 removing and drawing for change position이라고 썼다. 캔버스를 지우는 동작은 clear, 다시 그리는 동작은 redraw로 구체화하고, 방법을 나타내는 by + -ing로 문장을 연결했다.
We make an object appear to move by repeatedly clearing the canvas and redrawing it at a new position.
참고 문장을 보고 완성 문장으로 다시 작성했다. 첫 시도와 교정 이유는 영어 메모에 남겼다. 예문을 보지 않는 독립 회상은 아직 확인하지 않았다.
이번에 완료한 것은 좌표·다시 그리기 원리 설명과 영어 재작성이다. 자동 애니메이션이나 프레임 시간에 맞춘 이동은 아직 구현하지 않았다. 다음에 확인할 질문은 “같은 동작을 연속된 화면으로 만들 때, 그림을 다시 그리는 시점은 어떻게 정할까?”다.
이후 프레임과 다음 실행 예약에서 연속된 그림과 requestAnimationFrame을 배웠다.