2018プログラミング講座９：画像

Processingでは他のソフトウェアなどで作成した画像を扱うことができます。

画像ファイルの読み込み
まず始めにProcessingで使用したい画像ファイルを用意します。次にProcessingを開き、新しいスケッチ（sketch_）を表示します。Processingの「スケッチ（Sketch）」メニューから「ファイルを追加…（Add File…）」を選び実行します。使用したい画像ファイルを選択し「開く（Open）」ボタンを押して読み込みます。
追加した画像ファイルは「スケッチ（Sketch）」メニューの「スケッチフォルダーを開く（Show Sketch Folder）」を実行し、dataフォルダの内容を確認すると見つかります。このdataフォルダに格納された画像ファイルをProcessingのプログラムで使用します。Processingでは、ひとつのdataフォルダに複数の画像ファイルを格納して使用します。

画像ファイルの表示
画像ファイルをProcessingのプログラムで使用してみましょう。画像ファイルは、ここでは仮に XXXX.jpg という名称のJPEGデータとします。

PImage img;

void setup(){
  size(800,800);
  img = loadImage("XXXX.jpg");
}

void draw(){
  image(img,0,0);
}

上記のプログラムでは、始めにPImage変数を作成し、img と名付けます。変数　img　にloadImage()関数を使って画像ファイル XXXX.jpg（XXXXは任意の名称を各自で入力してください）を格納します。画像ファイル XXXX.jpg　を格納した変数 img　をimage()関数を使って表示します。image(img,0,0)　内の数値は画像ファイルの座標を表します。

複数の画像ファイルを表示する
複数の画像ファイルを表示する際のプログラム例を以下に記述します。画像ファイルは、ここでは仮に XXXX_1.jpg, XXXX_2.jpg という名称の２種類のJPEGデータとします。

PImage img1;
PImage img2;

void setup(){
  size(800,800);
  img1 = loadImage("XXXX_1.jpg");
  img2 = loadImage("XXXX_2.jpg");
}

void draw(){
  image(img1,0,0,800,800);
  image(img2,mouseX,mouseY,40,40);
}

上記のプログラムでは、image(img1,0,0,800,800)　のように記述することで画像ファイルの表示サイズをプログラムで変更しています。image()関数の各パラメータは以下のようになります。

image(画像を格納した変数, x座標, y座標, 幅, 高さ)

扱える画像フォーマット
Processingで扱うことのできるラスタ画像のファイルフォーマットは、JPEG、PNG、GIF になります。
ラスタ画像とは色のついた点（ドット）の集合として画像を表現するデータ形式のことです。もとの画像サイズより拡大するとジャギー（ギザギザ）が目立つようになるなど、拡大、縮小、変形には適さない形式ですが、写真などの複雑な画像の表現に適しています。

練習課題９：
PNGデータを使用し背景を透明化した画像データを作成する。
作成した画像データを使用して、画像データがマウスカーソルの動きに追従する作品を作成してください。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル