JavaScript
WebGL
canvas
TypeScript
CreativeCoding
GoodpatchDay 15

今日から始めるCreative Coding環境3選

この記事はGoodpatch Advent Calendar 2018 15日目の記事です。

Creative Codingという言葉を聞いたことがあるでしょうか? プログラミング自体とてもCreativeな行為ですが、Creative Codingとは創造的な芸術表現を目的としたプログラミングのことを言います。通常プログラミングとは何かしらの機能実装や問題解決を目的とすることが多いのでそれらとは区別して呼ばれています。
数学的なアルゴリズムやランダム性を導入して生成される作品を特にGenerative Art、プログラムを実行しながらリアルタイムにコードを書き換えて表現を変化させていく行為をLive Codingと呼び分けられることもありますが、だいたい同じ文脈で話されることが多いです。

Creative Codingの歴史については慶應義塾大学の田所淳先生のスライドが詳しくおすすめです。
第1回: イントロダクション – Creative Codingとは? p5.jsについて - yoppa org

Creative Codingのためのプログラミング環境は汎用言語のライブラリ、独自言語、ビジュアルプログラミング言語など様々あり、主にグラフィック表現とオーディオ表現を目的にした環境があります。

  • グラフィック表現: Processing, openFrameworks, Cinder, etc.
  • オーディオ表現: Max, Pure Data, SuperCollider, etc.

近年はブラウザの持つ機能が増え表現能力が高まったこともあり、ブラウザ上でCreative Codingを行うことが活発になっています。
- HTML5 Canvas
- WebGL
- SVG
- DOM/CSS

CanvasやWebGLを扱うライブラリは多くありますが、その中でも特にCreative Coding/Live Codingに必要なツールがオールインワンになっていて導入しやすく、私が注目しているフレームワークを紹介します。

p5.js

p5.jsは現代的なCreative Coding環境の始まりとも言えるProcessingをJavaScriptに移植したライブラリです。APIがシンプルで比較的情報が見つかりやすいということもありますが、この夏にオンラインのWebエディターがリリースされたことで更にとっつきやすくなりました。
- p5.js Web Editor
- Hello p5.js Web Editor! – Processing Foundation – Medium

p5_js_Web_Editor___Motion___Bouncy_Bubbles_and_All_Notes.png

canvas-sketch

canvas-sketchはフリーランスのクリエイティブコーダーであるMatt DesLauriers氏が開発するフレームワークです。CLIとホットリローディング環境を簡単にセットアップできて即座に制作にフォーカスできるよう洗練されていてセンスの良さを感じます。

canvas-sketch.png

有料になりますがFrontend Masters上でcanvas-sketchを利用したCreative Codingのオンラインコースを開講しています。5時間近い動画でCanvasやWebGLを駆使したグラフィック表現について学べるのでチェックしてみることをおすすめします。

thi.ng/umbrella

thi-ng/umbrellaはKarsten Schmidt氏の開発するTypeScript/ES6でのCreative Coding環境です。彼は以前からthi.ngというプロジェクトでGenerative Designのツールセット群をClojure/Scriptで開発していましたが、この1年ほどはTypeScript上に制作の場を移しています。

umbrellaの注目すべき点は、Creative Coding環境に留まらずClojureの思想を受け継ぎ、コア要素であるFunctional Programming, Immutable Structure, Stream ProcessingをTypeScriptで実現できるようライブラリレベルで移植していることです。
これらは全体で一つのフレームワークではなくそれぞれライブラリレベルで実装されているため、既存のプロジェクトに個別に導入していくことも可能です。また、ClojureのHiccupスタイルの記法で記述できるVirtual DOMライブラリ hdomも提供されています。Stateを扱うatomライブラリと組み合わせることでCreative CodingからシームレスにSPAの開発も行うことができます。

Project Description
@thi.ng/defmulti Dynamic multiple dispatch
@thi.ng/memoize Function memoization w/ customizable caching
@thi.ng/csp Channel based async ops
@thi.ng/iterators ES6 generators / iterators
@thi.ng/transducers Composable data transformations
@thi.ng/rstream Push-based, reactive event stream primitves
@thi.ng/atom Immutable value wrappers, views, history
@thi.ng/hdom Hiccup based VDOM & diffing
@thi.ng/vectors Memory-mapped vector & matrix operations

umbrellaの設計思想についてはブログ記事のHow to UI in 2018 – thi.ng – Mediumを読むことでそのモチベーションを知ることができます。

geom-knn.png

まとめ

Creative Codingのエコシステムは通常の業務アプリケーション開発とは別世界にあり相互に語られることはあまりありませんが、近年はSPAのUIにもダイナミックなインタラクションデザインが求められるようになってきています。Creative Coding環境はCanvasやWebGLなどの表現に集中しやすく設計されているので、従来にないようなUI表現を探求できる可能性があると感じています。