読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【57:Processing入門】プログラミングによる視覚的な表現

one's wayプロジェクト processing

f:id:seintoseiya:20160416184306p:plain
プロジェクトNo.57:Processing入門

近年、インスタレーションメディアアートという言葉が取り上げられるようになってきています。
私はグラフィックデザイナーを目指している訳ではありませんが、デザインやアートは好きなので、自分の得意分野であるテクノロジーの側面から様々な表現方法を模索していこうと思っています。

Processingはそんな電子アートとビジュアルデザインのためのオープンソースのプログラミング環境です。

どんなものが作れるのか

オーディオビジュアライザー作品

www.youtube.com

PerfumeのモーションデータをProcessingで動かした作品

www.youtube.com

Kinect+Processing+ホログラフィック3Dスクリーンを使った作品

www.youtube.com

Processingのインストール

公式サイトからダウンロードして、インストール。
Download \ Processing.org

Sketchの作成

Processingでは一つの作品の単位を「Sketch」と呼ぶ。
Processingを起動したら以下の様にエディターが表示される。
f:id:seintoseiya:20160416184423p:plain
まずは何も考えずに以下のソースコードをコピペ。

void setup(){
    size(600, 400);
    background(255);
    rect(250, 150, 100, 100);
}

実行

左上の実行ボタンを押して、プログラムを実行する。
f:id:seintoseiya:20160416184354p:plain
画面に四角が描画されました。
基本的な流れはこれだけ。

(ちょっとだけ)プログラム解説

先ほどのプログラムはJavaをベースとおり、
void setup(){}の中に描画したいコードを書いていく。
ここでは以下の関数を使用。

  • size(x, y) : 描画領域の大きさを指定
  • background(0~255) : 背景色を指定(rgbやreba指定もできる)
  • rect(x, y, width, height) : 矩形(長方形、正方形)を描画

その他の関数はReferenceを参照ください。
Language Reference (API) \ Processing 2+

アニメーションの作成

今のままではおもしろくないので、アニメーションを作成したいと思います。
アニメーションを作成するにはvoid draw(){}を使います。

void setup(){
    size(600, 400);
    background(255);
    frameRate(5);
}
 
// draw() executes in each second 
void draw(){
  float x = 300;
  float y = 200;
  float r = random(10, 50);
  fill(255, 90);
  noStroke();
  rect(0, 0, 600, 400);
  x = x + random(-5, 5);
  y = y + random(-5, 5);
  int i = 0;
  while(i < 10){
    fill(random(255), random(255), random(255));
    noStroke();
    ellipse(x + random(-300, 300), y + random(-200, 200), r, r);
    i = i + 1;
  }
}

draw内のコードは1秒間の間にフレームレートの数(初期値は60)だけ繰り返し実行されます。
ここでは円をランダムに表示するプログラムを作成しました。
結果はこちら↓
f:id:seintoseiya:20160416184443g:plain

エクスポート

最後に[ファイル]-[アプリケーションとしてエキスポート]から、
WindowsMacで実行できる形式のファイルとしてエキスポートできます。

関連アプリ・書籍

Processingをはじめよう (Make: PROJECTS)

Processingをはじめよう (Make: PROJECTS)

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

  • 作者: マット・ピアソン,Matt Pearson,久保田晃弘,沖啓介
  • 出版社/メーカー: ビー・エヌ・エヌ新社
  • 発売日: 2014/11/21
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る
Processing:ビジュアルデザイナーとアーティストのためのプログラミング入門

Processing:ビジュアルデザイナーとアーティストのためのプログラミング入門