この記事について
ひとまとめにCreative Codingって言っちゃっていますが、映像や音響を扱うコーディング環境についてのメモです。それ系の人が集まってるオンラインID的なもの（Playground / Live Coding）やらビジュアルプログラミング環境、言語処理系、フレームワークなんかを含んでいます。面白い物をみつけ次第追記したい次第。
Playground
wonderfl
Webと言いながらいきなりFlashですが日本の老舗。KAYACさんが運営しているコード編集・共有サイト。ActionScript BeautilCodeって本が出ていて、このサイトの有名作品についてジャンルごとにまとめて簡単な解説がついてます。ActionScript知らなくても、ECMAScriptベースでclass構文と型が増えた程度なので読む分にはJSの知識で十分だし、すぐ書けるようになります。
自分も最初はここで色々と人のコード読んで勉強しました。Saqooshaさんとか。
jsdo.it
確かChrome Web Storeと同時にスタートしたサービス。同じくKAYACさんでこちらはHTML、CSS、JavaScriptを書くための類似サービス。最初はCreative Coderが多かった感じですが、enchant.jsとコラボしたりとミニゲーム系も多い印象。
CodePen
同様のサービスで海外でメジャーかつアート系の人が集まるサイト。最近は自分もここを利用して後述のp5.jsで遊んでます。
Sketchpad.cc
最近は少し落ち目かも。記憶が正しければ昔はMemo Aktenとかもここに良く投稿してたような。
Live Coding
GLSL Sandbox
フラグメントシェーダだけでライブコーディング、共有するサイト。最近だとthreejsで有名なmrdoobが作ったサイト。初めて知った時はシェーダだけでこれだけできるんだ、って驚いた。自分はここでシェーダー覚えてこれ書きました。
以前の記事にも書いたとおり、自作のVJフレームワークはここのシェーダを取り込めるようになってます。流用性高いし、とにかく質・量ともに素晴らしい。
作法としては時刻、マウス座標、画面解像度、1フレーム前の描画内容の書かれたテクスチャだけを情報としてピクセル毎に色を決めて描画します。
毎日見てるとテクニックの流行みたいなのは見えてくるけど、それでもいつ見ても感心するような新しいシェーダが投稿されてて驚きます。
Shadertoy
GLSL Sandboxより少し凝った内容になっているけど、やっぱり基本はフラグメントシェーダ。やはり自分のフレームワークには取り込めるようにしてる定番フォーマット。
描画に使える情報はGLSL Sandboxとだいたい同じなんだけど、iChannel0-3っていう4つの入力がカスタマイズできるようになっていて、画像、ビデオ、オーディオなんかをテクスチャ情報としてストリーミングしながらシェーダに処理させる事ができます。このおかげでオーディオ・ビジュアライザーなんかが作れる。
vertexshaderart.com
こちらはバーテックスシェーダで絵を書くサイトの模様。最近知ったのでまた詳しくは知らないんだけど、パーティクル系がフラグメントシェーダより充実してる、というのが第一印象。フラグメントシェーダだと性質上、パーティクルの処理が凄く重い（無駄が多い）のですが、こっちだと素直に書けるのかな。
音響系
Web Audio Playground
Web Audio APIのノードをGUIからポチポチと繋げて機能を確認できるサイト。元々Web Audioが出てきた時に実験・デモ目的に作られたようなと性質もあって、あまり凝った事はできません。Web Audio APIの素の機能について確認するには今でも便利。
Canopy
こちらはエディタ上でWeb Audioを使ったコードを書くと波形を表示してくれます。コードで実験するにはこちらが便利。
WebPd
Pure DataのJavaScript版。Maxとかpd知ってる人には特に説明は不要かと思いますが、Creative Coding系でヴィジュアル・プログラミング環境の元祖であり本流。知らない人はExamplesを見てみると良いかも。
CoffeeCillider
SuperCollidarのCoffeeScript版。作法はSuperCillidarなんだけど、記述がCoffeeScriptなので、どちらも知ってるって人以外には若干敷居が高いかも。
映像系
p5.js
公式のJavaScript版Processingという位置づけ。JavaScriptとCanvasに合わせてAPIが微修正されていたり、ライブラリという形で拡張機能が追加できるようになっていたり。oFみたいに3rd party製のpluginsが溢れかえる事を期待してるのかもだけど、今のところそこまで盛り上げってはいない模様。
機能的にはまだまだ足りなくて、最近ようやくWebGLベースの3D描画が追加されたところ。まだちょっと挙動が変で、Processingのコードを持ってきて単純翻訳しても期待した通りに動かない事が多い。
Processing.js
互換性という意味ではこちらのほうが上。p5.jsがJavaScriptで記述するのに対して、こちらはあくまでもProcessingと同様にJava（もどき）。コードに互換性があって、持ってきたコードはわりとそのままで動いてくれる。ただまぁ、完全なJavaの処理系を作ってるわけじゃないので複雑な物は駄目。JavaScriptと混在させて書くこともできるけど、Processingのコードをそのままwebで動かしたければProcessing.js、同じような事をwebでやりたいのならp5.jsって位置づけだと思う。
vvvv.js
vvvvのJavaScript版。自分がvvvv初心者なんで詳しいことは言えないんだけど、p5.jsと同じく互換性よりはJavaScript/Canvasに合わせて作り直す事を重視してる印象。ノードの名前とか機能も少し違う。
vvvv自体がDirectXの強力なノードが使えるとこが魅力だったりもするので、これだけ使っていてもあまり大した事できないかもだけど。ノードの自作ができれば、自作のフレームワークコントロールするのに便利に使えそうな気はする。
vvvvだけでも一通り書けるとは言え、やっぱりグルー言語的な位置づけなんですよね。vvvvで書いてるとハードウェアの論理設計やってるような気分になって、何が高級で何が低級なのかわからなくなってくる。ScratchとかBlueprintなんかはシーケンス図なんだけど、pdとかvvvvは組み合わせ回路なんですよね、思考パタン的に。