Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
78
Help us understand the problem. What is going on with this article?
@toyoshim

Webで遊べるCreative Coding環境

More than 5 years have passed since last update.

この記事について

ひとまとめに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は組み合わせ回路なんですよね、思考パタン的に。

78
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
toyoshim

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
78
Help us understand the problem. What is going on with this article?