프로세싱 기본

전 Hello, world 수업에서 여러분은 여러분이 짠 코드가 화면에 그림을 그리는 것을 보셨을 겁니다. 이번 강좌에서는 코드가 어떤 식으로 컴퓨서에서 작동하는지를 알아보겠습니다.

void setup() {
    size(400, 400);
    background(0);
    fill(255);
}

void draw() {
    rect(160, 160, 80, 80);
}

여러분이 저번 강좌에서 짠 코드는 이랬습니다.

프로세싱 프로그램은 기본적인 구조가 이렇습니다.

void setup() {
    //한번 실행되는 코드
}

void draw() {
    //여러 번 실행되는 코드
}

void setup() 이라고 하고 중괄호({}) 안에 들어가는 코드는 시작될 때 딱 한번만 실행됩니다. 반면 void draw() 이라고 하고 중괄호 안에 있는 코드는 setup이 실행되고 나서는 프로그램이 끝날 때까지 계속 반복되서 실행됩니다. 이때 이 반복 속도는 여러분 컴퓨터의 사양에 따라 달라집니다.

그럼 이제 세부적인 것을 보죠. void setup()이라고 하고 중괄호 안에는 size, background, fill 이런 게 있습니다. 그럼 하나하나 무엇인지 살펴보겠습니다.

size()

size는 영어로 크기라는 뜻입니다. 여러분은 예제는 실행시켰을 때 창이 하나 더 뜨는 것을 보셨을 겁니다. 여기서 size는 말 그대로 실행시켰을 때 나오는 창의 크기를 정한다는 뜻입니다. 그리고 괄호 안에는 숫자가 2개 들어가야 하는데요, 사용법은 다음과 같습니다.

size(가로 크기, 세로 크기);

괄호 안에 가로 크기와 세로 크기를 픽셀로 입력하는데요, 두 숫자는 쉼표로 구분해야 합니다.

background()

background는 배경이라는 뜻입니다. 여러분이 실행시켰을 때 나오는 창의 배경색입니다. 이 background는 두 가지 방법으로 사용할 수 있습니다.

//흑백일 때
background(밝기);
//RGB컬러일 때
background(r, g, b);

여기서 흑백일 때의 밝기는 0에 가까울수록 어두워지고 255에 가까워질수록 밝아집니다. 한번 원하는 색으로 바꾸어 보세요

참고: 원하는 색의 RGB값을 찾으려면 프로세싱의 Color Selector를 사용할 수 있습니다. 메뉴에서 Tools > Color Selector를 찾아서 실행하면 됩니다.

fill()

fill은 도형을 그렸을 때 도형을 채우는 색을 설정하는 겁니다. background와 하는 일은 다르지만 사용방법은 비슷합니다.

//흑백일 때
fill(밝기);
//RGB컬러일 때
fill(r, g, b);

void draw() 안에 있는 코드는 다음 강좌에서 한번 배워보겠습니다. 이제까지 여러분은 상당히 많은 것을 배우셨는데요, 한번 코드의 숫자를 이리저리 바꿔보면서 어떻게 결과물이 바뀌는지를 한번 보는 것도 좋습니다.

다음 강좌에서는 void draw() 안에 있는 코드를 비롯해 어떤 식으로 화면에 도형을 그리는지를 배워보겠습니다.

size()

background()

fill()

댓글