多摩美 – メディア芸術演習 VI – メディア・アート II 2014

第1回: クリエイティブコーディングの現状、openFrameworksのセットアップ

September 6, 2014

2014年、クリエイティブコーディングの状況

この演習の火曜日（田所担当）では、コード（プログラム）を使用して作品を制作するための技術を実践的に学びます。

現在、こうしたアート、デザインといった表現のためのコーディング環境は「クリエイティブ・コーディング」と呼ばれ、徐々に注目を集めるようになってきています。初回の授業の今回は、まずこうした「クリエイティブ・コーディング」をとりまく現状を紹介し、それが自身の作品にどう生かすことができるのか考えていきましょう。

参考: The Art of Creative Coding

参考サイト: CreativeApplications

Creative Applications

Processing

Processingは、2001年に当時MITメディアラボの学生であった、Casey ReasとBen Fryによって開発された、オープンソースのプログラミング言語であり、統合開発環境（IDE）です。Processingのアニメーションの基本構造、setup → draw という考え方は、それに続くopenFrameworksやCinderといった開発環境に大きな影響を与えています。

Processingは、Javaをベースに作られています。文法がシンプルでわかりやすく、グラフィカルな表現、アニメーション、3D、インタラクションといった作品制作に活用可能な多くの機能が提供されているので、コードによる表現を始めてみたい場合、まずProcessingから始めることをお勧めします。

2014年9月現在の安定版は、ver.2.2.1です。また、プレリリース版として、ver.3.0a3が出ています。

参考図書:

参考: Hello Processing

Hello Processing

openFrameworks

openFrameworksは、シンプルで先端的なフレームワークによって創作活動を支援するためのオープンソースのC++ツールキットです。openFrameworksの特徴は、メディアアートやインタラクティブなプロジェクトを制作する際に必要となる様々なライブラリーを、すぐに使えるようにパッケージングした点といえます。

グラフィクス： OpenGL, GLEW, GLUT, libtess2, cairo
オーディオの入出力と分析：rtAudio, PortAudio, OpenAL, Kiss FFT, FMOD
フォント： FreeType
イメージの読込と保存： FreeImage
動画の再生と取込： Quicktime, GStreamer, videoInput
様々なユーティリティー： Poco
コンピュータービジョン: OpenCV
3Dモデルの読み込み : Assimp

つまりopenFrameworksには、それ自身に先進的な機能があるわけではありません。openFrameworksの価値は、むしろ既存の技術を使いやすい形で統合的に扱えるという点にあります。このことを例えて、ソフトウェア開発のための「糊」のようなものと例えられることもあります。

openFrameworksは、openFrameworksはザック・リーバーマン(Zach Lieberman)、セオドア・ワトソン(Theodore Watson), アルトロ・カストロ(Arturo Castro)を中心にして、oFコミュニティーとともに開発されています。

参考: oF Showreel

OF Showreel from openFrameworks on Vimeo.

参考図書:

Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド

Cinder

Cinderは、比較的新しい開発環境で、2010年にBarbarian GroupのAndrew Bellを中心に開発されました。openFrameworksと同様にC++をベースにしています。Cinderの特徴は、後発の環境であるという利点から、BoostライブラリーなどC++の新しい機能を積極的に取り入れて、よりモダンな開発環境を目指しているという印象を受けます。

参考: Addition/Subtraction（Flight 404）

Addition/Subtraction from flight404 on Vimeo.

vvvv

vvvvは簡単なプロトタイピングや開発に特化したプログラミング環境で、その特徴は、Max/MSPやPdに似た、ビジュアルプログラミングが可能な点でしょう。フィジカルインタフェース、リアルタイムモーショングラフィックス、オーディオ、ビデオなどをたくさんの人が同時に操作するようなマルチメディア環境を簡単に構築できるように設計されています。

joreg、Max Wolf、Sebastian Gregor、Sebastian Oschatzを中心とした、vvvv groupにより開発、運営されています。

参考図書

Pure data

Pure Data（Pd）は、オープンソースのビジュアルプログラミング環境で、音響合成やサンプリングしたデジタルサウンドの処理、MIDIやOSCなどのコントロール信号のやりとり、2Dや3Dにグラフィクス、デバイスとの連携などが可能です。1996年にMiller Pucketteによって開発され、現在も開発は継続しています。

Pdには、大きく分けて2つのバージョンがあります。

Pd vanilla : Miller Pucketteによって書かれた、Pure Dataのコア機能。音声信号の処理とMIDIの処理に焦点を絞っている。
Pd extended : Pdコミュニティーにより開発された様々なライブラリーを統合したバージョン。グラフィクス用ライブラリ（GEM）や、OSCによるコミュニケーション、オーディオビジュアル、物理モデル、センサー技術など様々な機能を盛り込んでいる。

参考図書

Javascript libraries

Webの技術は、2000年代後半あたりを境に急激に変化しつつあります。その変化を一言でいうと、Webブラウザが扱う対象が「文書」から「アプリケーション」になったことです。

誕生当初のWWWは、科学技術文書を公開し共有するための仕組みでした。しかし現在は、オーディオやビデオなどのマルチメディア、ショッピング、地図やスケジューラーやワードプレセッサーといったアプリケーション、さらにはそれ自身がオペレーションシステムとして使用されるようになり、様々な機能を含む広い概念へと進化しています。

そうした位置付け、機能の進化にあわせて、WWWを構成する技術も大きく変化してきました。そして今もなお変化する途上にあります。

現在のWWWを構成する技術は、代表的なものだけでも数多くあげられます。

Javascript
HTML5
Offline web, Local storage
Vieo, Audio
Canvas
WebGL

参考：The Evolution of the Web（Webの進化）

こうした環境の変化をうけて、Web制作のための様々なフレームワーク、ライブラリが登場しています。ここでは、主にグラフィックとサウンドに関するJavascriptのライブラリーの代表的なものを紹介します。

p5.js

p5.jsは、Processingの文法をJavascriptでも使用できるようにしたライブラリです。同じようなJavascriptのライブラリとしてProcessing.jsがあります。両者はよく似ているのですが、Processing.jsが、Java版のProcessingのコードをそのまま動かすことができるように設計されているのに対して、p5.jsはよりJavasciriptに近づけた文法になっています。

例えば、setup〜drawというProcessingの基本的な構造を記述する場合、Processing.jsであれば以下のようにJava版と変わりません。

void setup(){
  ...
}

void draw(){
  ...
}

一方、p5.jsでは、Javascirptの関数の定義の方法を採用しています。

function setup() {
  ...
}

function draw() {
  ...
}

p5.jsの利点は、よりJavascriptのネイティブの機能に近いため、他のHTML5のオブジェクトとの連携が容易な点です。例えば、HTMLでボタンやスライダーをデザインして、その値をp5.jsで受けて描画するというようなことが可能です。また、サウンド機能のライブラリなども用意されています。

参考: Hello p5.js

http://hello.p5js.org/

Three.js

Three.jsは、Mr.Doobを中心にオープンソースで開発が進められている、Webブラウザで3Dグラフィクスを高速に表示する仕組み「WebGL」のためのライブラリです。Three.jsはWebGLの冗長な仕様をうまく吸収して、扱いやすいインターフェイスでWebGLのプログラミングができるように工夫されています。現在では、WebGLにおけるデファクトスタンダードに近い扱いとなっています。コンピューターのGPU（グラフィクスカード）をフルに活用して表示するので、非常に高速な3D表示が可能となります。

参考: Chrome Experiments > WebGL Experiments

d3.js

d3.jsは、データビジュアライゼーションに特化した、Javascriptのライブラリです。Scalable Vector Graphics（SVG）、JavaScript、HTML5をフルに活用して、読み込んだデータを動的に表示することが可能です。Michael Bostock、Jeffrey Heer、Vadim Ogievetskyを中心に、オープンソースで開発が進められています。

d3.jsは、NYTimesの記事内で用いられるデータビジュアライゼーションに使用されていることでも有名です。NYTimesの記事は以下にアーカイブされています。

openFrameworksのセットアップ

前半でみてきたように、現在、様々な開発フレームワーク、ライブラリ、言語が存在しています。そして、それらの多くはオープンソースで公開されていて、フリーで利用することが可能です。それぞれ得意不得意があるのですが、この演習では、差し当って汎用的にプログラミングが可能でさらに処理速度や拡張性に優れているという観点から、openFrameworksを使用することにします。

後半は、openFrameworksの環境設定をしていきましょう。

openFrameworksのセットアップの手順は、openFrameworksの公式サイトにとてもよくまとまった資料があります。こちらを参照しながらセットアップを進めていきましょう。

それぞれの開発環境でセットアップを完了したら、付属のサンプルをビルドして、openFrameworksでどのようなことが可能なのか、体験してみてください。