[프로세싱(Processing) : 중급] 고급 그래픽 기법

2. 고급 그래픽 기법

고급 그래픽 기법을 사용하면 프로세싱을 통해 더 많은 시각적 표현을 구현할 수 있습니다. 이러한 기법들은 중급자 이상의 사용자에게 적합하며, 창의적인 그래픽 작업을 수행하는데 도움이 됩니다.

 

2.1. 픽셀 단위 그래픽 처리

프로세싱에서 픽셀 단위로 이미지를 조작하려면 loadPixels()를 호출한 후 pixels[] 배열에 접근하여 픽셀 값(색상)을 변경하고, 마지막으로 updatePixels()를 호출하여 변경사항을 적용합니다.

 

void setup() {
  size(200, 200);
  loadPixels();
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      color c = color(random(255), random(255), random(255));
      pixels[x + y * width] = c;
    }
  }
  updatePixels();
}

 

2.2. 트랜스폼(Transform)과 행렬(Matrix)

트랜스폼은 그래픽 요소를 이동, 회전, 크기 조절하는 기능입니다. 행렬은 이러한 변환을 수학적으로 표현하고 관리하는 방법입니다. 프로세싱에서는 translate(), rotate(), scale() 함수를 사용하여 그래픽 요소를 조작할 수 있습니다.

 

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  rotate(radians(frameCount));
  rect(-25, -25, 50, 50);
}

 

2.3. 이미지 필터 및 효과

프로세싱에서는 filter() 함수를 사용하여 이미지에 다양한 필터 효과를 적용할 수 있습니다. 예를 들어, 블러, 그레이스케일, 반전 등의 효과를 적용할 수 있습니다.

 

PImage img;

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

void draw() {
  image(img, 0, 0);
  filter(BLUR, 2);
}

 

2.4. 그래픽 최적화 기법

그래픽 최적화는 프로세싱에서 프레임 속도를 향상시키기 위한 기법입니다. 예를 들어, 불필요한 계산을 줄이고, beginShape()와 endShape() 함수를 사용하여 일괄적으로 도형을 그리는 방법이 있습니다.

 

void setup() {
  size(400, 400);
  noStroke();
}

void draw() {
  background(255);
  translate(width/2, height/2);
  
  int numShapes = 100;
  float angle = TWO_PI / numShapes;
  beginShape(TRIANGLE_FAN);
  vertex(0, 0);
  for (int i = 0; i <= numShapes; i++) {
    float x = cos(angle * i) * 100;
    float y = sin(angle * i) * 100;
    vertex(x, y);
  }
  endShape();
}

 

이 강의 자료에서는 픽셀 단위 그래픽 처리, 트랜스폼과 행렬, 이미지 필터 및 효과, 그래픽 최적화 기법 등의 고급 그래픽 기법을 소개하고 각 주제별로 예제 코드를 제공하였습니다. 이러한 기법들을 익혀 프로세싱을 이용한 다양한 그래픽 작업에 적용할 수 있습니다. 이제 프로세싱에서 다양한 그래픽 효과를 구현하는데 필요한 기초를 갖추게 되었습니다. 다음 단계에서는 애니메이션과 입체 공간에 대해 배워볼 것입니다.