5. 캔버스 셋업하기

코딩을 할 수 있는 캔버스를 셋업한다.

복습하기

이전 글에서는 프로세싱을 다운로드하고 재생하는걸 설명하였다. 재생 play 한다는 것은 코딩한 내용을 실행 execution 하는 것이다. 컴퓨터를 전문으로 하는 사람들은 프로그램을 실행한다라고 하지 재생한다라고 하면 좀 어색하다고 생각한다. 하지만 프로세싱에서는 재생이라고 하는 게 맞다. 그만큼 손쉽게 코딩하기 때문이다. 아무 코딩 없이 바로 재생했을 때 윈도우가 나타나고 회색 사각형이 그려진걸 확인하였다. 이전 글에서 설명했듯이 코드가 없는 게 아니고 숨겨져 있기 때문이다. 숨겨진 코드 중에 프로세싱에서 제일 중요한 두개의 단어가 있다. 이번 글에서는 그중 하나 setup이라는 단어에 대해 설명한다.

setup

말 그대로 무엇인가를 "준비하다" "설치하다"라는 뜻이다. 프로그램이 재생될 때 맨 처음 한 번만 호출된다. 그림 그릴 때 이젤을 설치하고 그 위에 캔버스를 올려놓는 행위와 같다고 보면 된다. 그림 그리기 하면서 1분에 한 번씩 캔버스를 내려놨다 올려놨다 하는 화가가 없듯이 setup은 한 번만 실행된다. 그림 그릴 때 캔버스 크기와 색상을 결정하듯이 setup이 실행될 때도 마찬가지로 크기와 색상을 정해줘야 한다. 아무런 코딩 없이 재생했을 때 나타나는 결과물에도 가로 세로 300 크기와 배경 색깔 회색이라고 이미 정해져 있는 것이다. 디폴트(기본 설정)로 width=300, height=300, background color = gray라고 미리 코딩된 것이다.

이제 원하는 캔버스 사이즈와 배경 색상으로 바꿔 보려고 한다. 처음으로 코딩을 하려고 하는 것이다. 인류가 달에 첫발을 내딛는 것과 비슷하게 어려울 거고 하지만 새로운 역사를 쓰고 인생에 길이길이 남는 순간이 지금 눈앞에 있다. 심호흡을 몇 번 하고 아래 네모창에 있는 텍스트대로 "코딩"을 해보려고 한다. 코딩 창에 똑같이 기입해야 한다. 특히 띄어쓰기와 소문자를 반드시 지켜야 한다. 그리고 ; 과 : 을 혼동하지 않는다. 모든 글자가 타이핑이 됐다면 재생 버튼을 누르고 결과를 살펴본다. 혹시 재생이 안되고 검은색 영역, 콘솔창에 빨간 글씨가 나타난다면 코드에 문제가 있고 "에러"가 생긴 것이다. 당황해하지 말고 스펠이랑 띄어쓰기, 부호 등등 살펴본다.

void setup()
{
    size(500, 500);
    background(0);
}

성공하였다면 아래 그림처럼 검은색 배경을 가진 가로 세로 500 크기의 윈도우가 만들어진다.

 

입코! 축하한다!

이제는 작성한 코드에 대해 설명하겠다. 여러 번 차근차근 읽어보길 바란다. 처음에는 이해가 되지 않는 게 정상이다. 만약 바로 이해가 된다면 천재이거나 이미 알고 있는 사람일 거다. 이해가 안 되다가 이해가 된다면 본인을 무척 자랑스러워해도 된다. 코딩 훈련의 가장 큰 고비를 넘긴 것이다. 많은 사람들이 헬스를 시작한 지 3 일 정도 지나면 그만둔다. 3일을 버틴 사람은 오래 다닌다. 코딩도 지금 이 순간이 헬스 3일의 고비와 비슷하다. 몸에 알이 배고 갈길이 멀어 보이고, 주위에 몸 좋은 사람과 비교되도 두 눈 감고 열심히 운동하기 바란다. 그럼 작성한 코드에 대한 설명을 해보겠다.

우선 setup단어 뒤에 괄호 ()를 눈여겨본다. 이게 바로 setup이 "함수"라는 것을 의미한다. 그리고 줄이 바뀌면서 또 다른 모양의 괄호 { 가 시작되고 두개의 함수 size와 background를 확인한다. 그리고 괄호 } 으로 마무리되는 구조이다.  setup이라는 함수 "안"에 두개의 함수 size와 background 가 실행된다는 것을 의미한다. 다시 말하면 setup을 실행하면 { 와 } 사이에 있는 코드가 실행되는데 예제에서는 두개의 함수 size와 background가 실행된다는 뜻이다. size 단어 뒤에 괄호 () 안에 두개의 숫자가 있다. 첫 번째 숫자 500은 가로 크기 값이고, 두 번째 숫자 500 은 세로 값이다. 함수의 괄호 () 안에 들어가는 숫자를 함수 파라미터 (parameter)라고 한다. setup의 괄호 () 안에는 아무것도 없다. 즉 이 함수는 파라미터를 필요로 하지 않는다. 하지만 캔버스의 크기를 정하는 size 함수는 두개의 파라미터 가로 값과 세로 값을 요구한다. 비슷한 논리로 background 함수는 색상값을 요구하는데 0은 검은색이고 255는 흰색이다. 100은 그 사이 회색 정도 되는 값이다.  색상값에 대해서는 다음에 자세하게 얘기가 된다.

다음 글에서는 두 번째 이자 마지막으로 중요한 단어 draw에 대해 설명할 예정이다.