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

이미지 사용하기

세부 목차

사용할 이미지 준비

프로세싱에서 이미지를 사용하기 위해서는 먼저 이미지 파일을 준비해야 합니다. 아래 방법 중 한가지를 이용해서 이미지를 준비합시다.

이미지 표시

이미지 파일은 곧바로 사용할 수는 없고, 먼저 PImage 오브젝트에 불러들여서 사용해아 합니다. PImage 오브젝트에 loadImage() 함수를 사용해서 이미지를 불러들인 후, image() 함수로 화면에 표시합니다.

주의할 점은, CMYK 색공간을 이용하는 이미지는 사용할 수 없으므로, 일러스트레이터나 인디자인 등의 소프트웨어에서 이미지를 준비할 때에는 RGB 색공간으로 변환해서 저장한 후에 사용해야 합니다.

PImage img;

void setup() {
  size(600, 200);
  img = loadImage("santafe.jpg");
}

void draw() {
  background(255);
  
  image(img, 0, 0);
}

Your browser does not support canvas.

이미지 리사이즈

2개의 인수를 추가하면, 너비와 높이를 설정할 수 있습니다.

PImage img;

void setup() {
  size(600, 200);
  img = loadImage("santafe.jpg");
}

void draw() {
  background(255);
  
  image(img, 0, 0);  
  image(img, 420, 0, 100, 200); // resized
}
Your browser does not support canvas.

투명도 조절

이미지의 투명도를 조절하는 함수는 따로 없지만, 색조를 더해주는 함수 tint()를 사용할 수 있습니다. tint()의 값으로 255, 즉 흰색을 사용하면, 이미지의 색에 영향을 미치지 않으면서 두번째 인수로 투명도를 조절할 수 있습니다.

PImage img;

void setup() {
  size(600, 200);
  img = loadImage("santafe.jpg");
}

void draw() {
  background(255);
  
  tint(255);
  image(img, 0, 0);  
  tint(255, 128);
  image(img, 50, 50);
}
Your browser does not support canvas.

이미지 마스크

업데이트 예정

PGraphics 오브젝트

프로세싱을 처음 배우는 디자이너들이 많이 물어보는 질문 중 하나는, 포토샵이나 일러스트레이터처럼 레이어 기능을 쓸 수 있는가하는 것입니다. 프로세싱에는 딱히 레이어라는 개념은 없습니다. 하지만, 분명 그림이 그려지는 순서는 존재합니다. 예를 들어,

fill(255, 0, 0);
rect(10, 10, 50, 50);
fill(0, 255, 0);
rect(30, 30, 50, 50);

위와 같은 코드를 실행하면, 녹색의 원이 나중에 그려졌기 때문에 빨간 원의 위에 그려집니다. 또, 변화를 주고 싶은 부분(색, 위치, 크기 등)은 변수로 변환하면 제어가 가능하기 때문에 레이어와 비슷한 느낌으로 사용할 수 있습니다. 하지만, background() 함수를 사용하지 않고, 결과물을 계속해서 누적하는 스케치에서는 이렇게 그려진 이후에 배경색을 변경한다던지 하는 것이 어렵습니다.

프로세싱은 PGraphics라는 오브젝트를 제공하는데, 이는 오프스크린 버퍼(offscreen buffer)라고 해서 레이어의 역할을 해줄 수 있습니다. 간단하게 설명하면, 우리가 프로세싱 코드를 작성하고 스케치를 실행하면, 도형들이 곧장 캔버스 위에 그려집니다. 하지만 때로는 결과물을 곧장 화면에 표시하는 대신에, 일단 한데 모아두었다가 준비가 되었을 때 표시하고 싶을 경우도 있습니다. 이렇게 우리에게 보이지 않는 화면 바깥에 임시로 이미지를 생성하고 싶을 때 PGraphics를 사용할 수 있습니다. 간단한 예제를 살펴봅시다.

PGraphics pg;
color bgColor;

void setup() {
  size(600, 200);
  pg = createGraphics(width, height);
  bgColor = color(0);
}

void draw() {
  pg.beginDraw();
  pg.fill(255, 255, 0);
  pg.ellipse(mouseX, mouseY, 30, 30);
  pg.endDraw();
  
  background(bgColor);
  image(pg, 0, 0);
}

void keyPressed() {
  bgColor = color( random(255) );
}
Your browser does not support canvas.

위의 예제는 원의 흔적이 누적되는 것과는 별개로, 키보드를 눌렀을 때 배경색이 변화합니다. 이것이 가능한 이유는 원의 흔적들이 먼저 pg 오브젝트에 그려진 이후 누적된 결과물이 매 프레임 메인 캔버스에 그려지기 때문입니다. PGraphics 오브젝트의 생성은 PImage와 유사합니다. PImage의 경우 loadImage() 함수를 이용해서 외부의 파일을 로드해주지만, PGraphics의 경우는 createGraphics(w, h) 함수를 이용해서 우리가 만들고 싶은 화면 바깥 캔버스의 크기를 지정해줍니다. 위의 예제의 경우에는 메인 캔버스와 똑같은 크기로 만들어줬지만, 꼭 크기가 같을 필요는 없습니다.

이렇게 생성된 PGraphics 오브젝트는 텅 비어있는 상태입니다. 메인 캔버스가 아니라 PGraphics 위에 무언가를 그리고 싶다면 먼저 beginDraw()endDraw()를 만들어준 후, 그 사이에 그리기 함수들을 사용해줍니다. 함수 이름 앞에 PGraphics 오브젝트의 이름 - 위의 경우 pg - 을 붙여줌으로써 메인 캔버스가 아니라 PGrahpics에 그린다는 것을 나타냅니다. 이렇게 생성된 오브젝트는 PImage와 똑같이 사용해줄 수 있습니다.

복수의 PGraphics 오브젝트 사용하기

하나의 PGraphics를 사용했을 때에는 그 효용성이 크게 와닿지 않습니다. 아래의 예제는 두 개의 오브젝트를 생성해서 원하는 레이어에 그림을 그리고 있습니다. 필요에 따라서 더 많은 오브젝트들을 생성해서 사용할 수도 있습니다.

PGraphics pg1;
PGraphics pg2;
int currentLayer = 1;

void setup() {
  size(600, 200, P2D);

  pg1 = createGraphics(width, height, P2D);
  pg2 = createGraphics(width, height, P2D);
}

void draw() {
  background(0);

  if (currentLayer == 1) drawOnLayer(pg1, color(255, 255, 0));
  else if (currentLayer == 2) drawOnLayer(pg2, color(0, 255, 255));

  if (currentLayer == 1) image(pg1, 0, 0);
  else if (currentLayer == 2) image(pg2, 0, 0);
  else {
    image(pg1, 0, 0);
    image(pg2, 0, 0);
  }

  fill(255, 0, 0, 120);
  ellipse(mouseX, mouseY, 50, 50);

  fill(255);
  textSize(12);
  text("Layer: " + currentLayer, 30, 30);
}

void keyPressed() {
  if (key == '1') currentLayer = 1;
  if (key == '2') currentLayer = 2;
  if (key == '0') currentLayer = 0;
}

void drawOnLayer(PGraphics pg, color c) {
  pg.beginDraw();
  pg.stroke(c);
  pg.line(pmouseX, pmouseY, mouseX, mouseY);
  pg.endDraw();
}
Your browser does not support canvas.

위의 예제는 숫자 키를 이용해서 현재 페인팅을 하고 있는 레이어. 또는 PGraphics 오브젝트를 선택할 수 있습니다. 또한, 어떤 레이어를 화면에 표시할지도 선택할 수 있습니다. 이를 위해서, drawOnLayer()라는 함수를 이용하고 있으며, 이 함수는 그림을 그리고 싶은 PGraphics 오브젝트를 매개변수로 받고 있습니다.