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

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

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

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

どんなものが作れるのか

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を参照ください。
Reference / Processing.org

アニメーションの作成

今のままではおもしろくないので、アニメーションを作成したいと思います。
アニメーションを作成するには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;
  }
}