b-06 ライブカメラを使う

2011年11月 7日

このエントリーをはてなブックマークに追加

Processing でビデオ映像を扱う場合は、ライブラリを利用する。今回は標準で用意されている Video ライブラリを利用する。

ライブカメラの映像を表示する

そのまま表示する

sketch_1b_10_1

import processing.video.*; // Videoを扱うライブラリをインポート
Capture camera; // ライブカメラの映像をあつかうCapture型の変数

void setup() {
  size(480, 320);
  camera = new Capture(this, width, height, 12); // Captureオブジェクトを生成
  camera.start();
}

void draw() {
  image(camera, 0, 0); // 画面に表示
} 

//カメラの映像が更新されるたびに、最新の映像を読み込む
void captureEvent(Capture camera) {
  camera.read();
}

同じ映像を4分割で表示する

sketch_1b_10_2

import processing.video.*;
Capture camera;

void setup() {
  size(480, 320);
  camera = new Capture(this, width/2, height/2, 12); // 1/2サイズでCaptureオブジェクトを生成
  camera.start();
}

void draw() {
  image(camera, 0, 0); // 画面に表示
  image(camera, width/2, 0); // 画面に表示
  image(camera, 0, height/2); // 画面に表示
  image(camera, width/2, height/2); // 画面に表示
} 

void captureEvent(Capture camera) {
  camera.read();
}

一般化して n*n 分割で表示する

import processing.video.*;
Capture camera;
int d = 4; //画面を4*4で分割する

void setup() {
  size(480, 320);
  camera = new Capture(this, width/d, height/d, 12);
  camera.start();
}

void draw() {
  for (int j = 0; j < d ; j++) {
    for (int i = 0; i < d ; i++) {
      image(camera, i*width/d, j*height/d);
    }
  }
} 

void captureEvent(Capture camera) {
  camera.read();
}

色情報を取得して再描画する

sketch_1b_10_3

import processing.video.*;
Capture camera;

void setup() {
  size(480, 320);
  camera = new Capture(this, width, height, 12);
  camera.start();
  smooth();
  noStroke();
}

void draw() {
  background(0);
  camera.loadPixels(); //カメラ画像のpixel情報を読み込み
  int d = 10; //円の直径を定義
  // ライブカメラの映像から、円の直径の間隔ごとに、色情報を取得し、その色で円を描く
  for(int y = d / 2 ; y < height ; y += d) {
    for(int x = d / 2 ; x < width ; x += d) {
      fill(camera.pixels[y * width + x]);
      ellipse(x, y, d, d);
    }
  }
} 

void captureEvent(Capture camera) {
  camera.read();
}

練習

  • 円の大きさをランダムにしてみる
  • 異なる図形や文字で描画してみる
  • 色情報を加工してみる

参考:OpenCV(画像処理ライブラリ)を使う

準備:OpenCVのインストール

  • OPENCV \ library
    • OpenCVのインストール
    • OpenCVの Processing ライブラリを、書類 > Processing > libraries 内に配置

※Mac室では、インストールの権限制限があり、みなさん自身ではインストールができません。利用したい場合は事前に相談ください。

そのまま表示する

sketch_1b_10_5

import hypermedia.video.*; //OpenCVライブラリをインポート
OpenCV opencv; //OpenCV型の変数

void setup() {
  size(480, 320);
  opencv = new OpenCV(this);
  opencv.capture(width, height); ////映像読み込みの初期化
}

void draw() {
  opencv.read(); //映像を読み込む
  image(opencv.image(), 0, 0); //映像を表示
}
  • videoライブラリを使用するときよりも、コードがシンプルになる

加工して表示する

sketch_1b_10_6

import hypermedia.video.*;
OpenCV opencv;

void setup() {
  size(480, 320);
  opencv = new OpenCV(this);
  opencv.capture(width/2, height/2);
}

void draw() {
  opencv.read();
  //左上
  opencv.convert(OpenCV.GRAY); //グレースケールに変換  
  image(opencv.image(), 0, 0); //画面に表示 左上
  //右上
  opencv.invert(); //色を反転
  image(opencv.image(), width/2, 0); // 画面に表示 右上
  //左下
  opencv.restore(); //オリジナルの映像に戻す
  opencv.flip(OpenCV.FLIP_HORIZONTAL); //映像を水平方向に反転する
  image(opencv.image(), 0, height/2); // 画面に表示 左下
  //右下
  image(opencv.image(OpenCV.SOURCE), width/2, height/2); // 画面に表示 オリジナルの映像 右下
}

そのほかOpenCVでできること

このエントリーをはてなブックマークに追加

Archives

以下の記事は、2011年度に筆者が大学での授業で利用していた補足資料です。現在、これらをベースに本ウェブサイトを再構築しています。完了するまで一時的に掲載します。


About

筆者: @mathatelle

ジェネラティブ・アート -Processingによる実践ガイド Processing: A Programming Handbook for Visual Designers and Artists Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (Morgan Kaufmann Series in Computer Graphics and Geometric Modeling) Processingをはじめよう (Make: PROJECTS) Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門 Processing アニメーションプログラミング入門 デザイン言語 Processing入門 - 楽しく学ぶコンピュテーショナルデザイン Processingプログラミング入門―Javaベースのオープンソース統合開発環境 ProcessingでかんたんAndroidプログラミング FORM+CODE -デザイン/アート/建築における、かたちとコード Form+Code in Design, Art, and Architecture (Design Briefs) Generative Art: A Practical Guide Using Processing Generative Gestaltung ビジュアライジング・データ ―Processingによる情報視覚化手法 ARプログラミング—Processingでつくる拡張現実感のレシピ— Arduinoをはじめよう 第2版 (Make:PROJECTS) +GAINER―PHYSICAL COMPUTING WITH GAINER Beyond Interaction ―メディアアートのためのopenFrameworksプログラミング入門 ビューティフルビジュアライゼーション ビジュアル・コンプレキシティ ―情報パターンのマッピング