絵心がなくても簡単に絵が描けるProcessing（最終回）

やっと出た！ 公式版のProcessingを動画で確認しよう

collisions.doppac.cc
田中 孝太郎
2008/12/17

Minimライブラリも使ってみよう

　さらにサンプルを発展させて、Minimライブラリを使用して音の出力も試してみましょう。

// Minimライブラリ import ddf.minim.signals.*; import ddf.minim.*; import ddf.minim.analysis.*; import ddf.minim.effects.*; // Videoライブラリ import processing.video.*; Capture cam;  // Videoライブラリ　USBカメラ制御クラス Minim minim;  // Minimライブラリ　メインクラス AudioOutput out;  // Minimライブラリ　音声出力用クラス int sweepX = 0;  // 画像認識する縦ラインの位置 void setup() {     size(400, 400);     frameRate(15);     // 画面と同じサイズ、30fpsでキャプチャ開始     cam = new Capture(this, width, height, 30);       minim = new Minim(this);   // Minimライブラリ起動     out = minim.getLineOut(Minim.STEREO, 256);  // 音声出力開始 } // カメラのフレーム取り込み完了イベントの関数 void captureEvent(Capture cam) {     cam.read();   // カメラ画像を読み込み } void draw() {     out.clearSignals();  // 現在出力されている波形をクリア     image(cam, 0, 0, width, height);   // カメラ画像を画面に描画     sweepX = (sweepX + 1) % height;  // 検出ラインの位置を移動     stroke(255);     line(sweepX, 0, sweepX, height);   // ラインを描画     int startY = -1;     // カメラ画像のpixelsを読み込み（画面のpixelsを使用しない場合は     // このように指定できます）     cam.loadPixels();       for(int y=0 ; y < height ; y++) {         // 検出ラインを上から調べて行き、         // ピクセルの明るさが60以下の場合を検出         if(brightness(cam.pixels[y*width + sweepX]) < 60) {  //（※1）             // 暗いピクセルの始まりをstartYに記録             if(startY < 0) startY = y;            } else if(startY >= 0 && y - startY > 5) {             // startY以降暗いピクセルが5個以上連続していた場合は、             // 波形を出力する             setWave(startY, y);             startY = -1;   // startYをリセット         }     }     // 最後のピクセルまで暗いピクセルが続いていた場合の処理     if(startY >= 0 && height - startY > 5) setWave(startY, height); } // 波形を出力して音を鳴らす void setWave(int sy, int y) {     // 音の周波数をstartYの位置により1500〜60Hzの範囲で決定（※2）     float f = map(sy, 0, height, 1500, 60);     // 音の大きさをピクセルの連続長により0.1〜1の範囲で決定       float v = map(y-sy, 0, height, 0.1, 1);       // 決定した周波数、音量で矩形波を出力     out.addSignal(new SquareWave(f, v, out.sampleRate()));     // 音に変換された部分を赤いラインで表示     stroke(255, 0, 0);     line(sweepX, sy, sweepX, y); } // プログラム終了時の処理（ライブラリの終了処理） void stop() {     out.close();  // 音声出力の終了     minim.stop();   // minimライブラリの終了     super.stop();  // 通常の終了処理 }

JMyron版サンプル
minim_video_sample_jmyron.pde

---

　カメラの動画像を動く１ラインのピクセルを調べ、暗い色のピクセルが連続した部分の数だけ、波形を生成し音にするというサンプルです。こちらも動作サンプル動画をご覧ください。音声としてはノイズに近いものではありますが、動画の形に応じた音が出ていることが分かるでしょうか。

minim video sketch from dotimpact on Vimeo

　カメラ動画の読み込み、ピクセル情報の扱いなどは前ページのサンプルとほぼ同様です。（※1）行では指定したピクセル画像の色から「brightness」という命令で明るさ情報だけを取り出し、その値が低い（色が暗い）部分を音に変換するという処理を行い、音の発振処理をMinimライブラリで行います。

　Minimライブラリは初期化（setup）関数でライブラリ本体であるMinimクラスのオブジェクトを生成することで以後の音声関係のメソッドを使用することができるようになります。今回のサンプルでは波形を出力するAudioOutputオブジェクトに、矩形波を発振するSquareWaveオブジェクトを渡すことで音を出力するという処理をsetWave関数内で行っています。（※2）行で使用しているmap命令はある範囲内の値を別の範囲の数値にマッピングできるProcessingの便利な命令で、ここでは暗い色ピクセルの連続ラインの値（画面Y座標の0〜heightの範囲）を矩形波の音程を決める周波数（ここでは60〜1500Hzの範囲）にマッピングしています。

　このようにProcessingの外部ライブラリは、高度な機能を提供しながらも使い方はProcessingらしくシンプルになっているものが多く、動画や音声を使ったプログラムもそれほど苦労せず扱えます。上のサンプルに興味を持たれたなら、ぜひアルゴリズムを変更したり機能を追加してみてください。

Processingのプログラムを公開する

　最後に、Processingで作ったプログラムを公開する方法を紹介しておきます。作ったプログラムや作品をWeb上などで公開するために、Processingで以下のような機能が用意されています。

　そのほか今回の記事に使ったサンプル動画のように、デスクトップでのプログラムの動作を動画に録画し（これには専用のソフトが必要になります）、動画共有サイトで公開したり、または連載第1回で紹介したJavaScript実装のProcessing.jsやFlashのProcessingライブラリで動作する形で公開するのもよいかもしれません。

□ プログラムをJavaアプレットとして書き出す

　Processingのウィンドウに並ぶ右端のボタンアイコンをクリックすることで、Javaアプレット（Webブラウザで動作するJavaプログラム形式）と表示用のHTMLが出力されます。これをサーバにアップロードすることでプログラムをネットに公開できます。

※　Videoライブラリでカメラを使うようなプログラムについてはJavaアプレットでの動作に対応していないため、注意してください。

□ プログラムをデスクトップアプリとして書き出す

　Processingウィンドウのメニューから［File］→［Export Application］を選択すると、Windows、Mac OS X、Linuxで動作するデスクトップアプリが出力されます。これらのファイルを送ったりWeb上で配布することで、プログラムをProcessingがインストールされていないマシンでも実行できます。

□ 画像やPDFとして静止画を出力する

　スクリーンショットを保存する命令や、前ページで紹介したPDFライブラリを使用することで、Processingのプログラムで作成したグラフィックをWebページに掲載したり印刷できます。

　反応をもらうことで改良のアイデアやモチベーションを得られることも多いですから、完全な形ではないスケッチのプログラムでも公開していくとよいでしょう。皆さんもぜひProcessingのプログラミングの世界に参加してみてください。

■ ＠IT関連記事

「Javaは遅い」から「Javaは楽しい」に至る歴史 小山博史のJavaを楽しむ（12）　最新のJava実行環境は起動が速いドラッガブルアプレットなど楽しい機能が満載です。ここまで至るには、いろいろな出来事がありました…… 「Java Solution」フォーラム 2008/12/15

Silverlightのリッチなグラフィックス描画サンプル集 .NETを知らない人でも分かるSilverlight入門（3）　今回はグラデーションやベジェ曲線など多彩な機能を簡単に実現できるベクター形式のグラフィックス描画について 「リッチクライアント ＆ 帳票」フ ォーラム 2008/3/19

いまさら聞けないSVG、なぜ知られていないのか？ いまさら聞けないリッチクライアント技術（9）　「SVG？ 聞いたことないなあ……」と思うは無理もないことです。知られていない理由とその秘めたる実力について解説します 「リッチクライアント ＆ 帳票」フ ォーラム 2008/2/15

Linux Tips − GIMP 2.0を使うには − GIMP 2.2のメニューを日本語化するには − GIMPでスキャナから画像を取り込むには − GIMPでデジタルカメラのデータを取り込むに 「Linux Square」フォーラム

SwingでJavaに強くなる JavaはサーブレットやJSPだけじゃない！Eclipseを使ってSwingを学ぶことで、Javaの基本、GUIアプリケーションの基本スキルを高めよう

3/3

INDEX
絵心がなくても簡単に絵が描けるProcessing（最終回）　 やっと出た！ 公式版のProcessingを動画で確認しよう
	Page1 外部ライブラリを使って高度なプログラムを作ろう Processing 1.0リリース！ 外部ライブラリを使用する──Minim（音声入出力）、Video（ライブカメラ、動画ファイル操作）、OpenGL、PDF、ハードウェアドライバ
	Page2 外部ライブラリを使用する方法 Videoライブラリを使ってみよう
	Page3 Minimライブラリも使ってみよう Processingのプログラムを公開する──プログラムをJavaアプレットとして書き出す、プログラムをデスクトップアプリとして書き出す、画像やPDFとして静止画を出力する

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）