Processingでデジタルアートに挑戦

[Myuon Corp. Advent Calendar 2016](http://qiita.com/advent-calendar/2016/myuon) 11日目です。

---
![1024px-Processing_Logo_Clipped.svg.png](https://qiita-image-store.s3.amazonaws.com/0/41522/39acef35-473b-7ba4-f3e5-b6cca2d7fa27.png)

# Processingとは

> Processing（プロセシング）は、キャセイ・レアス（英語版）（Casey Reas）とベンジャミン・フライ（英語版）（Benjamin Fry）によるオープンソースプロジェクトであり、かつてはMITメディアラボで開発されていた。
> 電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である。アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。
> 視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Java を単純化し、グラフィック機能に特化した言語といえる。

*[Processing - Wikipedia](https://ja.wikipedia.org/wiki/Processing)*

複雑なアニメーションやインタラクションなど、プログラミング初心者でも比較的簡単に作成することができます。普段 illustrator や photoshop を扱うデザイナーさんや、プログラミングにチャレンジしてみたい学生さんなど、視覚的に無料で楽しく学べるソフトウェアです。

以下のような作品が Processing で作成することが可能みたいです。

[![](https://qiita-image-store.s3.amazonaws.com/0/41522/85bc03bf-1be1-9183-a6ff-a4b1b9655612.png)](https://vimeo.com/385015)

[![](https://qiita-image-store.s3.amazonaws.com/0/41522/246e23ff-4b0f-dcce-29c3-68df652f387d.png)](https://vimeo.com/1307981)

[![](https://qiita-image-store.s3.amazonaws.com/0/41522/808f6cd6-e3ed-3e23-686d-38b3ec7cf14d.png)](https://vimeo.com/246785)



## iTunesのビジュアライザに使われていた
![itunes.png](https://qiita-image-store.s3.amazonaws.com/0/41522/d10e0fe4-e51b-4f44-f14b-e31e937151ab.png "itunes.png")


「 **Magnetosphere** 」と呼ばれる iTunes のビジュアライザのプロトタイプにも Processing 使用されていたようです。

[![](https://qiita-image-store.s3.amazonaws.com/0/41522/951e8949-6377-9d22-913c-ac15c1e07bff.png)](https://vimeo.com/8581392)


## ブラウザでも動かせる
![p5js.png](https://qiita-image-store.s3.amazonaws.com/0/41522/16a105e1-607e-16cc-cb67-b7d0b93177e4.png "p5js.png")

[p5.js](https://p5js.org)というライブラリを使用することでブラウザ上で動かすことも可能です。

- [メディアアート系で重要な数式・概念 & p5.jsで遊ぶ - Qiita](http://qiita.com/hp0me/items/8f43ad146744310664ae)

そのほかにも[Python用のライブラリ](http://py.processing.org)や[Android用のライブラリ](http://android.processing.org)もあるようです。

## ハードウェアとの連携もできる
Processingは、ジェスチャーによってコンピュータの操作ができる入力機器 [Leap Motion](https://ja.wikipedia.org/wiki/Leap_Motion) との連携や、ワンボードマイコンの[Arduino](https://ja.wikipedia.org/wiki/Arduino)との連携も可能です。

[![](https://qiita-image-store.s3.amazonaws.com/0/41522/81cb872c-a457-b6a3-7488-6c8cce9319dc.png)](https://vimeo.com/60172427)

[![](https://qiita-image-store.s3.amazonaws.com/0/41522/29ad874c-bdda-5669-a16d-d7ef8731b2ae.png)](https://www.youtube.com/watch?v=Qe9nEIAdiXo)

ますますチャレンジしてみたくなりますね。では早速Processingのインストールの説明に入りたいと思います

# Processingのインストール方法
![スクリーンショット 2016-12-10 12.05.08.png](https://qiita-image-store.s3.amazonaws.com/0/41522/086c4f10-9604-cbd7-60c7-4612747b54bc.png "スクリーンショット 2016-12-10 12.05.08.png")

[こちら](https://processing.org/download/)からダウンロード。Windows / Linux / Mac OS X がサポートされてます。

起動するとこんな感じ。（Arduinoのエディターに似てますね）
![スクリーンショット 2016-12-10 12.23.15.png](https://qiita-image-store.s3.amazonaws.com/0/41522/1eafb0c8-3492-7144-b6bc-0618a0eda246.png "スクリーンショット 2016-12-10 12.23.15.png")


# 実際にコードを書いてよう

## 図形を描いてみよう
### 線
```java
// 表示ウィンドウのサイズを指定（単位: ピクセル）
size(300, 300);

// 線を描く 座標2点を指定
line(20, 50, 280, 250);
```
![スクリーンショット 2016-12-10 13.01.39.png](https://qiita-image-store.s3.amazonaws.com/0/41522/1ef3b861-fb26-6e76-9a3e-59f2302e5159.png "スクリーンショット 2016-12-10 13.01.39.png")

### 円
```java
size(300, 300);
ellipse(150, 150, 180, 180);
```

![スクリーンショット 2016-12-10 22.20.29.png](https://qiita-image-store.s3.amazonaws.com/0/41522/6f0ba5e0-453f-6690-38d7-7547a93e595d.png "スクリーンショット 2016-12-10 22.20.29.png")

### 三角形
```java
size(300, 300);
triangle(150, 20, 280, 280, 20, 280);
```


![スクリーンショット 2016-12-10 22.25.07.png](https://qiita-image-store.s3.amazonaws.com/0/41522/e43a5b2c-e752-3dff-ddc9-47de225cd263.png "スクリーンショット 2016-12-10 22.25.07.png")




## 図形を動かしてみよう
マウスカーソルの座標に矩形を回転させながら表示してみました。


![2.gif](https://qiita-image-store.s3.amazonaws.com/0/41522/e96b981e-b512-a039-74c2-f8e2cd8ce6fa.gif)


```java
float angle = 0;

void setup() {
  size(600, 600);
  background(255);
}

void draw() {
  translate(mouseX, mouseY);
  rotate(angle);
  rect(0, 0, 50, 50);
  angle += 0.1;
}
```

# 終わりに
こんな手軽にデジタルアートを描けるのはいいですね。次はもっと高度でグラフィカルなものを作ってみたいと思います。