Processing FileChooser/ファイル選択画面の表示

通常Processingでは、プログラム上で使われる画像データや音源データなどは、スケッチフォルダ内のdataフォルダ内に入れておく必要があります。ProcessingはJavaでつくられているため、JavaのGUIライブラリであるSwingを使うことで、ファイルチューザーのダイアログ画面（ファイル選択画面）を表示し、パソコン上にある任意のファイルを選択し開くことができます（尚、この方法はProcessing/Hacks/filechooserで紹介されています）。
関連：「Processing　FileChooser２」（Processing 146以降／selectInput()の使い方）


（Windows XPのファイルチューザー画面/ファイル選択ダイアログ）

dataフォルダ内のデータだけでなく、デスクトップ上にある画像データなどを読み込むことができるので、入れ替わりで画像表示させるときなどに便利です。
以下は、クリックするとファイルチューザー（ファイル選択画面）というダイアログ画面が現れ、コンピュータ上の任意の場所にある画像ファイル（jpeg、png、gif、tga）を取り込んで表示するサンプルです。

//JavaのSwingを取り込む
import javax.swing.*;

//画像インスタンスを用意 
PImage pimage;

//選択ファイルを用意し
//ファイルを空にしておく
String getFile = null;

void setup(){
  //とりあえず表示画面を400角に設定 
  size(400,400); 
}

void draw(){
  //選択ファイル名が空でないとき
  if(getFile != null){
    //ファイルを取り込む
    fileLoader(); 
  } 
}

//マウスを押したら
void mousePressed(){
  //選択ファイル取得処理 
  getFile = getFileName(); 
}

//ファイルを取り込むファンクション 
void fileLoader(){
  //選択ファイルパスのドット以降の文字列を取得
  String ext = getFile.substring(getFile.lastIndexOf('.') + 1);
  //その文字列を小文字にする
  ext.toLowerCase();
  //文字列末尾がjpg,png,gif,tgaのいずれかであれば 
  if(ext.equals("jpg") || ext.equals("png") ||  ext.equals("gif") || ext.equals("tga")){
    //選択ファイルパスの画像を取り込む
    pimage = loadImage(getFile);
    //イメージ表示 
    image(pimage, 0, 0, pimage.width, pimage.height); 
  }
  //選択ファイルパスを空に戻す
  getFile = null; 
}

//ファイル選択画面、選択ファイルパス取得の処理 
String getFileName(){
  //処理タイミングの設定 
  SwingUtilities.invokeLater(new Runnable() { 
    public void run() {
 try {
   //ファイル選択画面表示 
   JFileChooser fc = new JFileChooser(); 
   int returnVal = fc.showOpenDialog(null);
   //「開く」ボタンが押された場合
   if (returnVal == JFileChooser.APPROVE_OPTION) {
     //選択ファイル取得 
     File file = fc.getSelectedFile();
     //選択ファイルのパス取得 
     getFile = file.getPath(); 
   } 
 }
 //上記以外の場合 
 catch (Exception e) {
   //エラー出力 
   e.printStackTrace(); 
 } 
    } 
  } 
  );
  //選択ファイルパス取得
  return getFile; 
}

選択ファイルが画像ファイルとして相応しいものであるかどうかを

if(ext.equals("jpg") || ext.equals("png") ||  ext.equals("gif") || ext.equals("tga")){...}

によって判別しています。選択したファイル名の「.」ドット以降が、「jpg」、「png」、「gif」、「tga」であれば、読み込み可能な画像フォーマットとして処理されます。以下の

String getFileName(){...}

以降はJavaのSwingによるファイルチューザーを呼び出して選択ファイルまでのパスを得るコードなので、そのままコピー＆ペーストしても構わないでしょう。
PImageでは、jpg、png、gif、tgaの４種類が読み込み可能ですが、この部分を音源のファイルフォーマットに指定し、PImageのかわりにサウンドライブラリを使えば、音源の選択／読み込み／再生も可能になります。
ファイルチューザー画面を用いて、Processingのサウンドライブラリである「Ess」による音源再生のプログラムを以下に書きます。画面中央の白い正方形をクリックすれば、音源選択の画面が現れます。今回利用できる音源のフォーマットは、「wav」だけとします。dataフォルダの中にある音源だけでなく、iTuneなどの音楽ライブラリの中から曲を選ぶこともできるはずです。白い正方形以外の周辺の場所をクリックすれば、再度音源が再生されます。尚、「Ess」ライブラリをダウンロード＋インストールしておく必要があります。また、曲などの大きな音源データの場合は、ProcessingのメニューバーからPreferencesあるいは環境設定で、メモリーを増やしておく必要があります（「Increase maximum available memory to [ ]MB」という欄にチェックを入れ、データ量に相当するメモリー数を記入して下さい）。

//Essサウンドライブラリの取り込み
import krister.Ess.*;
//音源インスタンスの用意
AudioChannel mySample;

//JavaのSwingライブラリの取り込み
import javax.swing.*; 

String getFile = null; 

void setup(){ 
  size(200,200);
  //Ess使用開始
  Ess.start(this);
  background(100,100,30);
  rectMode(CORNER);
}

void draw(){
  //画面中央白い正方形の描画
  rect(width/2-25,height/2-25,50,50); 
  if(getFile != null){ 
    fileLoader(); 
  } 
}

void mousePressed(){
  //クリックの箇所が白い正方形以内なら
  if(mouseX>width/2-25 && mouseX<width/2-25+50 && mouseY>height/2-25 && mouseY<height/2-25+50){
    //選択ファイル所得処理 
    getFile = getFileName();
  }
  else{//白い正方形以外の箇所をクリックしたら
    //音源ファイルが空ではないとき
    if(mySample!=null){
      //音源再生
      mySample.play();
    }
  }
}

void fileLoader(){ 
  String ext = getFile.substring(getFile.lastIndexOf('.') + 1); 
  ext.toLowerCase();
  //選択したファイルが「wav」フォーマットなら 
  if(ext.equals("wav") ){
    //音源ファイルの指定 
    mySample=new AudioChannel(getFile);
    //音源再生
    mySample.play();
  } 
  getFile = null; 
}

//ファイル選択画面、選択ファイルパス取得の処理
String getFileName(){ 
  SwingUtilities.invokeLater(new Runnable() { 
    public void run() { 
      try { 
        JFileChooser fc = new JFileChooser(); 
        int returnVal = fc.showOpenDialog(null); 
        if (returnVal == JFileChooser.APPROVE_OPTION) { 
          File file = fc.getSelectedFile(); 
          getFile = file.getPath(); 
        } 
      }
      catch (Exception e) { 
        e.printStackTrace(); 
      } 
    } 
  } 
  ); 
  return getFile; 
}

//Ess使用停止
public void stop(){ 
  Ess.stop(); 
  super.stop(); 
}

10/04(土)の授業について

次回10/04(土)の授業では、引き続き身体に関連した実験を行います。

パソコン
Arduino基盤
センサ類（各自が持っているもの）
ブレッドボード+ジャンプワイヤ

以上を持参して来て下さい。

Processing Webカメラを光センサとして使う

今回は、パソコンに接続したWebカメラを光センサとして使う応用実験を行います。点光源（LEDなど）を空間内で動かし、その軌跡をProcessingの画面上に描画してみたいと思います（身体にLEDなどの点光源をつけて、腕を動かしたり歩いたりすれば、身体の動きを連続的に描画／記録することができます）。
Processingでは、videoライブラリを用いてWebカメラを通してキャプチャし、キャプチャした画面のピクセルをひとつずつ読み込んで、設定した明るさ以上のピクセルを選択します。選択したピクセルのみを別の色で表示するプログラムになります。
以下のプログラムでは、カメラからキャプチャした画像の各ピクセルの明るさ（0~255）を調べ、そのピクセルの明るさが254以上であれば、画面上に赤で表示する内容になります。クリックすれば、黒で塗りつぶして画面をリセットすることにします。
videoライブラリの基本的な使い方は「Processing　Video（Webカメラ）」を参照して下さい。

*Windowsの場合、そのままの設定ではこのVideoライブラリを使用することができません。WinVDIG 1.0.1をインストールする必要があります。

//ライブラリを取り込む
import processing.video.*;

//オブジェクトの用意
Capture video;

//画面サイズの変数と値
int w=320;
int h=240;

void setup() {
  size(w, h);
  video = new Capture(this, w, h, 30);
  //背景を黒にしておく
  background(0);

  video.start();//Processing2.0以上の場合はこの行が必要
}

void draw() {
  //画面のピクセルをロードしておく
  loadPixels();

  //カメラ画像のピクセルをひとつずつ調べる
  for(int i=0;i<w*h;i++){
    //ピクセルが254以上の明るさの場合
    if(brightness(video.pixels[i])>=254){
      //選択されたピクセルを赤にする
      pixels[i]=color(255,0,0);
    }   
  }

  //ピクセル表示更新
  updatePixels();
}

//キャプチャ画面の読み込み
void captureEvent(Capture video) {
  video.read();
}

//マウスボタンを押したら
void mousePressed(){
  //背景を黒にする
  background(0);
}

LEDなどの点光源をカメラに対して動かせば、以下のような画像ができあがります。赤いピクセル部分が、動かした点光源の軌跡です。




webカメラからの映像と合成（オーバーレイ）するには、以下のようになります。ここでは、webカメラからの映像を左右鏡像反転しています（カメラによっては、セッティング画面で鏡像にできるものもあります）。カメラからの映像を鏡像にすることで、点光源を右に動かせば画面内の点光源も右に動くようになります。マウスボタンを押せば画面を黒にリセット、「s」キーを押すと画面内の映像をjpeg画像で保存、「t」キーを押すとカメラセッティング画面になります。

import processing.video.*;
Capture video;
int w=320;
int h=240;

//軌跡用の配列を用意しておく
int[] pix=new int[w*h];

void setup() {
  size(w, h);
  video = new Capture(this, w, h, 30);
  //軌跡用配列の値をすべてゼロにしておく
  for(int i=0;i<w*h;i++){
    pix[i]=0;
  }

  video.start();//Processing2.0以上の場合はこの行が必要
}

void draw() {
  loadPixels();
  for(int i=0;i<w*h;i++){
    if(brightness(video.pixels[i])>=254){
      //ピクセルを鏡像反転するための計算
      //配列に値を記憶しておく
      int a=i/w;
      pix[w-i%w+a*w-1]=255;//選択されたピクセルだけを255にする
    }
    //配列からの値を画面ピクセルへ代入
    //選択されたピクセルを緑で画面表示    
    pixels[i]=color(0,pix[i],0);
  }
  updatePixels();

  //合成するカメラ映像の処理
  tint(255,128);//透明度128（50%）
  scale(-1.0, 1.0);//左右反転（鏡像）
  image(video, -w, 0);//映像出力
}

//カメラ映像読み込み
void captureEvent(Capture video) {
  video.read();
}

//マウスボタンを押すとリセット（黒へ）
void mousePressed(){
  for(int i=0;i<w*h;i++){
    pix[i]=0;
  }
}

int num=0;//保存画像インデックスの変数

void keyPressed(){
  //sキーを押すと（jpeg画像で保存）
  if(key=='s'){
    String s="image_" + num + ".jpg";//保存ファイル名
    save(s);//画像保存
    num++;//保存画像インデックスを+1しておく
  }
  //tキーを押すと
  if(key=='t'){
    video.settings();//カメラセッティング画面表示
  }
}

「s」キーを押すことで画面をjpegフォーマットで保存できるようにsave()を用います。画像は、save()の括弧内の指定したファイル名でスケッチフォルダ内に保存されます。インデックス用の変数numを用意し、image_0.jpg、image_1.jpg、image_2.jpg...というように、保存名にはインデックス番号がつくようにします。
「t」キーを押せばsettings()によって、カメラのセッティング画面が現れます。カメラの露出やコントラストなどの設定が「オート／自動」になっている場合があるので、できれば「マニュアル／手動」に切り替えて、それぞれを固定値にしたほうが、選択するピクセルの明るさが変化せずに済むのでいいでしょう。


上画像：合成／重ね合わせられた映像
映像内の手にはボタン電池に接続されたLEDが点灯しています。
この画像は、プログラム中にある「s」キーを押して画像保存したものです。


ドライバなしですぐにコンピュータに接続可能（UVC対応）なWebカメラとして以下のようなものがあります。
Macintosh/Windows兼用です。
　　　　　　

関連：
「Processing　Video (Webカメラ)」--Webカメラの使い方／映像にフィルタをかけて表示。
「Arduino+Processing　マトリクスLED＋Webカメラ」--Webカメラ映像をマトリクスLEDに映す。
「Processing　Webカメラ／定点記録画像」--Webカメラ映像を0.5秒おきに画像保存（JPEG）する。
「Processing　Webカメラ/カラートラッキング」--Webカメラを使い、色を手がかりに物体を追いかける。
「Processing　Webカメラ/モーショントラッキング」--Webカメラを使って動体検知する。

次回（9/27）授業について

9/27の授業では、以下のものを持参して下さい。

・パソコン
・Webカメラ（パソコン内蔵カメラでも可）
・Arduino基盤
・LED

Webカメラをパソコンに接続し、Processingのプログラムによって身体計測の実験を行います。
Webカメラの使い方については、「Processing Video（Webカメラ）」などを参考にして下さい。

尚、上記機材等を持参できない場合は、学校の備品を使うことになります（ただし、数が限られています）。

後期授業について

9/20（土）14:00から後期授業を開始します。後期授業説明をしたあとに、実験／作業を行います。

当日（9/20）に必要な道具／材料など：
・カッター（またはハサミ）
・不要な新聞紙や雑誌（不要な紙類）
・粘着テープ（ガムテープ、セロテープ、マスキングテープなど）




後期授業概要：
前期には、基本的な電子工作やプログラミングについて学習してきましたが、後期は実際の場面に対してそれらの技術を応用／表現していきたいと思います。
前半では、「BODY」というテーマで実際の身体を対象にしながら作業していきます。
中半では、「FURNI」というテーマで「BODY」で行った結果を家具的な道具／装置へ発展させます。
後半では、「ROOM」というテーマで、１階のギャラリーを実在するサイトとして、空間を変容させる実験を行います。
後期最後には、１階ギャラリーにて展覧会を行う予定です。

09/20：後期授業概要説明
　　　 BODY01
09/27：BODY02
10/04：BODY03
10/11：FURNI01
10/18：FURNI02
10/25：FURNI03
11/01：中間発表／レクチャー
11/15：ROOM01
11/22：ROOM02
11/29：ROOM03
12/06：STRUCTURALIZATION
12/13：最終発表／展示（約１週間開催）

電子工作／プログラミングの技術的な内容については、必ずしも今までの内容（あるいはブログに掲載されている内容）をすべて習得していなくても、各自のレベルや作品制作の必要性に応じて随時復習していきます。