yoppa.org

人工言語入門 A 2010

Processingで画像データを扱う

※こちらの内容は既に古い情報となっています。新しく書き直した記事を参照してください。

画像を表示する

  • Processingで画像を表示するためには、画像ファイルをそのスケッチのある階層に「data」フォルダを作成し、その中に画像ファイルを入れる
  • Jepg、GIF、PNG形式に対応している
  • 画像を表示するには、image() 関数を用いる
    • image(画像ファイル名, x, y); – 座標(x, y)を左上にして、画像を表示
    • image(画像ファイル名, x, y, width, height); – 座標(x, y)を左上にして、幅(width)と高さ(height)を指定して画像を表示

画像を表示

PImage img;

void setup() {
  size(640, 426);
  img = loadImage("photo.jpg");
}

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

位置とサイズを指定して画像を表示

PImage img;

void setup() {
  size(640, 426);
  img = loadImage("photo.jpg");
}

void draw() {
  background(0);
  image(img, width/4, height/4, width/2, height/2);
}

画像の色や透明度を変更する

  • image() で表示した画像の、色や透明度を操作することができる
  • tint() 関数
    • tint(gray) – グレースケール画像のレベルを変更
    • tint(gray, alpha) – グレースケール画像のレベルと透明度を変更
    • tint(red, green, blue) – カラー画像のRGBの値を変更
    • tint(red, green, blue, alpha) – カラー画像のRGBの値と透明度を変更

画像の色を変更してみる

イメージのレベルを変更

PImage img;

void setup() {
  size(640, 426);
  img = loadImage("photo.jpg");
}

void draw() {
  background(0);
  noTint();
  image(img, 0, 0);
  tint(102);
  image(img, width/2, 0);
}

イメージのカラーを変更

PImage img;

void setup() {
  size(640, 426);
  img = loadImage("photo.jpg");
}

void draw() {
  background(0);
  noTint();
  image(img, 0, 0);
  tint(31, 127, 255);
  image(img, width/2, 0);
}

イメージの透明度(アルファ)を変更

PImage img;

void setup() {
  size(640, 426);
  img = loadImage("photo.jpg");
}

void draw() {
  background(0);
  for(int i = 0; i < 8; i++) {
    int xpos = i * width / 8;
    fill(0);
    rect(xpos, 0, width, height);
    tint(255,255,255, i * 32);
    image(img, xpos, 0);
  }
}

ピクセルの情報を取得

  • 表示した画像の情報をピクセル単位取得することができる
  • 取得した画像の情報をもとに、より高度なイメージの操作、イメージの情報をもとにした表現を行うことが可能となる
  • ピクセル情報の取得には、get() 関数を用いる
  • get関数
    • get() – ウィンドウ内のピクセル全てを取得、イメージを返す
    • get(x, y) – 指定した座標、(x, y)のピクセルを取得、色の値を返す
    • get(x, y, width, hegiht) – 指定した座標、(x, y) から幅(width)、高さ(height)を指定してイメージを取得

get()を使用した例

マウスの位置のピクセルの色を取得 – 取得したRGBの値で左上に3つの正方形を描く

PImage img;

void setup() {
  size(640, 426);
  stroke(255, 102);
  img = loadImage("photo.jpg");
}

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

  noStroke();
  fill(0);
  rect(20, 20, 60, 20);

  color c = get(mouseX, mouseY);
  fill(red(c), 0, 0);
  rect(20, 20, 20, 20);
  fill(0, green(c), 0);
  rect(40, 20, 20, 20);
  fill(0, 0, blue(c));
  rect(60, 20, 20, 20);

  stroke(255, 102);
  line(mouseX, 0, mouseX, height);
  line(0, mouseY, width, mouseY);
}

画像をモザイク化する

  • loadPixels() – 現在画面に表示されているピクセル情報を記録する
    • loadPixels() で格納したピクセルの色情報は、pixels[] 配列に格納される
  • pixels[] 配列を一定間隔で読みだすことで、画像をモザイク化する
PImage img;
int mosaicWidth = 30;
int mosaicHeight = 20;

void setup() {
  size(640, 426);
  noStroke();
  img = loadImage("photo.jpg");
}

void draw() {
  background(0);
  image(img, 0, 0);
  loadPixels();

  for(int j = 0; j < height; j+=mosaicHeight) {  
    for(int i = 0; i < width; i+=mosaicWidth) {  
      color c = pixels[j * width + i];
      fill(c);
      rect(i, j, mosaicWidth, mosaicHeight);
    }
  }
}

void mouseDragged() {
  mosaicWidth = mouseX / 4 + 10;
  mosaicHeight = mouseY / 4 + 10;
}

画像ファイルをスキャンする

  • loadPixels() を活用して、画像の特定のy座標の色だけをとりだして、バーコード状に並べる
PImage img;

void setup() {
  size(640, 426);
  stroke(255, 102);

  img = loadImage("photo.jpg");
  image(img, 0, 0);
  loadPixels();
}

void draw() {
  for(int i = 0; i < width; i++) {  
    color c = pixels[width * mouseY + i];
    stroke(c);
    line(i, 0, i, height);
  }

  stroke(255, 102);
  line(0, mouseY, width, mouseY);
}

フラクタルフォトモザイク

  • モザイクのひとつひとつが同じ写真になっている
  • モザイク状に配置した写真の明度をtintで変化させている
PImage img;
int mosaicWidth = 30;
int mosaicHeight = 20;

void setup() {
  size(640, 426);
  noStroke();
  background(0);
  img = loadImage("photo.jpg");
  image(img, 0, 0);
  loadPixels();
}

void draw() {
  for(int j = 0; j < height; j+=mosaicHeight) {  
    for(int i = 0; i < width; i+=mosaicWidth) {  
      color c = pixels[j * width + i];
      tint(red(c), green(c), blue(c));
      image(img, i, j, mosaicWidth, mosaicHeight);
    }
  }
}

画像をピクセレイト

  • 画像のピクセルの色情報をもとに、画像を再描画する – ピクセレイト

円の大きさと色で、画像を再構成する

PImage img;
int mosaicSize = 12;

void setup() {
  size(640, 426);
  noStroke();
  img = loadImage("photo.jpg");
  image(img, 0, 0);
  loadPixels();
}

void draw() {
  background(0);
  for(int j = 0; j < height; j+=mosaicSize) {  
    for(int i = 0; i < width; i+=mosaicSize) {  
      color c = pixels[j * width + i];
      fill(c, 127);
      ellipse(i, j, brightness(c)/6.0, brightness(c)/6.0);
    }
  }
}

四角形の大きさと角度で、画像を再構成する

PImage img;
int mosaicSize = 6;

void setup() {
  size(640, 426);
  noStroke();
  img = loadImage("photo.jpg");
  image(img, 0, 0);
  loadPixels();
  rectMode(CENTER);
  smooth();
}

void draw() {
  background(0);
  for(int j = 0; j < height; j+=mosaicSize) {  
    for(int i = 0; i < width; i+=mosaicSize) {  
      color c = pixels[j * width + i];
      fill(c, 127);
      pushMatrix();
      translate(i, j);
      rotate(brightness(c));
      rect(0, 0, brightness(c)/6.0, 2);
      popMatrix();
    }
  }
}

画像ファイルのデータを利用した表現

  • Jared Tarbell, box.fitting.imageの紹介
  • ソースファイルを解析してみる
  • 画像ファイルを入れかえてみる

サンプルファイルのダウンロード

今日とりあげた全てのサンプルは下記からダウンロードしてください。