소개

안녕하세요. ohayota입니다.
이 기사에서는 Processing에서 둥근 이미지를 표시하는 방법을 소개합니다.
(화상 자체를 둥글게 가공하는 방법이 아니라, 화상을 둥글게 보이는 방법을 취급합니다.)
내부를 원형으로 잘라낸 정사각형을 이미지 위에 그려서 실현하려고 합니다.

준비

아래에서 다루는 프로그램을 위해 600px * 600px 더미 이미지를 준비합니다.
같은 디렉토리에 "data"라는 디렉토리를 만들고 그 안에 dummy600.png라는 이름으로 저장합니다.

프로그램

다음은 정사각형 이미지를 둥글게 표시하는 프로그램입니다.setup() 내부 등에 기술 해 실행합니다.

CroppedImage.pde

PImage img = loadImage("dummy600.png");
color backColor = color(240);

size(600, 600);
image(img, 0, 0, width, height);

pushMatrix();
translate(width/2, height/2);
fill(backColor);
noStroke();
beginShape();
// 図形の外枠
vertex(-width/2, -height/2);
vertex(width/2, -height/2);
vertex(width/2, height/2);
vertex(-width/2, height/2);
// 切り抜く図形の描画
beginContour();
for (int i = 360; 0 < i; i--) {
  vertex(width/2 * cos(radians(i)), height/2 * sin(radians(i)));
}
endContour();
endShape(CLOSE);
popMatrix();

실행 후

이미지가 단단히 둥글게 표시되었습니다.

해설

PImage img = loadImage("dummy600.png");
color backColor = color(240);

loadImage를 사용하여 지정된 이미지 이름을 data 디렉토리에서 읽습니다.backColor는 배경색과 일치합니다.

size(600, 600);
image(img, 0, 0, width, height);

이번에 취급하는 이미지가 600px * 600px이므로 size(600, 600)에서 윈도우 크기도 동일하게 합니다.image(img, 0, 0, width, height)는 왼쪽 상단 (0, 0)과 세로 및 가로 모두 600px 이미지를 표시합니다.

pushMatrix();
...
popMatrix();

pushMatrix()는이 문 앞의 좌표계를 일시적으로 저장합니다.
그리기를 마치면 popMatrix()로 좌표계를 pushMatrix() 이전의 값으로 되돌립니다.

translate(width/2, height/2);
fill(backColor);
noStroke();

도형의 내부를 원형으로 잘라낼 준비로서, translate(width/2, height/2) 로 기준점을 윈도우의 중심으로 합니다.

// 図形の外枠
vertex(-width/2, -height/2);
vertex(width/2, -height/2);
vertex(width/2, height/2);
vertex(-width/2, height/2);

네 개의 vertex를 사용하여 이미지 위에 그리는 사각형을 만듭니다.

// 切り抜く図形の描画
beginContour();
...
endContour();

beginContour()와 endContour()로 둘러싸인 부분에서 vertex를 사용하여 자르는 도형을 만듭니다.

for (int i = 360; 0 < i; i--) {
  vertex(width/2 * cos(radians(i)), height/2 * sin(radians(i)));
}

매번 vertex를 실행하여 자르는 원형을 만듭니다.

endShape(CLOSE);

vertex의 시작점과 끝점을 연결합니다.

기타 방법(쓰기 남기기)

불필요한 픽셀을 다시 쓰면 도형을 덮지 않아도 좋을 수 있습니다.loadPixel와 updatePixel 근처를 사용할 수 있을지도.

참고 페이지

Language Reference (API) \ Processing 3+
Processing의 vertex에 대해 해설!
Processing으로 그릴 수 있는 도형 정리