Processing QRコード／2次元コード

Processingのライブラリには、「QRCode」というものがあります。QRコードとは、以下のような２次元的なマトリクスを利用したコードです。バーコードよりは情報量が多く、様々な場面に用いられています。


このブログのURL情報が含まれたQRコード（上画像:qrcode.png）

Processingの「QRCode」ライブラリを用いることで、QRコードに含まれた情報を解読することができます。逆に、任意の情報のQRコードを生成するには以下のようなサイトで行うことができます。

http://qrcode.kaywa.com
http://qr.quel.jp

「QRCode」ライブラリでは、上記サイトなどで直接生成したQRコード以外にも、Webカメラやデジタルカメラで撮影したQRコード（紙上に印刷したQRコード）を認識／解読することができます。尚、このライブラリを使うには「QRCode」ライブラリサイトからライブラリをダウンロード＋インストールする必要があります。サイトの説明によれば、以下のようなコードでQRコードを解読することができます。予めQRコードの画像を用意して、スケッチフォルダ内dataフォルダに入れておいて下さい。
以下のサンプルは、上にあるQRコード（qrcode.png）を使って解読するコードです。無事QRコードが解読されれば、link()によって、自動的にこのブログのURLへジャンプするようになっています。

//ライブラリを取り入れる
import pqrcode.*;

//インスタンス名
Decoder decoder;

void setup() {
  //オブジェクトの生成
  decoder = new Decoder(this);
  //イメージのロード
  PImage img = loadImage("qrcode.png");
  //イメージの解読
  decoder.decodeImage(img);
}

void decoderEvent(Decoder decoder) {
  //解読結果をテキストとして取り出す
  String statusMsg = decoder.getDecodedString();
  //テキストを画面に出力
  println(statusMsg);
  //テキストに書かれているURLへ移動
  link(statusMsg, "_new"); 
}

「QRCode」ライブラリのサイトには、Webカメラから撮影したQRコードを読み込んで解読するサンプルがあります。

http://www.shiffman.net/p5/pqrcode_files/Pqrcode_example.zip

このサンプルでは、「スペース」キーでカメラからのQRコードを画像として読み込み解読します。解読されたテキストは画面に文字として表示されます。「f」キーで、既に用意されているテスト用の画像を読み込んで解読します（「http://www.shiffman.net」と表示されるはずです）。「s」キーで、カメラセッティングの画面に切り替わります。
カメラでQRコードを撮影するときに、ピントがずれていると認識できないこともあるので、カメラを調整する必要があるかもしれません。

以下では、デスクトップ上あるいはその他の場所に保存してあるQRコードをファイルチューザーで選び、解読する実験をしてみます。ファイルチューザーについては、前回のブログ「Processing　FileChooser/ファイル選択画面の表示」を参照して下さい。
マウスを押したら、ファイルチューザーのダイアログ画面が現れ、任意のQRコードを選択し、解読結果をProcessingのコンソールに表示します。

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

import pqrcode.*;

//解読用インスタンスを用意
Decoder decoder;

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

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

void setup(){
  //とりあえず表示画面を400角に設定 
  size(400,400);
  //解読用オブジェクトの生成
  decoder = new Decoder(this);
  //背景（黒）
  background(0);
}

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);
    //背景（黒）
    background(0);
    //イメージ表示 
    image(pimage, 0, 0, pimage.width, pimage.height);
    //イメージの解読
    decoder.decodeImage(pimage);
  }
  //選択ファイルパスを空に戻す
  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; 
}

void decoderEvent(Decoder decoder) {
  //解読結果をテキストとして取り出す
  String statusMsg = decoder.getDecodedString();
  //テキストを画面に出力
  println(statusMsg);
}

以下は、授業内で実験した内容です。
数値の情報（100など）を含んだQRコードを生成し、プログラムによって解読された文字列としての数値を整数型の数値に変換します。その数値をArduinoへシリアル通信で送信し、analogWrite()でLEDの輝度やモータの速度あるいはサーボの回転角度などに反映させる内容です。いくつかのQRコードを作成し、ファイルチューザーで選択したQRコードを入れ替わりで送ります。

//シリアル通信ライブラリを取り込む
import processing.serial.*;
//シリアル通信インスタンス
Serial port;

//JavaのSwingを取り込む
import javax.swing.*;
import pqrcode.*;
//解読用インスタンスを用意
Decoder decoder;
//画像インスタンスを用意 
PImage pimage;
String getFile = null;

void setup(){
  //とりあえず表示画面を400角に設定 
  size(400,400);
  //解読用オブジェクトの生成
  decoder = new Decoder(this);
  background(0);
  
  //シリアルポートの設定  
  port = new Serial(this, "/dev/tty.usbserial-A4001Kjl", 9600);
}

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);
    //背景（黒）
    background(0);
    //イメージ表示 
    image(pimage, 0, 0, pimage.width, pimage.height);
    //イメージの解読
    decoder.decodeImage(pimage);
  }
  //選択ファイルパスを空に戻す
  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; 
}

void decoderEvent(Decoder decoder) {
  //解読結果をテキストとして取り出す
  String statusMsg = decoder.getDecodedString();
  //テキストを画面に出力
  println(statusMsg);
  
  //解読した文字列を整数値に変換
  int val=int(statusMsg);
  //シリアル通信で送信
  port.write(val);
}

Arduino側は、11番ピン（PWMピン）にLEDを接続し、輝度が変化する内容であれば以下のようになります。

int val;

void setup(){
  //シリアル通信開始
  Serial.begin(9600);
}

void loop(){
  //受信データがひとつ届いたら
  if(Serial.available()>0){
    //受信データ読み込み
    val=Serial.read();
  }
  //11番ピンをアナログ出力する
  analogWrite(11,val);
}

QRコードで、「100,20,35,180」のように、幾つかの数値をコンマ（デリミタ）で区切り連続した数値の文字列を作成し、解読した結果として送信すれば、複数の数値データをArduinoへ送信することもできます。
この場合、Processingのプログラムの最後の部分にあるvoid decoderEvent(){...}の部分を以下のようにします。

void decoderEvent(Decoder decoder) {
  String statusMsg = decoder.getDecodedString();
  int[] data=int(split(statusMsg,',');
  for(int i=0;i<data.length;i++){
    port.write(val);
  }
}

解読される文字列は

statusMsg = "100,20,35,180"

なので、
この文字列statusMsgをsplit()に代入し「,」コンマを区切り記号として複数の文字列を含んだ配列に変換します。同時にその文字列群をint()で括ることで、文字列データを整数値データに変換し、

data = {100,20,35,180}

という整数値の配列になります。data.lengthによって配列dataに何個のデータが含まれているか確認し（この場合４個、data[0]からdata[3]まで）、for()文でデータ数の分だけport.write()で繰り返しシリアル通信で送信します（４回分送信）。Arduino側で、順番にこれらの数値を受け取ることで、LEDの輝度調整のプログラムであれば、連続した値をもとに変化する輝度調整が可能になります。

応用的な使い方として、LEDの点灯やサーボの回転角度などの連続する動きのデータをQRコードで幾つか作成しておき、Webカメラを通して解読させる度に異なる動作をさせたり、マトリクスLEDなどに文字や模様として表示させたりできます。

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カメラ）」などを参考にして下さい。

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