2018년 9월 디자인과 코딩을 함께 다루는 유튜브 채널을 열었습니다. "타입과 미디어" 사이트는 당분간 유지할 계획이지만, 새로운 정보는 유튜브 비디오를 통해서 소개하겠습니다. 많은 관심 부탁드립니다! — 정대인

함수 만들기

세부 목차

line(), stroke(), translate() 등, 지금까지 프로세싱이 제공하는 많은 함수들을 사용했습니다. line() 함수는 시작점과 끝점의 좌표를 입력하면 두 점을 잇는 선을 그려줍니다. 프로세싱 내부에서는 각 픽셀에 접근해서 색을 바꿔주는 더 복잡한 코드가 들어있을 테지만, 코딩을 하는 우리는 그렇게 깊은 부분까지는 모르더라도 line() 함수를 사용해서 원하는 선을 그릴 수 있습니다. 이렇게 함수를 사용하면, 반복되는 세부사항에 일일히 신경쓰지 않고, 더 높은 목표에 집중할 수 있습니다.

글자 그리기 함수

예전에 살펴보았던 선으로 글자 그리기 스케치를 아래에서 다시 살펴보겠습니다.

void setup() {
  size(600, 200);
  // the default weight is 1
  strokeWeight(2);
}

void draw() {
  background(255);
  // ㄱ
  line(10, 20, 50, 20);
  line(50, 20, 50, 60);
  // ㅏ
  line(70, 10, 70, 70);
  line(70, 40, 80, 40);
  // ㄱ
  line(30, 70, 70, 70);
  line(70, 70, 70, 100);
}

위의 예제는 실행에 문제는 없지만, 매번 같은 글자를 그릴 때마다 약 10줄의 코드를 계속해서 입력해줘야 합니다. 같은 스케치를 함수를 이용해서 다시 작성해보겠습니다.

void setup() {
  size(600, 200);
  strokeWeight(2);
}

void draw() {
  background(255);
  drawCharacter();
}

void drawCharacter() {
  // ㄱ
  line(10, 20, 50, 20);
  line(50, 20, 50, 60);
  // ㅏ
  line(70, 10, 70, 70);
  line(70, 40, 80, 40);
  // ㄱ
  line(30, 70, 70, 70);
  line(70, 70, 70, 100);
}
Your browser does not support canvas.

위의 코드를 살펴보면 사실 코드의 양은 더 늘었습니다. 하지만 앞으로 같은 글자를 그려야할 일이 생기면 line() 함수를 여러 번 호출할 필요가 없이 drawCharacter() 함수를 한 번 호출해주면 함수 안의 내용이 모두 실행될 것입니다. 그러나, 지금은 함수를 여러 번 호출한다고 해도 계속해서 같은 위치에 글자를 그리기 때문에 큰 쓸모는 없습니다. 매개변수(parameter)를 사용해서 글자가 그려지는 위치를 결정하는 인풋을 설정할 수 있습니다.

매개변수 (parameter)

void setup() {
  size(600, 200);
  strokeWeight(2);
}

void draw() {
  background(255);
  drawCharacter(0, 0);
  drawCharacter(100, 0);
  drawCharacter(200, 0);
  drawCharacter(300, 0);
}

void drawCharacter(int x, int y) {
  pushMatrix();
  translate(x, y);
  
  // ㄱ
  line(10, 20, 50, 20);
  line(50, 20, 50, 60);
  // ㅏ
  line(70, 10, 70, 70);
  line(70, 40, 80, 40);
  // ㄱ
  line(30, 70, 70, 70);
  line(70, 70, 70, 100);
  popMatrix();
}
Your browser does not support canvas.

위의 예제는 두 개의 매개변수 xy를 사용해서 매트릭스의 좌표를 이동하고 있습니다. pushMatrix()popMatrix()가 코드 블럭을 감싸고 있기 때문에 다른 함수에는 영향을 미치지 않습니다. 이를 통해서, 우리가 원하는 곳 어디든 글자를 표시할 수 있습니다.

void의 의미

앞에서 살펴본 함수의 정의에는 void가 붙는 것을 볼 수 있습니다. void의 의미는 반환하는 값이 없다는 것을 말합니다. drawCharacter() 함수를 호출하며 화면에 표시되는 그래픽이라는 부산물은 존재하지만, 따로 반환하는 데이터는 없습니다. 우리가 사용하는 background(), line(), rect() 등이 이에 해당합니다.

return type

반환값이 필요한 경우, void 대신에 반환값의 종류를 지정할 수 있습니다. 아래의 add() 함수는 2개의 매개변수의 합을 돌려줍니다.

int add(int a, int b) {
	return a + b;
}

int num = add(1, 2);
println(num);

위의 함수에 정수 2개를 제공하면, 그에 대한 결과로 둘의 합이 반환됩니다. 리턴 타입을 명시했으면 반드시 return 구문을 넣어서 어떤 값을 돌려줘야 합니다. 그렇지 않으면, 프로세싱은 에러를 표시할 것입니다.