人工言語入門 A 2010

Processingで画像データを扱う

June 30, 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() {

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);
}

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(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);

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);
  }
}

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);
}

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;
}

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);
}

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 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 = 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();
    }
  }
}

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の紹介
ソースファイルを解析してみる
画像ファイルを入れかえてみる

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

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

サンプルファイル (Zip, 5KB)

Processing その２ | The Gatamix Blog — 21 June 2018 21:55: […] […]
slideshow from selected directory | pmemo — 11 January 2017 01:16: […] reference Processingで画像データを扱う */ import codeanticode.syphon.*; // [lib]Syphon SyphonServer server; // [lib]Syphon // 設定 float […]
Maya — 31 January 2014 18:18: とても参考になりました！
ProcessingのVideoライブラリを試してみた | ひろぽっぽれす — 30 November 2011 02:08: [...] [参考記事】yoppa.org - Processingで画像データを扱うカテゴリー: Processing パーマリンク ← ルンバにルミカライトつけてバルブモードで軌跡を撮ってみた [...]