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

기본 도형 그리기

세부 목차

프로세싱이 제공하는 기초적인 도형그리기 함수를 알아봅시다.

프로세싱의 좌표계

프로세싱 실행 창에 그림을 그릴 때에는 픽셀의 좌표값으로 표현해줍니다. 2차원의 (x, y) 축을 가진 화면 위에서 윈쪽 위 모서리는 (0, 0)의 값을 가집니다. 가로(x) 축은 오른쪽으로 갈수록 그 값이 커지고, 세로(y) 축의 경우에는 아래로 내려갈수록 그 값이 커집니다. 포토샵이나 일러스트레이터처럼 직관적으로 도형을 그리는데 익숙한 분들은 이렇게 숫자로 그림을 표현하는 것이 조금 어색하게 느껴질 수 있습니다. 모눈종이에 직접 좌표를 손으로 그려나가며 연습하면 큰 도움이 됩니다.

점으로 그리기

프로세싱의 point()함수를 이용하여 글자를 그려봅시다.

point(x, y);

point()는 두개의 인수(arguments)를 요구합니다. 각각은 x축(가로)과 y축(세로)의 좌표값입니다. 예를 들어 size(100, 100)의 프로세싱 창의 정중앙에 점을 그리고 싶으면 point(50, 50)라고 표현할 수 있습니다. strokeWeight()함수는 점과 선의 굵기를 결정합니다. 단위는 픽셀이며, 기본값은 1픽셀입니다.

// draw 가 with points

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

void draw() {
  background(255);
  // ㄱ
  point(10, 20);
  point(20, 20);
  point(30, 20);
  point(40, 20);
  point(50, 20);

  point(50, 30);
  point(50, 40);
  point(50, 50);
  point(50, 60);
  point(50, 70);

  // ㅏ
  point(70, 10);
  point(70, 20);
  point(70, 30);
  point(70, 40);
  point(70, 50);
  point(70, 60);
  point(70, 70);
  point(70, 80);

  point(80, 40);
}
Your browser does not support canvas.

선으로 그리기

수많은 점들이 모인 것을 선이라고 할 수 있습니다. 우리가 일일히 점을 그려서 이어줄 필요는 없습니다. 프로세싱은 line()함수를 제공합니다.

line(x1, y1, x2, y2);

line()함수는 4개의 인수(arguments)를 요구합니다. 4개의 인수는 두 쌍(시작점과 끝점)의 좌표값을 의미합니다. 위에서 점으로 그린 글자 프로그램을 참고해서 이번에는 선으로 글자를 그려봅시다. 더 복잡한 글자를 그리는데 코드는 더 짧아졌지요?

// draw 각 with lines

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);
}
Your browser does not support canvas.

위의 글자를 살펴보면 획이 이어지는 부분에 선이 조금 삐져나온 것을 볼 수 있습니다. 이는 프로세싱의 strokeCap()스타일 때문입니다. 따로 설정해주지 않았을 때, 기본은 ROUND입니다. 이외에 SQUARE, PROJECT로 설정해줄 수 있습니다. 위의 예시에서 setup()함수 내의 strokeWeight(2)라인 바로 다음줄에 strokeCap(SQUARE)를 추가하고 프로그램을 실행해봅시다. 함수와 인수는 대소문자를 정확히 구분해서 작성해야합니다.

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

// draw() 생략
Your browser does not support canvas.

위의 예시도 strokeWeight()의 값에 따라서 글자의 획이 정확하게 이어지지 않을 수 있습니다. 이는 line()함수가 독립적으로 작용하기 때문입니다. 일러스트레이터에서 펜 툴을 다루듯이 선을 그리려면 이후에 다룰 vertex()함수를 이용할 수 있습니다.

사각형으로 그리기

프로세싱의 rect()함수를 이용해서 정사각형과 직사각형을 그릴 수 있습니다.

rect(x, y, w, h);

rect()는 기본적으로 4개의 인수를 요구합니다. 순서대로 시작점(왼쪽 위 모서리)의 x좌표, y좌표, 사각형의 너비, 사각형의 높이입니다. 일러스트레이터에서 사각형을 그릴 때에도 마찬가지로 왼쪽 위에서 시작해서 드래그하지요? 프로세싱의 기본값도 왼쪽 위 모서리에서 시작합니다. 이는 rectMode()를 사용해서 설정해줄 수 있습니다. CORNER, CORNERS, CENTER, RADIUS등 네가지 모드가 존재합니다. 예를 들어, 사각형을 그리기 전에 먼저 rectMode(CENTER)라고 설정해주면 이후에 그려지는 사각형들은 중심점에서부터 그려집니다. 따로 설정하지 않았을 때, 기본값은 rectMode(CORNER)입니다.

// draw 맘 with lines
void setup() {
  size(600, 200);
  strokeWeight(2);
}

void draw() {
  background(255);
  // ㅁ
  rect(10, 20, 40, 30);
  // ㅏ
  line(70, 10, 70, 70);
  line(70, 40, 80, 40);
  // ㅁ
  rect(30, 70, 40, 30);
}
Your browser does not support canvas.

원으로 그리기

프로세싱의 ellipse()함수를 이용해서 정원과 타원을 그릴 수 있습니다. 정원과 타원을 그리는 방법은 따로 나누어져있지 않습니다. 좌우 너비와 상하 높이를 같게 설정하면 정원이 그려지고, 그렇지 않은 경우에는 타원이 그려집니다.

ellipse(x, y, w, h);

rect()와 마찬가지로 기본적으로 4개의 인수를 요구합니다. 그러나 차이점은 x, y 좌표가 왼쪽 위 모서리가 아니라 원의 중앙점의 좌표라는 것입니다. 즉, ellipseMode()의 기본값은 CENTER입니다. rect()와 마찬가지로 필요에 따라 다른 모드로 변경해줄 수 있습니다.

// draw 앙 with ellipses
void setup() {
  size(600, 200);
  strokeWeight(2);
}

void draw() {
  background(255);
  // ㅇ
  ellipse(30, 40, 40, 40);
  // ㅏ
  line(70, 10, 70, 70);
  line(70, 40, 80, 40);
  // ㅇ
  ellipse(50, 85, 40, 30);
}
Your browser does not support canvas.