初心者だけど、一歩ずつ IOT 電子工作: Processing 画像を表示

2012年11月2日金曜日

Processing 画像を表示

今回は、Processingを使って画像を表示する方法をマスターします。

今回表示する画像ファイルは、こちらです。

ファイル名は、image.png
画像のサイズは、132×49

Processingで扱える画像ファイル形式は、Jepg形式、GIF形式、PNG形式です。

まずは、画像ファイルをスケッチから呼び出せる場所へ配置する必要があります。
これは、決まっています。スケッチと同じフォルダのdataフォルダです。

例えば、スケッチの保存場所が、C:\processing\ImageSample\ImageSample.pde　の場合、画像ファイルを配置するdataフォルダは、C:\processing\ImageSample\data　です。

このdataフォルダ内に画像ファイルを配置します。
C:\processing\ImageSample\data\image.png

画像ファイルを配置したら、次にスケッチです。

PImage img;

void setup() {
size(200, 100);
}

void draw() {
img = loadImage("image.png");
image(img, 0, 0);
}

一行目から順に見ていきます。
PImage img;　…イメージを保存するためのimg変数を宣言します。

size　… 画面表示領域の指定でしたね。

img = loadImage("image.png");　…　loadImage命令により、img変数へ画像ファイルの内容を読み込んでいます。

image(img, 0, 0);　…　image命令によって、画像を表示しています。引数には、画像を読み込んだ変数、画像の表示位置を指定します。

実行例