Processingで丸い画像を表示する

10953 ワード
processing PImage vertex processing テキストリンク

はじめに

こんにちは．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);

4つのvertexを使い，画像の上に描画する正方形を作ります．

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

beginContour()とendContour()で囲んだ部分で，vertexを使って切り抜く図形を作ります．

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

1度ごとにvertexを実行して，切り抜く円形を作ります．

endShape(CLOSE);

vertexの始点と終点を結びます．

他の方法（書き残し）

必要のないpixelを書き換えると，図形を被せなくてもよくなるかもしれない．
loadPixelとupdatePixelあたりが使えるかも．

参考ページ

Language Reference (API) \ Processing 3+
Processingのvertexについて解説！
Processingで描ける図形まとめ