Processingで電子アート入門

Processingという電子アート用の開発環境を試してみました。

インストール

下からアプリをダウンロードします。

Processingを起動すると以下のような画面になっています。
ここにコードを書いていきます。

f:id:llcc:20170403222211p:plain

Processingでは主に下の2メソッドに処理を書いていきます。
setupは最初に一度だけ呼ばれるメソッド、drawは毎秒呼ばれるメソッドです。

void setup() {
}

void draw() {
}

円の描画はellipseメソッドを使います。
第一引数、第二引数は中心のxyで第三引数と第四引数は横幅と縦幅になります。

void setup() {
  ellipse(50, 50, 40, 40);
}

実行すると以下のように円が表示されます。

f:id:llcc:20170403222801p:plain

背景色を変える場合はfillメソッドを使います。

void setup() {
  fill(51, 51, 204);
  ellipse(50, 50, 40, 40);
}

f:id:llcc:20170403223656p:plain

線を引くにはLineメソッドを使います。
最初の2つの引数が始点の座標、次の2つが終点の座標です。

void setup() {
  line(10, 30, 90, 70);
}

f:id:llcc:20170403223906p:plain

線の色はstrokeメソッドで変更します。

void setup() {
  stroke(51, 51, 204);
  line(10, 30, 90, 70);
}

文字の表示はtextメソッドを使います。

void setup() {
  text("Hello!!", 50, 50);
}

f:id:llcc:20170403224100p:plain

クリックしているかどうかはmousePressedを使えば取得できます。
drawは毎秒呼ばれるので、ここでmousePressedを使った判定式を書けばクリック時に処理させる事ができます。

void draw() {
  if (mousePressed)
    ellipse(50, 50, 40, 40);
}