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)を指定して画像を表示

画像を表示

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

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

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

画像の色を変更してみる

イメージのレベルを変更

イメージのカラーを変更

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

ピクセルの情報を取得

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

get()を使用した例

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

画像をモザイク化する

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

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

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

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

  • モザイクのひとつひとつが同じ写真になっている
  • モザイク状に配置した写真の明度をtintで変化させている

画像をピクセレイト

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

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

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

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

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

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

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