今日から始める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](https://yoppa.org/sfc_design18/9311.html)

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](https://p5js.org/)は現代的なCreative Coding環境の始まりとも言える[Processing](https://processing.org/)をJavaScriptに移植したライブラリです。APIがシンプルで比較的情報が見つかりやすいということもありますが、この夏にオンラインのWebエディターがリリースされたことで更にとっつきやすくなりました。
- [p5\.js Web Editor](https://editor.p5js.org/)
- [Hello p5\.js Web Editor\! – Processing Foundation – Medium](https://medium.com/processing-foundation/hello-p5-js-web-editor-b90b902b74cf)

<img width="1517" alt="p5_js_Web_Editor___Motion___Bouncy_Bubbles_and_All_Notes.png" src="https://qiita-image-store.s3.amazonaws.com/0/577/630458ee-ab8e-e8ca-2850-7821062c7e3d.png">


## canvas-sketch

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

<img width="1515" alt="canvas-sketch.png" src="https://qiita-image-store.s3.amazonaws.com/0/577/0366b50c-aa19-9271-8de4-549b3d675fd2.png">


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

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">My <a href="https://twitter.com/FrontendMasters?ref_src=twsrc%5Etfw">@FrontendMasters</a> course on Creative Coding with Canvas &amp; WebGL is out!<br><br>→ <a href="https://t.co/GLIOtw5UgJ">https://t.co/GLIOtw5UgJ</a><br><br>In the ~5 hour course, I show how to make art &amp; creative projects with JavaScript. Learn about Canvas2D, WebGL, GLSL, generative art, randomness, noise functions, and lots more! <a href="https://t.co/VIUzL1SQOJ">pic.twitter.com/VIUzL1SQOJ</a></p>&mdash; Matt DesLauriers (@mattdesl) <a href="https://twitter.com/mattdesl/status/1073318714190241793?ref_src=twsrc%5Etfw">December 13, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## thi.ng/umbrella

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

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


| Project                                   | Description                                  |
|-------------------------------------------|-----------------------------------------------------------------------------------------------------------------|-----------------------------------------------|----------------------------------------------|
| [`@thi.ng/defmulti`](https://github.com/thi-ng/umbrella/tree/master/packages/defmulti) | Dynamic multiple dispatch                    |
| [`@thi.ng/memoize`](https://github.com/thi-ng/umbrella/tree/master/packages/memoize)   | Function memoization w/ customizable caching |
| [`@thi.ng/csp`](https://github.com/thi-ng/umbrella/tree/master/packages/csp)           | Channel based async ops          |
| [`@thi.ng/iterators`](https://github.com/thi-ng/umbrella/tree/master/packages/iterators)| ES6 generators / iterators       |
| [`@thi.ng/transducers`](https://github.com/thi-ng/umbrella/tree/master/packages/transducers) | Composable data transformations  |
| [`@thi.ng/rstream`](https://github.com/thi-ng/umbrella/tree/master/packages/rstream)         | Push-based, reactive event stream primitves  |
| [`@thi.ng/atom`](https://github.com/thi-ng/umbrella/tree/master/packages/atom)  | Immutable value wrappers, views, history |
| [`@thi.ng/hdom`](https://github.com/thi-ng/umbrella/tree/master/packages/hdom)  | Hiccup based VDOM & diffing                      |
| [`@thi.ng/vectors`](./packages/vectors)    | Memory-mapped vector & matrix operations |

umbrellaの設計思想についてはブログ記事の[How to UI in 2018 – thi\.ng – Medium](https://medium.com/@thi.ng/how-to-ui-in-2018-ac2ae02acdf3)を読むことでそのモチベーションを知ることができます。

<img width="1514" alt="geom-knn.png" src="https://qiita-image-store.s3.amazonaws.com/0/577/f01ed3dc-6da5-06f7-4eb6-0dea4525ca5c.png">


## まとめ

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