Processingは、コードによってアートを生み出すことができる強力なツールです。グラフィックを扱うためのJavaライブラリと、簡単にコードを書いて実行できる統合開発環境（IDE）が一体となったものです。

初心者向けのグラフィックスやアニメーションのプロジェクトには、プロセッシングを使ったものが多くありますが、ライブ映像を操作することも可能なのです。

今日は、Processing Video Library**を使って、マウスで操作するさまざまな効果でライブビデオスライドショーを操作してみましょう。ライブ映像を反転させるだけでなく、サイズや色の変更、マウスカーソルを追従させる方法などを学びます。

プロジェクトセットアップ

まずは、プロセスをダウンロードし、白紙のスケッチを開いてください。このチュートリアルはWindowsをベースにしていますが、ウェブカメラが搭載されているコンピュータであれば、どのコンピュータでも動作するはずです。

Sketch" > "Import Library" > "Add Library "からアクセスできるProcessing Video Libraryのインストールが必要な場合があります。検索ボックスで動画を検索し、Processing Foundationからライブラリをインストールします。

コーディングの手間を省くために、完全なスケッチをダウンロードすることができます。

ウェブカメラを使った加工

まず、インポートライブラリで、セットアップ関数を作ってみましょう。空白の処理スケッチに次のように入力します。

import processing.video.*;Capture cam;void setup(){ size(640,480); cam = new Capture(this, 640, 480); cam.start();}

ビデオライブラリをインポートした後、camというキャプチャインスタンスを作成して、ウェブカメラからのデータを保存します。セットアップでは、size機能で640×480ピクセルの大きさのウィンドウを設定します。

次の行では、このスケッチ用に、ウィンドウと同じ大きさの新しい Capture のインスタンスを指定し、カムの start() でカメラをオンにするように指示しています。

もう、すべての部分が理解できなくても、心配は無用です。要するに、「＊＊窓を処理し、カメラを探して、開けなさい！」ということなんです。それを表示するためには、描画機能が必要です。上のコードの下に、括弧の外をタイプしてください。

void draw(){ if (cam.available()){ cam.read(); } image(cam,0,0); }

draw関数はフレーム毎に呼び出されるため、カメラからのデータがあれば、1秒間に複数回読み込むことができます。

そして、そのデータはウィンドウの左上の0, 0の位置に画像として表示されます。

スケッチを保存し、画面上部の「再生」ボタンを押します。

カムで保存されたデータは、1フレームごとに画面に正しく印刷されます。javaはすべてのブラケットとセミコロンが正しい位置にあることを必要とします。また、ウェブカメラへのアクセスに数秒かかる処理がありますので、うまくいかないと思ったら、スクリプトを起動してから数秒待ってください。

画像を反転させる

カメラのライブ映像ができたので、それを操作してみましょう。draw 関数で、image(cam, 0,0); を次の 2 行のコードに置き換えます。

scale(-1,1);image(cam,-width,0);

スケッチを保存し、再実行します。違いがわかりますか？負のスケール値を使用することで、すべてのx値（水平方向の画素）が反転するようになりました。そのため、画像を正しく配置するためには、ウィンドウ幅の負の値を使用する必要があります。

画像を反転させるのは、ほんの少しの変更で済みます。

scale(-1,-1);image(cam,-width,-height);

このとき、xとyの両方の値が反転するため、ライブカメラの映像は裏返しになります。ここまでで、通常の画像、水平反転した画像、垂直反転した画像のエンコードを行いました。その間をループする方法を考えよう。

循環させる

毎回コードを書き直すのではなく、数字をループさせればいいのです。コードの先頭にswitcherという新しい整数を作成します。

import processing.video.*;int switcher = 0;Capture cam;

スイッチャーの値から、カメラ映像の変化を判断することができるのです。スケッチは、その値が0に設定された状態で開始されます。ここで、ロジックを使用して画像の変化を変更することができます。このように描画メソッドを更新します。

void draw(){ if (cam.available()){ cam.read(); } if(switcher==0){ image(cam,0,0); } else if(switcher == 1){ scale(-1,1); image(cam,-width,0); } else if(switcher == 2){ scale(-1,-1); image(cam,-width,-height); } else{ println("Switcher = 0 again"); switcher = 0; }}

これで、switcherの値に応じて、3種類のコードすべてがトリガーされることになります。IfまたはIf else文のいずれかに一致しない場合、else句は0にリセットされます。ロジックは初心者が学ぶべき重要なスキルで、それらとYouTubeの優れたプログラミングチュートリアルでより多くを見つけることができます!

マウスを使う

ハンドリングには、マウスにアクセスするためのメソッドが組み込まれています。ユーザーがマウスをクリックしたことを検出するには、スクリプトの一番下にmousePressed関数を追加してください。

void mousePressed(){ switcher++;}

マウスクリックのリスニングを処理し、マウスクリックが検出されたときにこのメソッドを実行するようにプログラムを割り込ませる。このメソッドが呼ばれるたびに、switcherの値が1ずつ増加します。 スクリプトを保存して実行します。

これで、マウスボタンを押すと、ビデオをさまざまな方向にループして、元のビデオに戻ります。ここまでは映像を反転させただけですが、次はもう少し面白いことをやってみましょう。

エフェクトの追加

これで、有名なアンディ・ウォーホルのアートワークに似た4色のリアルタイム画像効果をコード化することができます。エフェクトを追加するには、ロジックに別の節を追加するだけでよい。最後のelse if文とelse文の間に、これをスクリプトに追加します。

else if(switcher == 3){ tint(256, 0, 0); image(cam, 0, 0, width/2, height/2); tint(0, 256, 0); image(cam, width/2, 0, width/2, height/2); tint(0, 0, 256); image(cam, 0, height/2, width/2, height/2); tint(256, 0, 256); image(cam, width/2, height/2, width/2, height/2);}

このコードでは、image関数を使用して、画面の各コーナーに4つの独立したカメラ画像を作成し、そのサイズを半分にします。

カラーリング機能は、各カメラ画像に色を追加する機能です。括弧内の数値は、赤、緑、青（RGB）の値です。次のコードをすべて選択した色で着色します。

保存して再生すると、結果を確認できます。各シェーディング関数のRGBの数値を変えて、色を変えてみてください

ネズミを追いかけさせる

最後に、Processing Libraryの便利な関数を使って、ライブ画像をマウスの位置に追従させるようにしましょう。これを残りのロジックの上に追加します。

else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2);}

ここでは、カメラ内の画像をmouseXとmouseYに位置づけています。 これらは、マウスが指しているピクセルを返す組み込みの処理値です。

以上、5種類のライブ映像をコードで表示しました。しかし、このコードを実行すると、いくつかの問題があることに気づきます。

コードを完成させる

ここまでで作成したコードは動作していますが、2つの問題があることに気がつきます。まず、4色のカラーチェンジが表示されると、それ以降はすべて紫になります。2つ目は、マウスで動画を動かすと軌跡が残ることです。draw関数の先頭に数行追加することで修正できます。

void draw(){ tint(256,256,256); background(0); //draw function continues normally here!

各フレームの開始時に、色相を白にリセットし、背景色を黒にすることで、映像の軌跡が残らないようにするコードです。これで、プログラムをテストすると、すべて正常に動作するようになりました。

オンラインゲームの効果：コードから見るアート

Processingは非常にパワフルで、いろいろなことができます。コードでアートを作るのに最適なプラットフォームですが、ロボットを制御するのにも同様にうまく機能します

Javaが苦手な方は、p5.jsという処理系のJavaScriptライブラリがあります。 ブラウザベースで、初心者でも素晴らしいリアクションアニメーションを作ることができますよ。

写真提供：Sydèu Producti***/Depositphotos