Myuon Corp. Advent Calendar 2016 11日目です。
Processingとは
Processing（プロセシング）は、キャセイ・レアス（英語版）（Casey Reas）とベンジャミン・フライ（英語版）（Benjamin Fry）によるオープンソースプロジェクトであり、かつてはMITメディアラボで開発されていた。
電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である。アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。
視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Java を単純化し、グラフィック機能に特化した言語といえる。
複雑なアニメーションやインタラクションなど、プログラミング初心者でも比較的簡単に作成することができます。普段 illustrator や photoshop を扱うデザイナーさんや、プログラミングにチャレンジしてみたい学生さんなど、視覚的に無料で楽しく学べるソフトウェアです。
以下のような作品が Processing で作成することが可能みたいです。
iTunesのビジュアライザに使われていた
「 Magnetosphere 」と呼ばれる iTunes のビジュアライザのプロトタイプにも Processing 使用されていたようです。
ブラウザでも動かせる
p5.jsというライブラリを使用することでブラウザ上で動かすことも可能です。
そのほかにもPython用のライブラリやAndroid用のライブラリもあるようです。
ハードウェアとの連携もできる
Processingは、ジェスチャーによってコンピュータの操作ができる入力機器 Leap Motion との連携や、ワンボードマイコンのArduinoとの連携も可能です。
ますますチャレンジしてみたくなりますね。では早速Processingのインストールの説明に入りたいと思います
Processingのインストール方法
こちらからダウンロード。Windows / Linux / Mac OS X がサポートされてます。
起動するとこんな感じ。（Arduinoのエディターに似てますね）
実際にコードを書いてよう
図形を描いてみよう
線
// 表示ウィンドウのサイズを指定（単位: ピクセル）
size(300, 300);
// 線を描く 座標2点を指定
line(20, 50, 280, 250);
円
size(300, 300);
ellipse(150, 150, 180, 180);
三角形
size(300, 300);
triangle(150, 20, 280, 280, 20, 280);
図形を動かしてみよう
マウスカーソルの座標に矩形を回転させながら表示してみました。
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;
}
終わりに
こんな手軽にデジタルアートを描けるのはいいですね。次はもっと高度でグラフィカルなものを作ってみたいと思います。