6. 사각형 그리기
붓을 들고 캔버스에 사각형을 코딩한다.
복습
지난 글에서는 setup 함수에 대해 설명했다. 그림 그리기에서 캔버스를 처음 펼쳐 셋업 하는 것처럼 프로그램 실행 시 제일 처음 한번 실행되는 함수이다. 캔버스 사이즈 혹은 배경칠 등과 같이 셋업에 필요한 함수들이 setup 함수 안에 놓이게 된다. 이번 글에서는 중요한 두개의 함수중 나머지 하나인 draw 함수를 설명한다.
draw
프로그램 실행 시 한 번만 호출되는 setup 함수와는 다르게 draw함수는 프로그램이 실행되는 동안 지속적으로 반복 호출된다. 이런 이유로 화면을 매번 다시 그리는 인터랙티브 작품의 경우 draw 함수 안에 그림을 그리는 코드를 작성한다. 또한 매번 반복 실행되어야 하는 코드는 모두 draw 함수에 포함되어야 한다. 사운드 프로젝트인 경우 사운드가 바뀌어 실행되어야 할 경우 사운드 생성 함수가 여기에 놓이게 된다.
자 그럼 draw 함수에 사각형을 그려보자. 사각형을 그리는 함수는 rect라고 한다. 프로세싱 웹사이트에 있는 참조(reference) 페이지에서 rect를 찾아본다 [아래 링크와 그림 참조]. 함수 안에는 총 4개의 파라미터가 필요하다. 먼저 사각형을 그리기 위해서 필요한 4가지 정보를 상상해본다.
https://www.processing.org/reference/rect_.html
위 그림에서 보이듯이 가로 위치, 세로 위치, 가로 크기, 세로 크기에 해당되는 4개 값이 rect 안에 순서대로 기입된다. 추가로 들어가는 파라미터는 모서리 둥글기를 표현하는 부분이다. 우선 기본 사각형에 대한 내용만 이해하면 된다. 이전 내용 setup에 이어 다음 코드를 코딩 창에 작성하고 재생 버튼을 눌러본다. 그럼 아래 그림 이미지가 확인되어야 한다.
void setup()
{
background(100);
size(500, 500);
}
void draw()
{
rect(300, 300, 100, 100);
}
가로 세로 500 픽셀 사이즈의 윈도우 (캔버스)에 가로 위치 세로 위치가 각각 300이고 가로 크기가 100 세로 크기가 100인 흰색 사각형이 만들어졌다. 사각형의 왼쪽 상단 모서리가 기준점이 되어 가로 세로 위치가 정해진걸 확인한다.
그럼 다음과 같은 작품을 프로세싱으로 코딩해보자.
http://pin.it/gj-_gr5캔버스 크기를 설정하고, 배경색, 그리고 가운데 검은 사각형을 코딩하면 된다. 가운데 분절되는 부분은 일단 다음 시간으로 넘기기로 한다. 그리고 정확한 스케일로 할 필요는 없고 일단 눈짐작으로 코딩을 해본다.
배경색: 255 (흰색)
캔버스 가로: 300
캔버스 세로: 500
사각형 가로 위치: 200
사각형 세로 위치: 165
사각형 가로 크기: 100
사각형 세로 크기: 70
void setup()
{
background(255);
size(300, 400);
}
void draw()
{
rect(200, 165, 100, 70);
}
코드 실행시 다음과 같은 윈도우가 만들어 진다.
tips
컴퓨터 성능과 draw함수와의 연관성
반복 실행되기 때문에 draw함수 안에 내용이 너무 많으면 다시 말해 (한 번에 그려지는 내용이 너무 많으면) 프로그램 실행에 그만큼 컴퓨팅 리소스가 많이 소요된다. 컴퓨터 성능이 좋지 않은 경우 그림 그려지는 것이 부자연스럽게 뚝 뚝 끊어지는 것처럼 보일 수 있다. 성능이 아무리 좋다고 해도 draw 함수는 주의를 기울여 코딩해야 한다. 자칫하면 컴퓨터 리소스를 모두 차지하기가 쉽다. 필요 없는 연산을 없애고 같은 결과를 위해 최적의 코딩을 해야 한다.
draw함수는 과연 1초에 몇 번 실행될까?
draw함수가 실행 횟수는 영상 플레이 속도와 같이 얘기되어진다. 초당 몇 프레임이냐는 식으로 말이다. 기본적으로 초당 30 프레임 즉 30회 실행이 된다. setup함수 안에 frameRate이라는 함수를 이용하여 초당 몇 번 실행한다 하고 컴퓨터에 얘기를 하면 된다. 그럼 무조건 많이 실행하면 되지 않을까 하지만 초당 몇 번 실행하느냐는 작품의 예술적 특성과 기술적 특성에 따라 결정된다.
