このページの内容

Awesome Creative Coding

Creative Codingを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

書籍

オンライン書籍

  • The Book of Shaders - 抽象的で複雑なフラグメントシェーダの宇宙をステップバイステップで解説
  • WebGL Fundamentals - WebGLの基礎から学ぶ。魔法は一切ない
  • WebGL 2 Fundamentals - WebGL2の基礎から学ぶ。魔法は一切ない
  • Learn OpenGL - 現代OpenGLを学ぶための広範なチュートリアルリソース
  • Scratchapixel 2.0 - ゼロからコンピュータグラフィックスを学ぶ
  • ofBook - openFrameworksに関するコミュニティが執筆した書籍/ガイド
  • OGLdev - Etay Meiriによる現代OpenGLチュートリアルのコレクション
  • OpenGL Tutorial - OpenGL 3.3以降のチュートリアルを提供するサイト
  • Open.gl - OpenGLの基本的な使い方を教えるガイド
  • Pixel Shaders - グラフィックスプログラミングへのインタラクティブな導入
  • OpenGLBook - オンライン書籍形式の無料OpenGLプログラミングチュートリアル
  • Graphics Programming Projects - Morgan McGuireによる3Dコンピュータグラフィックスに関する書籍
  • On Generative Algorithms - Anders Hoffが執筆した、さまざまな有機パターンの生成に関するメモと例、Pythonコード
  • Computer Graphics from Scratch - OpenGLおよびDirectXがどのように機能するかを教えるレイトレーシングとラスタライズの教科書
  • A Primer on Bézier Curves - Bézier処理を行うために本当に必要な場合の無料書籍
  • 3D Game Shaders For Beginners - リアルタイムシェーディング技術をステップバイステップで解説
  • XEM WebGL Guide - WebGLをステップバイステ及に解説
  • Creative Coding Notebooks - Diego Inácioによるクリエイティブコーディングとコンピュータアートの基本的なPythonレシピセット
  • WebGL Academy - WebGLと3Dアルゴリズムを進行型かつインタラクティブに学ぶ

コース

ツール

Frameworks • Libraries • Ecosystems

  • Processing [クロスプラットフォーム] - ビジュアルアート向けのプログラミング言語とIDE
  • py5 [クロスプラットフォーム] - ProcessingをPython 3エコシステムに統合するライブラリ
  • Cinder [クロスプラットフォーム] - C++によるプロフェッショナルなクリエイティブコーディング向けオープンソースライブラリ
  • openFrameworks [クロスプラットフォーム] - クリエイティブコーディング向けのオープンソースC++ツールキット
  • NAP [クロスプラットフォーム] - データ駆動型リアルタイム制御および可視化プラットフォーム。プロフェッショナルなインストール向けにC++で構築されたもので、Vulkanレンダラーをサポート
  • C4 [iOS] - iOS向けのオープンソースクリエイティブコーディングフレームワーク
  • Unity [Mac, Win] - ゲームエンジンだが、クリエイティブコーディングやインストールに活用できる
  • Godot [クロスプラットフォーム] - オープンソースゲームエンジンで、さまざまな用途に使える
  • PlayCanvas [クロスプラットフォーム] - リアルタイム協調型WebGLエンジン(オープンソース)
  • hg_sdf [クロスプラットフォーム] - GLSLによるシグネッド距離関数を構築するライブラリ
  • nannou [クロスプラットフォーム] - Rust言語向けのオープンソースクリエイティブコーディングフレームワーク
  • thi.ng [クロスプラットフォーム] - JavaScript、TypeScript、ClojureおよびClojureScript言語向けのオープンソースコンピューターデザインツールのコレクション
  • PixelKit [iOS, Mac] - メタルを用いたオープンソース、リアルタイムグラフィックス、Swiftフレームワーク
  • OPENRNDR [クロスプラットフォーム] - クリエイティブコーディング用のオープンソースライブラリ(Kotlinで記述)
  • Phaser [クロスプラットフォーム] - ゲーム開発用のHTML5フレームワーク。CanvasおよびWebGLレンダラーを併用
  • Canvas-sketch [クロスプラットフォーム] - JavaScriptおよびブラウザで生成アートを制作するためのHTML5フレームワーク
  • AsyncGraphics [iOS, macOS] - メタルを用いたオープンソース、リアルタイムグラフィックス、async / await、Swiftパッケージ
  • Lygia [クロスプラットフォーム] - パフォーマンスと柔軟性を重視した、マルチ言語(GLSL、HLSL、WGSL、MSLおよびCUDA)のシェーダライブラリ
  • Fragment.tools [クロスプラットフォーム] - クリエイティブコーディング向けのウェブ開発環境

Visual Programming Languages

  • vvvv [Win] - ハイブリッドな視覚的・テキスト入力リアルタイムプログラミング環境。プロトタイピングおよび開発が容易
  • NodeBox [Mac, Win] - クロスプラットフォーム、ノードベースGUI。データ可視化および生成デザインに効率的に活用できる
  • TouchDesigner [Mac, Win] - リアルタイムプロジェクトを作成するための視覚開発プラットフォーム
  • Quartz Composer [Mac] - グラフィカルデータの処理およびレンダリング用の開発ツール
  • Vuo [Mac] - ライブインタラクティブメディアプログラミング環境。
  • Max [Mac, Win] - メディア用の視覚プログラミング言語。
  • Pure Data [Cross-platform] - メディア用のオープンソース視覚プログラミング言語。
  • ossia score [Cross-platform] - インタラクティブかつインタメディアの音視聴順列化ツール。
  • TiXL [Win] - インタラクティブ3Dコンテンツとアニメーションを作成するためのオープンソースツール。
  • XOD [Cross-platform] - マイクロコントローラベースプロジェクト用のオープンソース視覚プログラミング言語および環境。
  • Isadora [Cross-platform] - シーンベースのメディア制御ソフトウェアで投影マッパーを統合。
  • cables [Cross-platform/Web] - 美しいインタラクティブコンテンツを作成するためのモデルキット。
  • eternal [Web] - プログラムをグラフとして、グラフを構成ツールとして使う。
  • Notch Builder [Win] - リアルタイムグラフィックスに強い焦点を置いたノードベースの作成ツール。
  • JOY.JS - リアルタイム視覚コードツールで、理解しやすく初心者向け。
  • TIC-80 - 240*136ピクセルの画面でピクセルアートスタイルのゲームやアートを作成。

Sound Programming Languages

  • SuperCollider [Multi-platform] - 音響合成とアルゴリズムによる作曲のプラットフォーム。
  • ChucK - 強力なタイム制御、並列処理、即時実行の音楽プログラミング言語。
  • TidalCycles - パターンのライブコーディングに特化したドメイン特定言語。
  • Sonic Pi - 誰でも使えるライブコーディング音楽シンセサイザー。
  • Csound - 音と音楽のコンピューティングシステム。
  • Orca - プロシージャルシーケンサを迅速に作成するためのライブコーディング環境。
  • handel - ブラウザ内で歌を書くための小さなプロシージャルプログラミング言語。
  • Overtone - 合成と楽器構築からライブコーディングまで新しい音楽アイデアを探索するためのオープンソース音環境。
  • Melrōse - MIDIを生成する環境でライブ音楽を作成する
  • Glicol - Rustで書かれたグラフ指向のライブコーディング言語と音声/オーディオDSPライブラリ

Web Programming • Libraries

  • three.js - JavaScriptによる3Dライブラリ
  • regl - 関数型WebGL
  • Stackgl - ブラウザフィーとnpmに基づくWebGL向けオープンソフトウェアエコシステム
  • Paper.js - ベクターグラフィックススクリプティングのスイス軍刀
  • Pixi.js - HTML5の2D描画エンジンでWebGLを使用し、キャンバスにフォールバック
  • p5.js - Processingの元の目的をもつJavaScriptライブラリ
  • Pts.js - 可視化とクリエイティブコーディング用のJavaScriptライブラリ
  • Fabric.js - キャンバスに変換するSVGを解析するJavaScriptキャンバスライブラリ
  • Maker.js - SVG、CNCおよびレーザー切断機用のパラメトリックライン描画
  • JSCAD - JavaScriptによるプログラム的な3Dモデリング
  • Sketch.js - 最小限のJavaScriptによるクリエイティブコーディングフレームワーク
  • Two.js - 現代のウェブブラウザ向けの2次元描画API
  • lightgl.js - 軽量なWebGLライブラリ
  • picogl.js - 最小限のWebGL2描画ライブラリ
  • Alfrid - WebGLツールセット
  • Babylon.js - HTML5とWebGLで3Dゲームを構築するための完全なJavaScriptフレームワーク
  • twgl.js - 小さなWebGL補助ライブラリ
  • luma.gl - データ可視化用のWebGL2コンポーネント
  • css-doodle - CSSでパターンを描くためのウェブコンポーネント
  • OGL.js - JavaScript 3D ライブラリ(WebGL)
  • Zdog - キャンバスとSVG用の擬似3Dエンジン
  • Oimo.js - JavaScript用の軽量3D物理エンジン
  • Ammo.js - Emscriptenを用いたBullet物理エンジンのJavaScript直接移植
  • Theatre.js - 視覚ツールを備えたモーションデザインライブラリ
  • textmode.js - リアルタイムASCIIおよびテキストモードグラフィックス用のJavaScriptキャンバスライブラリ

Projection Mapping • VJing

  • MadMapper [Mac] - ビデオマッピングプロJECTIONおよびライトマッピング
  • VDMX [Mac] - リアルタイムマルチメディアパフォーマンスアプリケーション
  • Modul8 [Mac] - リアルタイムビデオミックスおよびコンポジティング
  • Resolume [Mac, Win] - リアルタイムでデジタルビデオとエフェクトのミックス
  • VirtualMapper - プロジェクションマッピング用のリアルタイムプレビューツール
  • Millumin [Mac] - インタラクティブオーディオビジュアルショーの作成およびパフォーマンスを行うソフトウェア
  • Smode [Win] - リアルタイム2D/3-3D作成、コンポジティングおよびビデオマッピングエンジン
  • Veejay [Linux] - 多数のソース(ファイル、デバイス、ストリームなど)からのシンプルな非線形編集およびミックスを備えたライブパフォーマンスツール

Online

  • Shadertoy - 世界と共有し、インスピレーションを得るシェーダーの構築
  • Shader Park - インタラクティブプロシージャル2Dおよび3Dシェーダーを作成するためのJavaScriptライブラリ
  • GLSL Sandbox - オンラインシェーダー編集器とギャラリー
  • Shdr Editor - オンラインシェーダー編集器
  • CodePen - 高度な技術を示したケーススタディ(編集可能なソースコード付き)
  • Shadershop - GPUシェーダーをプログラミングするためのインターフェース
  • Vertexshaderart - オンラインシェーダー編集器とギャラリー
  • Cyos - オンラインシェーダー編集器
  • GlslEditor - シンプルなWebGLフラグメントシェーダー編集器
  • OpenProcessing - Processing、p5jsおよびprocessingjsで作成されたアルゴリズム設計
  • P5.js Editor - p5.js用のオンラインウェブエディタ
  • LiveCodeLab - VJ、音楽家、教師、学生、子どもたちがリアルタイムで実行できるツール
  • Turtletoy - 生成コード用のミニマリズムAPIとオンラインショวーケース(JavaScript)
  • ShaderGif - コードで作られた芸術のオープンソースホーム(WebGL1/2、JavaScript Canvas & p5.js)
  • P5LIVE - p5.jsのライブコーディング環境
  • NEORT - クリエイティブコーディング者向けのデジタルアートプラットフォーム(フラグメントシェーダー、JavaScript Canvas)
  • Shelly - タートルに指示を出すことでプログラミングを学ぶ
  • tixy.land - 最もミニマリズムなクリエイティブコーディング環境が生きている
  • BBC Micro bot - ツイートを8ビットコンピュータエミュレータで実行できる
  • Hydra - ライブコード可能なビデオシンセとコーディング環境
  • editor.textmode.art - textmode.js用のオンラインウェブエディタ
  • synth.textmode.art - textmode.js用のオンラインライブコーディング環境

Hardware

  • Arduino - デジタルデバイスやインタラクティブオブジェクトを構築するためのオープンソースマイクロコントローラーキット
  • Raspberry Pi - 小型シングルボードコンピュータ
  • Puck.js - ワイヤレスでプログラミングできるオープンソースJavaScriptマイクロコントローラー
  • BeagleBoard - 低消費電力のオープンソースシングルボードコンピュータ
  • Makey Makey - 日常の物をタッチパッドに変換し、インターネットと組み合わせる
  • Leap Motion - 手や指の動きを入力としてサポートするセンサー機器
  • AxiDraw - シンプルで現代的かつ正確なペンプロット機
  • Phidgets - コンピュータ用のセンサー、入力デバイスおよびコントローラー
  • Teensy - USBベースのマイクロコントローラ開発システム
  • Lightform - 内蔵深度センサーによるAR投影マッピング

Other

  • Structure Synth [クロスプラットフォーム] - デザイン文法を指定して3D構造を生成するアプリ
  • F3 [Mac] - 3Dデザインをリアルタイムでコードで作成できる強力な3Dデザインアプリ
  • ShaderTool [Win] - プログラマやFXアーティスト向けの現代的なシェーダーIDE
  • Syphon [Mac] - アプリケーション間でリアルタイムでフレームを共有できる機能
  • KodeLife - リアルタイムGPUシェーダー編集器、ライブコード実行ツールおよびグラフィックスプロトタイピングスケッチパッド
  • ISF - インタラクティブアプリケーションで使用可能なGLSLシェーダー
  • glslViewer - GLSLシェーダーをリアルタイムでレンダリングするライブコーディングコンソールツール
  • shoebot [クロスプラットオーラ] - ShoebotはPythonでベクターグラフィックスとアニメーションを作成するための創造的コーディング環境
  • DrawBot [Mac] - Pythonベースの教育向け2Dグラフィックスプログラミング環境
  • Klak - Unityで創造的コーディングを行うためのスクリプトのコレクション
  • basil.js - InDesignでのスクリプティング(JS)—Processingの精神をもつデザイナーおよびアーティスト向け
  • Konstrukt [クロスプラットフォーム] - SVGとしてスケーラブルなパターンを生成するコマンドラインツール

学習リソース

Videos

Talks

  • Inigo Quilez Live - Íñigo Quílezによるライブコーディング動画のコレクション
  • There is also canvas - Bruno ImbriziがWebExpo 2016でキャンバスを使ったクリエイティブコーディングについて説明。インタラクティブスライド here
  • OpenGL 3D Game Tutorials - OpenGLを使って3Dゲームを作成する初心者向けチュートリアルシリーズ
  • How We Do This Shit - テクノロジーを活用したアーティストがその収入をどうやって確保しているかに関する講演
  • Making WebGL Dance - 線形代数学を学び始めた私の体験談
  • The Pixel Factory - Steven WittensによるWebGL、GPU、数学に関する講演
  • Poetic Computation - Zach Liebermanによるインスピレーションを与える講演
  • Generative Machines - FITCでマット・デスラウリエスが生成芸術への情熱について語る

Articles • Tutorials

Shaders • OpenGL • WebGL

Canvas

Hardware

Other

Interactive

Quick References • Cheat Sheets

コミュニティ

Subreddits

  • r/creativecoding - コンピュータプログラミングを創造的分野としての利用方法の共有と議論
  • r/raytraycing - レイトレーシングに関するサブレッド
  • r/opengl - すべてのプラットフォームにおけるOpenGLのニュースと議論
  • r/graphicsprogramming - グラフィックスプログラミングに関するサブレッド
  • r/processing - Processingに関するサブレッド
  • r/shaders - シェーダーに関するサブレッド
  • r/proceduralgeneration - プロシージャル生成に関するサブレド
  • r/MachineLearning - 機械学習に関するサブレッド
  • r/generative - 生成芸術および音楽に関するサブレッド

Slack

Other

数学

機械学習・コンピュータービジョン・AI

  • ml4a - アーティスト向けの機械学習
  • Keras.js - GPU対応でブラウザ上でKerasモデル(TensorFlowバックエンド)を実行
  • Tesseract.js - 純粋JavaScriptによるマルチ言語OCR
  • Google ML - グーグルによるクラウド機械学習
  • TensorFlow - 機械知能向けオープンソースソフトウェアライブラリ
  • ConvNetJS - ブラウザ内で深層学習を行う
  • Wekinator - 誰でも機械学習を活用できる
  • Machine Learning - Coding Trainのリポジトリで機械学習リソースへのリンクを提供
  • Teachable Machine - ブラウザ内で機械学習がどのように機能するかを実時間で体験
  • TensorFlow.js - ブラウザおよびNode.js上で機械学習モデルの訓練とデプロイを行うJavaScriptライブラリ
  • ml5.js - ウェブ向けに親しみやすい機械学習
  • Model Zoo - オープンソースの深層学習コードと事前訓練済みモデルを発見
  • Runway - 動画およびコンテンツ作成向けAIツール

インスピレーション

  • OpenProcessing - Processing、p5jsおよびprocessingjsで作成されたアルゴリズム設計
  • Dwitter - 短いJavaScriptデモを共有するソーシャルネットワーク
  • Chrome Experiments - クリエイティブコーディングコミュニティが書いたウェブ実験の展示
  • For your Processing - Processingに関するプロジェクトとチュートリアル
  • Art From Code - ケイト・ペーターズによるコードスケッチ
  • Generator.x - 芸術・デザインにおける生成戦略に関するFlickrグループ
  • Generative Art - 生成芸術に関するFlickrグループ
  • People You Should Follow on CodePen - 注目すべき人々のリスト
  • Raven Kwok - 視覚芸術家であるラヴン・クォックによるTumblr
  • P5Art - Processingにおける実験の素晴らしいコレクション
  • Echophon - 視覚的インスピレーションを提供するTumblr
  • Bees & Bombs - ダビースが提供する、グイフを含むTumblr
  • Folds2d - カーブ、表面、スケーラーおよびベクトル場を扱うTumblr

イベント

  • OFFF Festival - デジタルデザインフェスティバル(オンライン・フラッシュ・フィルム・フェスティバル
  • Gray Area Festival - クリエイティブ・コーディング、芸術と技術フェスティバル
  • Signal Festival - チェコ共和国のプラハで開催される光芸術と新技術を展示するイベント
  • Eyeo Festival - データ、芸術、技術の交差点に立つクリエイティブ・コーディング者、データデザイナー、クリエイターたちを結びつけるイベント
  • Mutek - 音、音楽、音視覚芸術におけるデジタルクリエイティビティを推進する組織
  • Node - 文化、芸術、技術に関する交換のためのオープンプラットフォーム
  • Digital Design Days - 3日間のイベントで、講演、ワークショップ、デジタル展示、インスタレーションを提供
  • CODAME ART+TECH - プロジェクトおよび非営利イベントを実施し、体験を通じてインスピレーションを提供

美術館・ギャラリー

学校・ワークショップ

ブログ・ウェブサイト

  • CreativeApplications.Net [CAN] - 有名なデジタルアートブログ。
  • iquilezles.org - Íñigo Quílezのホームページ。GLSLおよび数学のスニペットに特化。
  • bit-101.com - ケイト・ペータースによるブログ。創造的コードに特化。
  • ibreakdownshaders - シェーダーの背後にある数学を探索。
  • adriancourrèges.com - ソフトウェアエンジニアアドリアン・コルルエのブログ。ゲームグラフィックス研究などについての記事。
  • clicktorelease.com - ジャウメ・サンチェス・エリアスのホームページ。WebGLおよびWebVRに関するデモ、講演、記事を提供。
  • syntopia - ミカエル・ハヴィトールト・クリスティエンセンによる生成アートとシステムに関するブログ。
  • madebyevan.com - エヴァン・ウォールスによるWebGL実験と記事。
  • songho.ca - ソン・ホ・アンのホームページ。OpenGLおよび数学に関するチュートリアルが豊富。
  • simonschreibt.de - シモン・シュレibtによるゲームアートのトリック、デザインのトリック。
  • sighack.com - マノハル・ヴァンガによる生成アートアルゴリズムと技術に関するブログ。
  • jsdo.it-archives - WebGL実験のコンパイル。WebGLフレームワークおよび物理エンジン(oimo.js、cannon.js、ammo.js)の比較を含む。
  • WebAudio Weekly - WebAudio APIに関するすべての情報を知るニュースレター。

関連情報

  • Awesome opengl - 素晴らしいOpenGLライブラリ、デバッガーやリソースの厳選リスト。
  • Awesome webgl - 素晴らしいWebGLライブラリ、リソースなど、厳選された一覧。
  • Awesome canvas - 素晴らしいHTML5キャンバスリソース、例、関連記事および投稿を厳選した一覧。
  • Awesome audio visualization - オーディオ可視化に関する厳選された一覧。
  • Awesome computer vision - 素晴らしいコンピュータビジョンリソースを厳選した一覧。
  • Awesome visualization research - データ可視化に関するおすすめの研究論文およびその他の読み物を厳選した一類。
  • Awesome livecoding - ライブコーディング言語およびツールを厳選した一覧。
  • Awesome graphics - コンピュータグラフィックスのチュートリアルやリソースを厳選したリスト
  • Graphics resources - グラフィックプログラミングのリソースを厳選したリスト
  • Magic tools - 魔法が現れるようなゲーム開発用のリソースを厳選したリスト
  • Awesome public datasets - 公開されているデータセットを厳選したリスト、主に無料のリソース
  • Link collection of ray marching on the GPU - 2013年から厳選したリスト
  • 3D Machine Learning - 3D機械学習向けのリソースリポジトリ
  • Awesome creative technology - クリエイティブテクノロジー関連のグループ、企業、スタジオ、集団などを厳選したリスト

ライセンス

CC0

可能な限り法に従い、Terkel Gjervigはこの作品に関するすべての著作権および関連又は隣接する権利を放棄した。