【山崎研Tips】Processing チュートリアル② 画像読み込み
チュートリアル①はこちら→ 【山崎研Tips】Processing チュートリアル
1. 画像の読み込み
ここではpdeファイルと同じフォルダ内にある画像を読み込み描画するプログラムを作成します。
code:ImgDisplay.pde
/*
* 画像の読み込みサンプル
*
*/
PImage img; // imgをPImage型で宣言
void setup() {
size(640, 360); // 描画サイズ（640 x 360）
img = loadImage("01.png"); // ""で指定した画像ファイルを読み込む
}
void draw() {
// 画像を(0,0)に原寸サイズで表示
image(img, 0, 0);
// 画像を(0, height/2)に半分のサイズで表示
image(img, 0, height/2, img.width/2, img.height/2);
}
2. マウスクリックで画像を更新
次に、マウスをクリックすると表示される画像が更新されるプログラムを作成します。
code:ImgDisplayMouse.pde
PImage image1, image2;
boolean showImage1 = true;
void setup() {
size(640, 360); // 描画サイズ（640 x 360）
// 画像を読み込む
image1 = loadImage("01.png");
image2 = loadImage("02.png");
}
void draw() {
background(255);
// 表示する画像を切り替える
if (showImage1) {
image(image1, 0, 0);
} else {
image(image2, 0, 0);
}
}
void mousePressed() {
// マウスクリックで画像の切り替え
showImage1 = !showImage1;
}