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

벡터 그래픽 사용하기

세부 목차

이전에 알아본 것처럼, 프로세싱에서 제공하는 함수를 이용해서 벡터 방식의 도형을 그릴 수 있습니다. 작업 과정에서 별도로 만들어진 벡터 파일을 사용해야한다면, 프로세싱의 PShape 오브젝트를 이용할 수 있습니다.

PShape

PShape의 예제를 살펴봅시다. PShape 오브젝트에 .svg (Scalable Vector Graphics) 파일을 불러올 수 있습니다. 일러스트레이터와 같은 벡터 기반 그래픽 소프트웨어에는 .svg 포맷으로 파일을 저장할 수 있는 기능이 있습니다.

아래 예제는, loadShape()을 이용해서 .svg 파일을 프로세싱으로 불러옵니다. 그리고 shape() 함수로 화면에 표시합니다. 마우스를 클릭하면, 스타일을 비활성화/활성화할 수 있습니다.

PShape hangul;
boolean hasStyle = true;

void setup() {
  size(600, 200);
  hangul = loadShape("hangul.svg");
}

void draw() {
  background(255);
  if (hasStyle) hangul.enableStyle();
  else hangul.disableStyle();
  shape(hangul, 0, 0);
}

void mousePressed() {
  hasStyle = !hasStyle;
}
Your browser does not support canvas.

SVG 파일 내부의 도형에 접근하기

PShape을 이용하면, .svg 파일 안에 있는 세부적인 도형에 대한 접근도 가능합니다. getChild() 함수를 이용해서 .svg 파일 안에 있는 O라는 이름을 가진 패스를 불러오고 있습니다.

PShape hangul;
PShape child;

float x;
float y;

void setup() {
  size(600, 200);
  hangul = loadShape("hangul.svg");
  child = hangul.getChild("O");
  x = 0;
  y = 0;
}

void draw() {
  background(255);

  child.setVisible(false);
  shape(hangul, 0, 0);

  child.setVisible(true);
  child.disableStyle();
  fill(255, 200, 250);
  noStroke();
  shape(child, x, y);
  
  x += random(-1,1);
  y += random(-1,1);
}
Your browser does not support canvas.

SVG 파일 내부의 버텍스에 접근하기

업데이트 예정

더 배우기