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

しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

Processingで電子アート入門

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

Processing.org

インストール

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

Download \ Processing.org

実装

円を描画

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);
}

参考URL

プログラミング初心者でも大丈夫!Processingでデジタルアートを作ろう | 株式会社LIG