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

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