ビジュアル系プログラミング環境、Processingについて

こんにちは。エンジニアのN.Hです。

今日はビジュアル系プログラミング環境、Processingについてご紹介したいと思います。

■Processingとは


Processingは、もともとMITメディアラボで開発されていた、ビジュアルデザイン、インタラクションデザイン系プログラミングに特化した、プログラミング環境です。

https://processing.org/


■特徴


・すぐに形に出来る
「setup()」で初期設定を行い、「draw()」にリアルタイム系の処理をガンガンかいていき、即結果を確認できます。もちろん、クラスを分けてある程度の規模のコードを書く事も可能です。

・専用のIDE(PDE)がある
開発は、PDEと呼ばれる付属のIDEで行いますが、外部エディタを使う事も可能です。

・そのままWebで動く
Processing.jsを使うと、WebでそのままProcessingのコードが動作します。

http://processingjs.org/


■基本


まず、公式のTutorialベースで、基本的な書き方を見ていきましょう。

Getting Started
https://processing.org/tutorials/gettingstarted/

マウス座標位置に円を描画し、マウスクリックで円が黒くなるプログラムです。

void setup() {
  size(480, 120); //キャンバスのサイズ
}
void draw() {
  if (mousePressed) {
    fill(0); //黒で塗りつぶし
  } else {
    fill(255); //白で塗りつぶし
  }
  ellipse(mouseX, mouseY, 80, 80);//マウス位置に円を描画
}

上記のコードをPDEにコピペし、再生ボタンを押すと、
Javaアプレットが開き、実行されます。

Processingでは、setupに準備系の処理を記述し、drawループに描画処理を記述します。
「mousePressed」は既存のマウスイベントで、「mouseX, mouseY」は
システム変数ですので、いきなりこのような書き方が可能です。

次に、公式サイトのExamplesを眺めてみます。



width, height
https://processing.org/examples/widthheight.html

width, heightがシステム変数で用意されており、画面の幅と高さが取得できます。


Shape Primitives
https://processing.org/examples/shapeprimitives.html

triangle, quad, ellipse, arcなどでシェイプが描画できます。


Primitives 3D
https://processing.org/examples/primitives3d.html

box, sphereなどの3Dプリミティブも用意されています。



■サンプルプログラム

Processingでは、マイク入力を簡単に扱えます。このマイク入力を使った簡単なプログラムを書いてみます。ついでに秒針も表示してみます。

マイク入力の波形+秒針を表示する


import ddf.minim.*;

//Minim
Minim minim;
AudioInput input;
int waveHeight = 2000;

//Size
int windowWidth = 500;
int windowHeight = 500;
int centerX, centerY;
  
//Time
float secRadius;

void setup() {
  //Initialize Minim and Audio Input
  minim = new Minim(this);
  input = minim.getLineIn(Minim.STEREO,windowWidth);

  //Set Window Size and Center Pos.
  size(windowWidth, windowHeight);
  centerX = width / 2;
  centerY = height / 2;
  
  //Set Second Radius
  secRadius = width * 0.72;
}
 
void draw() {
  background(127);
  smooth();
  
  //Draw Audio Wave
  for(int i = 0; i < input.bufferSize()-1; ++i){
    point(i, centerX / 2 + input.left.get(i) * waveHeight);
    point(i, centerX / 2 * 3  + input.right.get(i) * waveHeight);
  }
  
  //Draw Sec. Line and Circle
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  line(centerX, centerY, centerX + cos(s) * secRadius, centerY + sin(s) * secRadius);
  ellipse(centerX, centerY, second() * 2, second() * 2);
}
 
void stop() {
  input.close();
  minim.stop();
  super.stop();
}


結果は以下です。



■まとめ

このように、非常に簡単に、アイデアを形にする事が出来ました。
前回ご紹介したfluxusと同様、うまく活用したいと思います。


トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

0 件のコメント:

コメントを投稿