processing
art
digital

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

More than 1 year has passed since last update.

Myuon Corp. Advent Calendar 2016 11日目です。


1024px-Processing_Logo_Clipped.svg.png


Processingとは


Processing(プロセシング)は、キャセイ・レアス(英語版)(Casey Reas)とベンジャミン・フライ(英語版)(Benjamin Fry)によるオープンソースプロジェクトであり、かつてはMITメディアラボで開発されていた。

電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である。アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。

視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Java を単純化し、グラフィック機能に特化した言語といえる。


Processing - Wikipedia

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

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


iTunesのビジュアライザに使われていた

itunes.png

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


ブラウザでも動かせる

p5js.png

p5.jsというライブラリを使用することでブラウザ上で動かすことも可能です。

そのほかにもPython用のライブラリAndroid用のライブラリもあるようです。


ハードウェアとの連携もできる

Processingは、ジェスチャーによってコンピュータの操作ができる入力機器 Leap Motion との連携や、ワンボードマイコンのArduinoとの連携も可能です。

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


Processingのインストール方法

スクリーンショット 2016-12-10 12.05.08.png

こちらからダウンロード。Windows / Linux / Mac OS X がサポートされてます。

起動するとこんな感じ。(Arduinoのエディターに似てますね)

スクリーンショット 2016-12-10 12.23.15.png


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


図形を描いてみよう


// 表示ウィンドウのサイズを指定(単位: ピクセル)

size(300, 300);

// 線を描く 座標2点を指定
line(20, 50, 280, 250);

スクリーンショット 2016-12-10 13.01.39.png


size(300, 300);

ellipse(150, 150, 180, 180);

スクリーンショット 2016-12-10 22.20.29.png


三角形

size(300, 300);

triangle(150, 20, 280, 280, 20, 280);

スクリーンショット 2016-12-10 22.25.07.png


図形を動かしてみよう

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

2.gif

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


終わりに

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