デジタルアートをはじめたい人

デジタルアートといってもその意味はとても広く、プログラミングコードでグラフィックを作ってみたいと思う人、とりあえずどうしたら始められるのかな？という疑問に答える内容です。

本記事の内容
・デジタルアート初心者、おすすめ言語
・デジタルアートのセットアップ。Processing – IDE（統合開発環境）
・デジタルアートをWeb上で行う。p5.jsとOpen Processing
・デジタルアート制作でのProcessing以外の言語やツール

barbe_generative_diaryのProcessingを利用した表現。

デジタルアート初心者、おすすめ言語

デジタルアートをはじめる人へ、おすすめするプログラミング言語に“Processing”があります。Processingは、デジタルアート（電子アート）やビジュアルデザインのためのプログラム言語、視覚的なフィードバックが得られるため、プログラミングを学習するのにとてもおすすめです。

Processingには、インターネット上に、充実したリファレンス（資料）をはじめ、コミュニティが豊富にあり、困った時に調べたり、人に教えてもらうこともできます。

デジタルアートのセットアップ、Processing – IDE（統合開発環境）

Processingを利用するには、ProcessingのサイトからIDE（統合開発環境）をダウンロードおよびインストールが必要になります。

IDE（統合開発環境）とは、テキストエディタ、コンパイラ、リンカ、デバッガなど開発に必要なソフトウェアをひとつにまとめた開発環境のことです。これを利用することにより、開発環境の効率化を図ることができます。

① Processing – IDE（統合開発環境）をダウンロードおよびインストール

Processing公式サイトからそれぞれのパソコンに合ったファイルをダウンロードし、手順に沿ってインストールを行います。

» Processing Webサイト

② Hello Processing – IDEの使い方をテスト

IDEの使い方はとてもシンプル。エディターにコードを書き、左上、三角の実行ボタンを押すとプログラムが実行されます。とてもシンプルな下記サンプルを実行してみましょう。


void setup(){
  size(300,300);
}

void draw(){
  ellipse(width/2,height/2,50,50);
}

上記を実行すると真ん中に円が描かれます。基本的にProcessingを始める際、setup()とdraw()という二つの関数にてプログラムを実行します。プログラミングの細かな解説は省きますが、実行時、まずsetup()内が一度だけ実行され、その後draw()内が繰り返し実行されます。

上記であれば、setup( )内にて、size(300,300); // 横300,縦300のキャンバスをセット。その後、draw( )内にて、ellipse(width/2,height/2,50,50); //画面中央を原点に縦横50サイズの円の描画 を繰り返し実行しています。

② チュートリアルと入門書三冊

Processingのサイトには初心者向けチュートリアルも公開され学習できます。
» Processing Webサイト / チュートリアル

“Generative art のすすめ、ビギナーのためのProcessing 入門書３冊”では、Processing学習のおすすめを紹介しています。Processingは、Javaを簡易的に扱いやすくした言語。これらは、命令型プログラミング言語と呼ばれ、そのほかにC++やPythonなどあり、基礎となる扱い方はみな同じです。

デジタルアートをWebブラウザ上で – p5.jsとOpenProcessing

ProcessingはWebブラウザ上でも気軽に扱うことができます。p5.jsというProcessingのライブラリを利用することで、JavaScriptで動作させます。OpenProcessingというProcessing（p5.js）のコミュニティープラットフォームでは、世界中のたくさんのアーティストやプログラマーが集い、日々コードを制作、公開しています。

① p5.js Webエディター

p5.jsにはWebブラウザ上で実行できる“p5 Editor”が用意されています。p5.jsはJavaScriptのため、Processingとは少しだけ表記法や出来ることが違っていますが、基本的には同じです。

エディターを開くと、setup()関数とdraw()関数があり、それぞれにプログラムコードを書き実行します。実行すると画面右側に実行結果が表示されます。

② OpenProcessing

“OpenProcessing”ではエディター含め、自身の作品を公開したり、他の人の作ったプログラムを使って改変したりなど、Processing(p5.js)利用者のコミュニティープラットフォームです。登録して利用することができます。

③ Processing Foundation コミュニティ

“Processing Foundation”はProcessingに関する様々な情報を交換することできます。多くは英語ですが、プログラムにて困ったことを相談すると親切なユーザーが答えてくれます。このようなコミュニティが活発であることもProcessingの魅力のひとつです。

デジタルアート制作でのProcessing以外の言語やツール

・openframeworks
・TouchDesigner
・Houdini
・Max/MSP
・Pure Data
・VVVV
・Blender
・Maya
など、数多くあります。

Recommends on Amazon

Amazonのbarbe_generative_diary ページにて、使用している道具や機材、本棚にあるアートに関連する本などをまとめています。

barbe_generative_diary on Amazon