この記事は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
canvas-sketch
canvas-sketchはフリーランスのクリエイティブコーダーであるMatt DesLauriers氏が開発するフレームワークです。CLIとホットリローディング環境を簡単にセットアップできて即座に制作にフォーカスできるよう洗練されていてセンスの良さを感じます。
有料になりますがFrontend Masters上でcanvas-sketchを利用したCreative Codingのオンラインコースを開講しています。5時間近い動画でCanvasやWebGLを駆使したグラフィック表現について学べるのでチェックしてみることをおすすめします。
My @FrontendMasters course on Creative Coding with Canvas & WebGL is out!
— Matt DesLauriers (@mattdesl) December 13, 2018
→ https://t.co/GLIOtw5UgJ
In the ~5 hour course, I show how to make art & creative projects with JavaScript. Learn about Canvas2D, WebGL, GLSL, generative art, randomness, noise functions, and lots more! pic.twitter.com/VIUzL1SQOJ
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を読むことでそのモチベーションを知ることができます。
まとめ
Creative Codingのエコシステムは通常の業務アプリケーション開発とは別世界にあり相互に語られることはあまりありませんが、近年はSPAのUIにもダイナミックなインタラクションデザインが求められるようになってきています。Creative Coding環境はCanvasやWebGLなどの表現に集中しやすく設計されているので、従来にないようなUI表現を探求できる可能性があると感じています。