DBN→Procesing→oF

## はじめに
　クリエイティヴコーディング系でとりわけ活躍しているopenFrameworks、クリエイティヴコーディングは一貫してアーティストやデザイナーのための制作環境を提供していますが、今回はoFを含め、源流であるDesign By NumbersとProcessingについて導入的な説明をしようと思います。

* 0.DBN
* 1.Processing
* 2.openFrameworks


## 0.Design By Numbers
　Design By Numbers(DBN)は、MITのJohn Maeda氏によって作成されたプログラミング経験のないアーティストやデザイナーのための環境。あくまで制作のためのツールではなく、コンピューターでビジュアルを表現することの基礎概念や方法論など<b>導入としてのツール</b>である。そのため、CやJAVAのような汎用的なプログラミングはできない。Processingの原型。
![Screenshot_2.png](https://qiita-image-store.s3.amazonaws.com/0/104234/dc9b42e0-12a3-442c-f7a1-7df2f8ba4af5.png "Screenshot_2.png")
*[エディタ画面]：テキストエディットエリア、▶実行ボタン、◼︎停止ボタン、ライブラリインポートボタンなどプログラマはコードを書いて実行ボタンを押す。*


## 1.Processing
　Processingは、2001年MITのBen FlyとCasey Reasらが教育目的でビジュアルやオーディオ制作のための開発環境。日本では、武蔵美、多摩美、東京芸大などの芸術系大学のクラスで使われている。

![スクリーンショット 2016-03-25 14.35.05.png](https://qiita-image-store.s3.amazonaws.com/0/104234/361fee8a-e429-5bc8-afd2-26aea2055b13.png "スクリーンショット 2016-03-25 14.35.05.png")



*[エディタ画面]：DBNを原型にしているため、非常に似通ったフロントデザイン。テキストエディットエリア、▶実行ボタン、◼︎停止ボタンなどプログラミングが可能。コード書いて実行ボタンを押すだけ。*


### 対応プラットフォーム

* Mac
* Windows
* Linux



### jsライブラリ

* Processing.js
* p5.js

Processing用のJsライブラリも用意されている。webブラウザからでもProcessingの表現が可能である。


### 関連プロジェクト/デモンストレーション

* [福島の形相](http://www.tamabi.ac.jp/pro/g_works/2014/id/s7/)
* [□□□（クチロロ）／あたらしいたましい feat. 金田朋子](https://www.youtube.com/watch?v=ZwGpF9hOdSQ)
* [unnamed soundsculpture](http://wearechopchop.com/%E2%80%9Cunnamed-soundsculpture%E2%80%9D/)
* [extracts of local distance](http://www.localdistance.org/)
* [andress koller philipp steinweber](http://andreaskoller.com/Similar-Diversity)
* [https://processing.org/exhibition/](https://processing.org/exhibition/)

### 資料

* [Learning Processing](http://goo.gl/GMNVzQ)
* [Nature of Code -Processingではじめる自然現象のシミュレーション](http://goo.gl/vujh3w)
* [Generative Design ―Processingで切り拓く、デザインの新たな地平](http://goo.gl/iulNLC)
* [OpenProcessing](http://www.openprocessing.org/)



## 3.openFrameworks
　openFrameworks(oF)は、Zach Lieberman、Theodore WatsonArturo Castroの三人を中心として開発されたProcessingの思想を受け継ぐC++のフレームワーク。ネイティヴアプリケーションの開発ができるため、マシンパワーを限界まで引き出した表現が可能。Processingでパーティクル10,000描画するとFPS落ちするが、同じ実装方法をoFでやると余裕だったりする。
![スクリーンショット 2016-03-25 19.01.35.png](https://qiita-image-store.s3.amazonaws.com/0/104234/70b4dcb6-ba51-0149-9a69-c3f531a7bb80.png "スクリーンショット 2016-03-25 19.01.35.png")
*[エディタ画面]：MacはXcodeから開発する。ビルドの設定やaddonの追加など、Processingよりも気を使う部分が多い*



### 対応プラットフォーム

* Mac
* Windows
* Linux
* Android
* iOS

　Macで開発している開発者が多いが、oFはLinuxにも対応しているため、Raspberry Pi上でも動く。また、Kinect V2(Macにもaddonsは存在する)やOculusなどWindowsしか対応していないデバイスもあるため、プロジェクトによってはWindows環境も必要になってくる場合がある。AndroidやiOSアプリケーションも開発可能。


### 関連プロジェクト/デモンストレーションなど

* [[BRDG020] Lilium](https://vimeo.com/117162623)
* [YAPORIGAMI X HEXPIXELS @ Meme City, Hangzhou](https://youtu.be/4DTZUdYQnIE?list=PLC2JoOQW6MAfYHu_osRhoFHpJoL2UjiHS)
* [SJQ++ [SJQ×kezzardrix] at UrBANGUILD(Kyoto),2012](https://www.youtube.com/watch?v=qT5a4GL_U5w)
* [The Flickers / midnight express](http://k-s-m-r.blogspot.jp/2014/05/mv.html)
*[漫画の吹き出しをリアルタイムに表示してみた](http://hackist.jp/?p=2979)
* [System04 : tension](https://youtu.be/uHjU7_7bPuE)
* [七色小道 ](http://teruaki-tsubokura.com/works.php?ar_id=7)
* [Google Cloud Vision API (Limited Preview) をoFで触ってみる。](http://blog.rettuce.com/openframeworks/google-cloud-vision-api-limited-preview/)
* [Reactor for Awareness in Motion](http://special.ycam.jp/ram/)
* [Face substitution](https://auduno.github.io/clmtrackr/examples/facesubstitution.html)
* [This City – Audio-visual performance of a simulated world](http://www.creativeapplications.net/openframeworks/this-city-audio-visual-performance-of-a-simulated-world/)
* [ofxBullet - sweet RagDoll Demo](https://vimeo.com/16839538)
* [Abstract Wall](https://vimeo.com/68852188)
* [thema golan levin zachary lieberman](http://www.flong.com/projects/messa/)

### 資料
* [http://yoppa.org/](http://yoppa.org/)
* [Beyond Interaction[改訂第2版]](http://goo.gl/lun68m)
* [Mastering openFrameworks](http://goo.gl/QwT7zp)
* [ofBook](http://openframeworks.cc/ofBook/chapters/foreword.html)
* [forum openFrameworks](https://forum.openframeworks.cc/)
* [プログラミングを用いた映像制作のコツ
～パタンの組み合わせと繰り返し～](http://www.ameet.jp/digital-imaging/digital-imaging_20130831/)