Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この記事は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表現を探求できる可能性があると感じています。

goodpatch
Goodpatch(株式会社グッドパッチ)は東京、ベルリン、台北にあるWeb / iOS / AndroidなどマルチデバイスアプリケーションのUIデザイン会社です。サービスやプロダクトの企画設計から関わりコンセプトメイキング、UX設計、プロトタイピング、UIデザイン、実装までワンストップで提供しています。
https://goodpatch.com/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした