2019プログラミング講座１２：画像

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 になります。
ラスタ画像とは色のついた点（ドット）の集合として画像を表現するデータ形式のことです。もとの画像サイズより拡大するとジャギー（ギザギザ）が目立つようになるなど、拡大、縮小、変形には適さない形式ですが、写真などの複雑な画像の表現に適しています。

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

画像を活用したプログラム
画像を活用したプログラムを作成してみましょう。マウスと画像の距離に応じてeasingを施すプログラムを作成します。
easingとは動きを緩める効果のことで、Robert Pennerが数種類のeasing効果を考案しています。
等速度（動き始めから終わりまで同じ速度）で動くのではなく、動きに変化をつけることが可能になります。
今回はマウスに画像が近づくにつれてゆっくりと動くeasing効果を試してみましょう。
画像作成ソフト（Photoshopなど）で背景を透明化したPNG画像を用意し任意の名前をつけてProcessingのファイルに追加しておきます。

PImage img;
float x;
float y;
float easing = 0.08;
float dx;
float dy;

void setup() {
  size(400, 400);
  img = loadImage("map.png");
}

void draw() {
  background(255);
  
  dx = mouseX - x;
  if(abs(dx) > 1) {
    x += dx * easing;
  }

  dy = mouseY - y;
  if(abs(dy) > 1) {
    y += dy * easing;
  }
  
  imageMode(CENTER);
  image(img,x,y,50,50);
}

画像の現在位置を変数（今回はx,y）で指定し、目標位置であるマウスの位置との距離を求め、その距離にeasingを発生させるための数値をかけています。
dx = mouseX – x; あるいは　dy = mouseY – y;の部分でマウスの位置と画像の位置の距離を変数（dx,dy）に格納します。
abs( )関数を使って距離の絶対値（正数）を求め、距離の値が１より大きい場合に画像の現在地をeasingの値を使って緩めています。

練習課題12-2：
背景を透明化したPNG形式の画像データを５つ作成する。
作成した５つの画像データを使用して、５つの画像データがそれぞれ異なる
easing値でマウスカーソルの動きに追従する作品を作成してください。

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

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