Home-theater-designers
処理は、コードを介してアートを作成できる強力なツールです。これは、グラフィックスを操作するためのJavaライブラリと、コードを簡単に記述して実行できる統合開発環境（IDE）の組み合わせです。
Processingを使用するグラフィックやアニメーションの初心者プロジェクトはたくさんありますが、ライブビデオを操作することもできます。
今日は、Processingビデオライブラリを使用して、マウスで制御されるさまざまな効果のライブビデオスライドショーを作成します。ライブビデオを反転するだけでなく、サイズ変更と色付け、およびマウスカーソルに追従させる方法を学習します。
プロジェクトの設定
始める、 ダウンロード処理 空白のスケッチを開きます。このチュートリアルはWindowsシステムに基づいていますが、Webカメラを備えたすべてのコンピューターで機能するはずです。
でアクセス可能なProcessingVideoライブラリをインストールする必要がある場合があります。 スケッチ>ライブラリのインポート>ライブラリの追加 。検索する ビデオ 検索ボックスに入力し、からライブラリをインストールします 処理財団 。
インストールすると、準備が整います。コーディングをスキップしたい場合は、 完全なスケッチをダウンロードする 。ただし、最初から自分で作成する方がはるかに優れています。
処理でWebカメラを使用する
ライブラリをインポートし、作成することから始めましょう 設定 関数。空白の処理スケッチに次のように入力します。
import processing.video.*;
Capture cam;
void setup(){
size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}
ビデオライブラリをインポートした後、 捕獲 と呼ばれるインスタンス オレンジ ウェブカメラからのデータを保存します。の 設定 、 NS サイズ 関数はを設定します 640x480 作業するピクセルサイズのウィンドウ。
次の行は割り当てます オレンジ の新しいインスタンスに 捕獲 、 にとって これ カメラに電源を入れるように指示する前に、ウィンドウと同じサイズのスケッチ cam.start（） 。
今のところ、これのすべての部分を理解していなくても心配しないでください。つまり、Processingにウィンドウを作成し、カメラを見つけてオンにするように指示しました。それを表示するには、 描く 関数。上記のコードの下、中括弧の外側にこれを入力します。
void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}
NS 描く 関数はフレームごとに呼び出されます。これは、毎秒何度も、 もしも カメラにはデータがあります 利用可能 あなた 読んだ それからのデータ。
このデータは、次のように表示されます。 画像 、その位置で 0、0 、ウィンドウの左上です。
スケッチを保存し、画面上部の再生ボタンを押します。
成功！によって保存されたデータ オレンジ フレームごとに画面に正しく印刷されています。問題が発生した場合は、コードを徹底的に確認してください。 Javaには、適切な場所にすべての角かっことセミコロンが必要です。処理にはWebカメラへのアクセスにも数秒かかる場合があるため、処理が機能していないと思われる場合は、スクリプトを起動してから数秒待ってください。
写真をめくる
ライブウェブカメラ画像ができたので、それを操作してみましょう。描画機能で、 image（cam、0,0）; これらの2行のコードで。
scale(-1,1);
image(cam,-width,0);
スケッチを保存して再実行します。違いがわかりますか？ネガを使用することによって 規模 値、すべて NS 値（水平ピクセル）が逆になりました。このため、ウィンドウの負の値を使用する必要があります 幅 画像を正しく配置します。
画像を上下逆さまに反転するには、わずか2、3の小さな変更が必要です。
scale(-1,-1);
image(cam,-width,-height);
今回は、両方 NS と と 値が反転し、ライブカメラの画像が上下逆になります。これまで、通常の画像、水平方向に反転した画像、および垂直方向に反転した画像をコーディングしてきました。それらの間を循環する方法を設定しましょう。
それを循環させる
毎回コードを書き直す代わりに、数字を使用してそれらを循環させることができます。新しいを作成します 整数 コードの上部にある スイッチャー 。
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;
}
}
これで、スイッチャーの値に応じて、コードの3つのバリエーションすべてがトリガーされます。それが私たちのいずれかと一致しない場合 もしも また それ以外の場合 ステートメント、 そうしないと 句は0にリセットされます。ロジックは学ぶための重要な初心者スキルであり、優れたYouTubeプログラミングチュートリアルでそれらについてさらに多くを知ることができます。
マウスの使用
処理には、マウスにアクセスするための組み込みメソッドがあります。ユーザーがマウスをクリックしたことを検出するには、 mousePressed スクリプトの下部にある関数。
常に最新のパッチがインストールされていることを確認する必要があります
void mousePressed(){
switcher++;
}
処理は、マウスのクリックをリッスンし、プログラムを中断して、このメソッドを検出すると実行します。メソッドが呼び出されるたびに、switcherの値は1つずつ大きくなります。スクリプトを保存して実行します。
これで、マウスボタンを押すと、元のビデオに戻る前に、ビデオのさまざまな方向が循環します。これまでのところ、ビデオをめくったところですが、もう少し面白いことをしましょう。
さらに効果を追加する
次に、有名なアンディウォーホルの芸術作品に似た4色のライブ画像効果をコーディングします。エフェクトを追加するのは、ロジックに別の句を追加するのと同じくらい簡単です。最後の間にこれをスクリプトに追加します それ以外の場合 ステートメント、および そうしないと 。
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);
}
このコードは 画像 画面の各隅に4つの別々のカメラ画像を作成し、それらをすべて半分のサイズにする機能。
NS 色合い 機能は、各カメラ画像に色を追加します。括弧内の数字は 赤、緑、青（RGB） 値。ティントは、以下のすべてのコードを選択した色で色付けします。
保存して再生し、結果を確認します。それぞれのRGB番号を変更してみてください 色合い 色を変える機能！
マウスに追従させる
最後に、Processingライブラリの便利な関数を使用して、ライブ画像をマウスの位置に追従させましょう。これを上に追加します そうしないと あなたの論理の一部。
else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}
ここでは、カメラからの画像を次の場所に配置しています。 mouseX と mouseY 。これらは、マウスが指しているピクセルを返す処理値に組み込まれています。
それでおしまい！コードによるライブビデオの5つのバリエーション。ただし、コードを実行すると、いくつかの問題に気付くでしょう。
コードの仕上げ
これまでに作成したコードは機能しますが、2つの問題に気付くでしょう。まず、4色のバリエーションが表示されると、その後はすべて紫に染まります。次に、マウスでビデオを移動すると、軌跡が残ります。描画関数の上部に数行追加することで修正できます。
void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!
各フレームの開始時に、このコードは色合いの色を白にリセットし、黒の背景色を追加して、ビデオが軌跡を残すのを防ぎます。プログラムをテストすると、すべてが完全に機能します。
ウェブカメラ効果：コードからのアート
処理は非常に強力であり、それを使用して多くのことを行うことができます。コードを使ってアートを作成するための優れたプラットフォームですが、ロボットの制御にも同様に適しています。
Javaが気に入らない場合は、Processingに基づくp5.jsというJavaScriptライブラリがあります。これはブラウザベースであり、初心者でも素晴らしいリアクティブアニメーションを作成するために使用できます。
画像クレジット：Syda_Productions / ✓
共有 共有 つぶやき Eメール メールが本物か偽物かを確認する3つの方法少し疑わしいメールを受け取った場合は、その信頼性を確認することをお勧めします。メールが本物かどうかを判断する3つの方法があります。
次を読む 関連トピック- プログラミング
- Java
- ウェブカメラ
- 処理
- コーディングチュートリアル
Ian Buckleyは、ドイツのベルリンに住むフリーランスのジャーナリスト、ミュージシャン、パフォーマー、ビデオプロデューサーです。マッドサイエンティストになることを期待して、執筆中やステージ上にいないときは、DIYの電子機器やコードをいじっています。
イアン・バックリーのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください