はじめに — 2026年5月、クリエイティブコーディングは AI を "二色目" として扱う

2020年代前半までクリエイティブコーディングは「Processing か p5.js で一枚絵を描く」領域だった。2026年5月の風景はすっかり変わっている。拡散モデルはスケッチツールの一部になり、ml5 Next で一行リアルタイム姿勢推定を差し、Hydra のライブコーディングに transformers.js の感情分類器を貼るのが普通になった。同時に既存ツールのポジションも明確化した — Processing 4 はデスクトップ印刷で、p5.js はウェブ/NFT で、openFrameworks はインスタレーションで、TouchDesigner と Notch はライブイベントで、Three.js と R3F はウェブ 3D の事実上の標準として固まった。

本稿はマーケティング表ではなく「今どこで何が作られているか」を正直に整理する。Art Blocks と fx(hash) のジェネラティブ NFT、日本の Rhizomatiks と teamLab、韓国の Random Walks と白南準アートセンター、そして Coding Train と Genuary という教育・コミュニティまで含めて一本に納める。

クリエイティブコーディング 2026 — 8 トラックの俯瞰

まず全体像から。2026年5月の生態系は 8 トラックに分かれる。

1. **基盤ライブラリ**: Processing 4, p5.js 2.0, openFrameworks, Cinder, OPENRNDR, Nannou

2. **ライブコーディング**: Hydra, TidalCycles + SuperCollider, Sonic Pi, Strudel, Punctual

3. **ノードベース**: TouchDesigner, vvvv gamma, Notch Builder, Cables.gl

4. **ウェブ 3D**: Three.js, Tres.js, React Three Fiber, Babylon.js, A-Frame, PlayCanvas

5. **ジェネラティブ NFT プラットフォーム**: Art Blocks, fx(hash), Highlight, Bright Moments

6. **AI 統合**: ml5 Next, Magenta.js, transformers.js, TensorFlow.js + p5, ONNX Runtime Web

7. **ライブパフォーマンス (VJ / マッピング)**: Resolume Arena, MadMapper, VDMX, Coge

8. **MIDI / サウンド / 物理 IO**: Max/MSP, Pure Data, Ableton Live + M4L, WLED, PixelBlaze

各トラックは観客もアウトプット媒体も違う。p5.js のスケッチはそのまま Art Blocks に乗り、TouchDesigner のパッチは広告とイベント舞台に行き、Hydra のコードはクラブ VJ セットになる。下から一つずつ見ていく。

Processing 4 — デスクトップクリエイティブコーディングの正典

**Processing** は 2001 年に Ben Fry と Casey Reas が MIT Media Lab で始めた Java ベースの IDE + ライブラリだ。2026年5月時点で 4.x が安定ラインで、5.x のアルファが公開されている。4.x で Java 17 LTS への移行、Apple Silicon ネイティブビルド、ダークモード、PDF 書き出しの刷新が入った。

典型的な Processing 4 スケッチは次の通り。

PVector[] dots = new PVector[400];

void setup() {

size(800, 800, P2D);

noStroke();

for (int i = 0; i < dots.length; i++) {

dots[i] = new PVector(random(width), random(height));

}

}

void draw() {

background(20);

for (PVector d : dots) {

float n = noise(d.x * 0.005, d.y * 0.005, frameCount * 0.01);

fill(255, 80 + n * 175);

ellipse(d.x, d.y, 4, 4);

d.add(cos(n * TAU), sin(n * TAU));

if (d.x < 0 || d.x > width) d.x = random(width);

if (d.y < 0 || d.y > height) d.y = random(height);

}

}

Processing 4 が強いのは **デスクトップ高 DPI 印刷、ペンプロッター (AxiDraw, iDraw) との統合、OpenGL / P3D の安定性** だ。Java ライブラリ (PostgreSQL JDBC, iText PDF など) と直結できる点も大きい。Genuary と Plottertober で最も多く使われるツールでもある。

Python を好むなら **Processing.py (Python Mode)** があり、もっと軽い経路としては **Py5** (Processing 4 上の Python バインディング) が 2026 年に定着した。Py5 は Jupyter ノートブックでそのまま動くため、データ可視化とジェネラティブアートのワークフローを自然に混ぜられる。

p5.js 2.0 — ウェブ第一の Processing 再解釈

**p5.js** は Lauren McCarthy が 2013 年に始めた Processing の JavaScript ポートだ。2026年5月時点で **p5.js 2.0** がメジャーリリースとして定着している。主な変化は以下の通り。

- **WebGL2 が既定**: シェーダー / インスタンシング / テクスチャ配列が一級市民

- **ESM 第一 + tree-shakable**: 本番ビルドを 200KB 未満に絞れる

- **アクセシビリティが標準内蔵**: ARIA とテキスト代替を自動生成

- **TypeScript 型定義の強化**: 補完とリファクタが安定

基本的な p5 スケッチは初見でも読める。

let particles = []

function setup() {

createCanvas(windowWidth, windowHeight)

for (let i = 0; i < 600; i++) {

particles.push({ x: random(width), y: random(height) })

}

noStroke()

}

function draw() {

background(10, 30)

for (const p of particles) {

const n = noise(p.x * 0.003, p.y * 0.003, frameCount * 0.005)

fill(200 + n * 55, 220, 255, 180)

circle(p.x, p.y, 3)

p.x += cos(n * TAU) * 1.2

p.y += sin(n * TAU) * 1.2

if (p.x < 0) p.x = width

if (p.x > width) p.x = 0

if (p.y < 0) p.y = height

if (p.y > height) p.y = 0

}

}

p5.js の最大の魅力は、同じスケッチが **fx(hash)、Art Blocks Engine、OpenProcessing** で無改造で動くことだ。一枚のファイルがそのまま NFT になる。**`p5.strands` の親切なシェーダー DSL** と **p5.sound 2** の Web Audio 整備も意味あるアップデートだ。

openFrameworks — インスタレーションを支える C++ の主力

**openFrameworks** (OF) は 2005 年に Zach Lieberman、Theo Watson、Arturo Castro らが始めた C++ のクリエイティブコーディングツールキットだ。2026年5月時点の安定版は **0.12.x** で、Apple Silicon ネイティブ、oF/iOS 17、visionOS ビルド、Vulkan レンダラー (`ofxVk`) が加わった。

大型インタラクティブインスタレーション、マルチスクリーン、センサー/カメラ IO、美術館品質のインストールでは OF が今でも王道だ。**ofxAddon の生態系** が厚く、ofxOpenCv、ofxKinect、ofxOsc、ofxMidi、ofxAssimp、ofxImGui が事実上標準になっている。

#include "ofMain.h"

class ofApp : public ofBaseApp {

public:

std::vector<ofVec2f> pts;

void setup() override {

ofBackground(20);

for (int i = 0; i < 500; i++) pts.emplace_back(ofRandomWidth(), ofRandomHeight());

ofSetCircleResolution(20);

}

void update() override {

float t = ofGetElapsedTimef();

for (auto &p : pts) {

float n = ofNoise(p.x * 0.005f, p.y * 0.005f, t * 0.2f);

p += ofVec2f(cosf(n * TWO_PI), sinf(n * TWO_PI));

if (p.x < 0 || p.x > ofGetWidth()) p.x = ofRandomWidth();

if (p.y < 0 || p.y > ofGetHeight()) p.y = ofRandomHeight();

}

}

void draw() override {

ofSetColor(255, 30);

for (const auto &p : pts) ofDrawCircle(p, 2.0f);

}

};

姉妹的な C++ フレームワークに **Cinder** (libcinder) がある。ライセンスがより商用フレンドリー (BSD-2) で、モダン C++ との結合が滑らかだ。Apple 社内デモ、Black Rock City のインスタレーション、多くの音楽ツアー映像が今も Cinder ベースで動いている。

OPENRNDR — Kotlin / JVM のモダンクリエイティブコーディング

**OPENRNDR** はオランダのスタジオ RNDR が作った Kotlin ベースのクリエイティブコーディングフレームワークだ。JVM の安定性、Kotlin DSL の表現力、OpenGL 4.3 レンダラーを組み合わせる。2026年5月時点の安定ラインは **0.4.x** で、IntelliJ IDEA でそのままデバッグできる。

fun main() = application {

configure { width = 900; height = 900 }

program {

val pts = List(800) { Vector2(Math.random() * width, Math.random() * height) }.toMutableList()

extend {

drawer.clear(ColorRGBa.BLACK.shade(0.95))

drawer.fill = ColorRGBa.WHITE.opacify(0.5)

drawer.stroke = null

pts.forEachIndexed { i, p ->

val n = simplex(42, p.x * 0.005, p.y * 0.005, seconds * 0.3)

pts[i] = Vector2(

(p.x + Math.cos(n * Math.PI * 2)).mod(width.toDouble()),

(p.y + Math.sin(n * Math.PI * 2)).mod(height.toDouble())

)

drawer.circle(pts[i], 2.0)

}

}

}

}

OPENRNDR はデータ可視化やインフォグラフィック寄りの仕事に強い。PDF、SVG、PNG シリーズ出力がきれいで、Kotlin Coroutines 上の非同期合成が自然に書ける。

Nannou — Rust で書くクリエイティブコーディング

**Nannou** は Rust 生態系のクリエイティブコーディングフレームワークだ。Tom Bevan と Mitchell Nordine が始めた。wgpu バックエンド (Vulkan / Metal / DX12) 上に乗り、デスクトップと Wasm の両方を狙う。2026年5月時点のメインは **0.20.x** で、Bevy など他のゲームエンジンと親和的なモジュールが増えている。

use nannou::prelude::*;

struct Model { pts: Vec<Vec2> }

fn model(app: &App) -> Model {

app.new_window().size(900, 900).view(view).build().unwrap();

let pts = (0..800).map(|_| pt2(random_range(-450.0, 450.0), random_range(-450.0, 450.0))).collect();

Model { pts }

}

fn update(_app: &App, m: &mut Model, _u: Update) {

for p in m.pts.iter_mut() {

let n = (p.x * 0.01).sin() + (p.y * 0.01).cos();

*p += vec2(n.cos(), n.sin());

}

}

fn view(app: &App, m: &Model, frame: Frame) {

let d = app.draw();

d.background().color(rgba(0.05, 0.05, 0.07, 1.0));

for p in &m.pts { d.ellipse().xy(*p).w_h(2.0, 2.0).color(WHITE); }

d.to_frame(app, &frame).unwrap();

}

fn main() { nannou::app(model).update(update).run(); }

Rust の厳しさは習得コストだが、その対価として **単一バイナリ配布、メモリ安全、wgpu 上でのシェーダー記述** が得られる。音楽公演ビジュアル、組み込み LED 制御、ペンプロッターのワークフローで Rust 採用が増えている。

Hydra — Olivia Jack のライブコーディングビジュアル

**Hydra** は Olivia Jack が作った JavaScript のライブコーディングビジュアル環境だ。ブラウザで即起動でき、GLSL シェーダー関数をメソッドチェーンで合成する。2026年5月時点でライブコーディング / アルゴレイブシーンの事実上の標準だ。

osc(20, 0.1, 1.2)

.color(0.9, 0.4, 0.8)

.rotate(0.1, 0.05)

.modulate(noise(3, 0.2))

.kaleid(6)

.out()

6 行でキネティックな曼荼羅が出る。Hydra は **`s0`, `s1`, `s2`, `s3` 入力チャンネル** でカメラ・画面・動画ファイルを受け、**`o0`–`o3` 出力バッファ** でマルチパス合成を作る。**Hydra Sync** (`hydra-synth` ノード) を使って WebRTC でライブコーダー同士が映像を交換できるようになり、クラブセットの定番テクになった。

代替に **Punctual** (David Ogborn、Haskell ベース DSL) と **Cyril** (Processing ベース DSL) がある。ノードベースのライブコーディングは **vvvv gamma** だ (後述)。

TidalCycles + SuperCollider — ライブコーディング音響の二大標準

**TidalCycles** は Alex McLean による Haskell DSL で、パターンベースのライブコーディング音響システムだ。バックエンドに **SuperCollider** (SC3, James McCartney) と **SuperDirt** シンセライブラリを使う。2026年時点でアルゴレイブ音響セットの標準ツールだ。

d1 $ jux rev $ every 4 (# speed "1.5")

$ n "bd*4 sn bd [sn cp]" # gain "0.9 0.7 0.8 0.6"

room 0.4 # delay 0.3 # delaytime "0.125"

ブラウザでもっと手軽に使いたいなら **Strudel** (Tidal in JavaScript, Felix Roos) がある。Web Audio API 上で Tidal 構文をそのまま使え、Hydra と合わせてライブビジュアルが直結する。**Sonic Pi** (Sam Aaron, Ruby DSL) は教育と学校ライブコーディング分野に強い。

Tidal + Hydra + Strudel の組は **アルゴレイブ** シーンの事実上の正典だ。韓国でも ACMP や Algorave Seoul が毎年開催されている。

TouchDesigner — ノードベースインスタレーションの先頭

**TouchDesigner** (Derivative) は元 Houdini 開発者たちが 2000 年に始めたノードベースのビジュアルプログラミング環境だ。CHOP (チャンネル)、TOP (テクスチャ)、SOP (サーフェス)、MAT (マテリアル)、COMP (コンポーネント) のネットワークで信号を流す **シグナルフロー型** だ。2026年5月時点の安定ラインは **2024.40000+** で、NDI 6、Apple Silicon ネイティブ、刷新された Engine COMP が入った。

設置型作品 (展示、広告ブース、コンサート)、コンサートビジュアル、AR ステージ、LED マトリクス制御、マシンビジョン + インタラクティブ領域で TouchDesigner は事実上の先頭だ。内蔵 Python が OSC、MIDI、WebSocket、gRPC をそのまま扱える。**Educational / Non-Commercial** は無料、**Commercial** は年契約モデルだ。

代替は **vvvv gamma** (ドイツの NODE グループによる .NET ベース) と **Notch Builder**。vvvv gamma はコンパイラ内蔵の本物のプログラムグラフで、Notch はコンサート / ライブイベント規模で強い。

Notch Builder — コンサート / ライブイベントの標準

**Notch** は英国企業のノードベースリアルタイム映像ツールだ。**Notch Builder + Notch Playback** に分かれ、Builder で設計し、Playback ライセンスを持つ PC が出力をホストして、通常はメディアサーバー (disguise, Pixera, Pandoras Box) が指揮する。2026年5月時点で **v0.9.x** が安定し、**1.0 GA** が間近だ。

コンサートビジュアル、e スポーツ決勝、自動車ローンチイベントで Notch は事実上の標準だ。AR カメラトラッキング (stYpe, MoSys)、ディスプレイマッピング、GPU 上でのパーティクル / 流体 / クロスのシミュレーションがリアルタイムで動く。

弱点はコストだ。Builder ライセンスが高価な年契約で、Playback ライセンスも別途必要。代償として disguise メディアサーバーとの結合が深く、1080p ではなく 5K–8K 出力が日常になる。

Cables.gl — ブラウザネイティブのノードベース

**Cables.gl** はベルリンのチームが作ったブラウザベースのノードコーディング環境だ。WebGL 2 上で TouchDesigner 風のパッチを描き、結果をそのまま HTML パッケージとして書き出せる。2026年5月時点で **Cables 3.x** が安定ラインだ。

[Trigger] -> [Time] -> [Math.sin] -> [Object3D position.x]

-> [Math.cos] -> [Object3D position.z]

広告キャンペーンサイト、インタラクティブヘッダー、ワークショップデモなど **「ブラウザで即動くビジュアル」** が必要な現場で強い。パッチは JSON で保存され GitHub 管理にも向く。プラットフォームは SaaS で、無料と Pro / チームプランがある。

Three.js — ウェブ 3D の業界標準

**Three.js** は Ricardo Cabello (Mr.doob) が 2010 年に始めた JavaScript の 3D ライブラリだ。WebGL と WebGPU (`WebGPURenderer`) を同時にサポートし、2026年5月時点の安定ラインは **r170+** だ。WebGPU バックエンドはほぼ全てのコア機能で安定し、USD/Z インポート、IES ライト、ACES Filmic が一級市民になった。

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100)

camera.position.set(3, 3, 5)

const renderer = new THREE.WebGPURenderer({ antialias: true })

renderer.setSize(innerWidth, innerHeight)

document.body.appendChild(renderer.domElement)

const geo = new THREE.IcosahedronGeometry(1, 4)

const mat = new THREE.MeshPhysicalMaterial({ color: 0x3366ff, roughness: 0.2, metalness: 0.8 })

scene.add(new THREE.Mesh(geo, mat))

scene.add(new THREE.HemisphereLight(0xffffff, 0x222244, 1.2))

new OrbitControls(camera, renderer.domElement)

renderer.setAnimationLoop(() => renderer.render(scene, camera))

Three.js は e コマースの 3D プレビュー、データ可視化 (Observable や deck.gl と並んで)、ゲームプロトタイプ、NFT ギャラリー、AR.js / WebXR まで、ほぼ全ての場所にいる。業界標準だ。

React Three Fiber & Tres.js — 宣言的 Three.js

**React Three Fiber (R3F)** は Three.js を React コンポーネントとして包んだライブラリだ。Poimandres コレクティブ (`drei`, `cannon-es`, `zustand`) がメンテしている。JSX で 3D シーンを書く。

function Spinner() {

const ref = useRef()

useFrame((_, dt) => { ref.current.rotation.x += dt; ref.current.rotation.y += dt * 0.5 })

return (

)

}

export default function App() {

return (

)

}

**Tres.js** は同じ発想を Vue 3 に移したライブラリだ。SFC 一つで 3D シーンを構成し、Cientos ライブラリが R3F の drei に相当する役割を担う。Next.js / Nuxt のようなフルスタックフレームワーク内で 3D コンテンツを扱うなら、R3F と Tres が事実上の標準だ。

Babylon.js / A-Frame / PlayCanvas / Needle — Three.js 以外の選択

ウェブ 3D 市場は Three.js だけではない。2026年5月時点で生きている選択肢は以下の通り。

- **Babylon.js 7.x**: Microsoft が支援。フルゲームエンジン的 — 物理、ノードマテリアルエディタ、GUI、インスペクタまでセット。WebXR / Quest 3 ビルドの安定性が強み。

- **A-Frame**: HTML コンポーネント方式の WebXR。Three.js の上に乗っている。教育と単純な 360 ビューワーに強い。

- **PlayCanvas**: 英国発のゲームエンジン。SaaS の協業エディタが特徴で、広告ゲーム / モバイル広告クリエイティブで強い。

- **Needle Engine**: Unity から書き出すと WebGL/WebGPU ビルドが自動で出る — Unity ワークフローをそのままウェブに持っていく橋。

選択基準は明快。シェーダーやデータ可視化、軽いシーンは **Three.js + R3F**、フルゲームや物理は **Babylon.js / PlayCanvas**、Unity アセット再利用は **Needle**、360 / AR は **A-Frame** だ。

ジェネラティブ NFT プラットフォーム — Art Blocks, fx(hash), Highlight

ジェネラティブアートが NFT で市場を得た流れは 2021–2022 のバブルを通り抜けて、2026年5月時点では **長期コレクター市場** として定着した。

- **Art Blocks** (Ethereum, Snowfro): Curated / Playground / Factory / Engine のトラック制。Tyler Hobbs の Fidenza、Dmitri Cherniak の Ringers が正典。トークンハッシュ (`tokenData.hash`) を種に p5.js / Three.js でレンダー。

- **fx(hash)** (Tezos): オープン発行モデル。誰でもミントでき、権威キュレーションは弱い。代わりに手数料が安く実験が速い。

- **Highlight**: マルチチェーン (Base, Zora, Ethereum)。Highlight Studio でノーコード発行もできる。

- **Bright Moments**: IRL ミントのギャラリーモデル。ヴェネツィア、東京、ベルリンでコレクターの前で発行するイベント。

作家は同じコードを複数プラットフォームに変形リリースするのが普通だ。p5.js + `fxhash` SDK、p5.js + `artblocks-engine` SDK のような SDK が標準 IO インターフェースを提供する。

ml5 Next + Magenta.js — ブラウザ内で ML と結合

**ml5.js** は NYU ITP の Daniel Shiffman 班が始めた TensorFlow.js ラッパーだ。2025 年に **ml5 Next** という名前でモダンリビルドが始まり、2026年5月時点で使える安定モジュールは以下の通り。

- `ml5.handpose`, `ml5.bodyPose`, `ml5.facemesh` — 手 / 体 / 顔の推定

- `ml5.imageClassifier` — MobileNet / TeachableMachine 互換

- `ml5.soundClassifier` — Speech Commands

- `ml5.neuralNetwork` — ブラウザ内での学習と推論

let video, handPose, hands = []

async function setup() {

createCanvas(640, 480)

video = createCapture(VIDEO)

video.size(640, 480); video.hide()

handPose = await ml5.handPose()

handPose.detectStart(video, results => { hands = results })

}

function draw() {

image(video, 0, 0)

for (const h of hands) {

for (const kp of h.keypoints) {

fill(0, 255, 180)

circle(kp.x, kp.y, 8)

}

}

}

**Magenta.js** (Google) は音楽 ML 側 — MelodyRNN、MusicVAE、DDSP-WAE をブラウザでリアルタイム実行する。**transformers.js** (Xenova / Hugging Face) は ONNX 変換済みの LLM / CLIP / SAM / Whisper をブラウザで動かす。**TensorFlow.js + p5** 直結や **ONNX Runtime Web + Three.js** の組み合わせも普通になった。

Resolume / MadMapper / VDMX — ライブ VJ とプロジェクションマッピング

ライブ映像を舞台に送出する段階は別ツールの領域だ。

- **Resolume Arena / Avenue**: オランダ企業。VJ セットで事実上の標準。クリップトリガー、シェーダー (`FFGL`, `ISF`)、Spout/Syphon、NDI 6 対応。

- **MadMapper**: GarageCUBE。プロジェクションマッピングと LED マッピングに特化。Mac/Win 両対応。

- **VDMX**: VIDVOX。macOS 専用、ISF シェーダー対応が強い。

- **Modul8**: GarageCUBE。クラシックな macOS VJ ツール。シンプルで安定。

- **Coge**: macOS 発の新顔。Metal 上で軽量。

TouchDesigner との関係はだいたい「TouchDesigner がコンテンツ生成、Resolume がライブトリガー」の分業だ。Syphon (macOS) / Spout (Windows) で GPU テクスチャをアプリ間でパススルーするのでキャプチャカード不要だ。

Max/MSP, Pure Data, M4L — メディアと MIDI のバックボーン

**Max/MSP** (Cycling '74) は 1980 年代に IRCAM で始まったメディアプログラミング環境だ。2026 年時点で **Max 9** が安定ラインで、**Max for Live (M4L)** で Ableton Live に組み込まれる。**Pure Data** (Miller Puckette, OSS) は Max のオープンソース版だ。

クリエイティブコーディング作家にとって Max はだいたい **MIDI コントローラ ↔ TouchDesigner / Hydra** をつなぐミドルウェアとして働く。Max でコントローラー信号を受け、OSC で TouchDesigner / Hydra / Processing に流す。

似た流れの姉妹ツールに **Bitwig Studio + The Grid** がある。モジュラーシンセのパッチを DAW 内で直接書き、OSC / MIDI でビジュアルへ送り出す。

WLED / Hyperion / PixelBlaze — ピクセルと LED の制御

クリエイティブコーディングの出力は画面だけではない。WS2812B/SK6812 系の **LED ストリップとマトリクス** はインスタレーションの大きな軸だ。

- **WLED**: ESP8266/ESP32 用ファームウェア。無料 OSS。200 種以上の組み込みエフェクト。Home Assistant、MQTT、E1.31(sACN)、Art-Net をサポート。2026 年では **WLED 0.16.x** が安定ライン。

- **Hyperion.ng**: Raspberry Pi ベースのアンビエントライトシステム。TV / モニタの端の色を取って LED に流す。

- **PixelBlaze** (electromage): JS シェーダー風コードで LED パターンを書くコントローラー。作家に人気。

- **OctoWS2811 + Teensy 4.1**: Paul Stoffregen。数万ピクセル規模 LED マトリクスの定番ハード。

これらと TouchDesigner / openFrameworks を **Art-Net / sACN** プロトコルで結ぶのが標準ワークフローだ。一つのパッチで画面プレビューと LED 出力を同時にデバッグできる。

韓国のクリエイティブコーディング — 白南準の影の上で

韓国メディアアートとクリエイティブコーディングは白南準 (ナム・ジュン・パイク) という巨大な影の上に立つ。2026年5月時点で活動が目立つ場は以下の通り。

- **白南準アートセンター** (京畿龍仁): メディアアートの正典。年 1–2 回の企画展。

- **国立現代美術館 MMCA**: ソウル館マルチプロジェクトホールにデジタル / メディアアートトラック。

- **Random Walks**: Jiyin Kim 等が率いるスタジオ。インタラクティブインスタレーションとデータアート。

- **Code in Pajamas Studio**: Jiyin Kim 系列のスタジオ。ワークショップと教育。

- **WOOM Lab、KAIST CT、弘益大デジタルメディアデザイン**: 学校系インキュベーション。

- **ソウル・メディアシティ・ビエンナーレ**: 隔年開催。2024–2025 シーズンでデジタルアート比重を再度高めた。

ツール構成は **TouchDesigner 主体 + p5.js / Three.js のウェブ出力** の混合が中心だ。グローバル平均と比べると openFrameworks の比重がやや低く、TouchDesigner と Notch が大型イベント市場で目立つ。

日本のクリエイティブコーディング — Rhizomatiks と teamLab の分岐

日本はクリエイティブコーディングとメディアアートの世界的拠点だ。2026年5月時点の中核は以下の通り。

- **Rhizomatiks (ライゾマティクス、真鍋大度代表)**: Perfume、Björk、ELEVENPLAY とのコラボで知られるスタジオ。openFrameworks + TouchDesigner + Unity の深い混成。

- **teamLab (チームラボ)**: 東京麻布台と豊洲のデジタルアート美術館。自社エンジン。年間数百万人が訪れるインタラクティブインスタレーション。

- **WOW Inc.** (東京/仙台/ロンドン): モーショングラフィックス + インタラクティブの正典。自動車 / 化粧品広告で強い。

- **プラプラックス (Plaplax)**: 子ども向けインタラクティブ、博物館コンテンツ。

- **村上裕介 / BRDG**: ビジュアルデザインとデータアート。

- **遠藤侑介 (Yusuke Endoh)**: Quine コードアートの正典を作る個人作家。

ツール分布は世界平均に近いが、**openFrameworks と Unity** の比重が韓国より高い。teamLab は自社エンジン、Rhizomatiks は制作内容によって OF、Unity、TouchDesigner を回す。

教育とコミュニティ — Coding Train, Genuary, OpenProcessing

クリエイティブコーディングは強い教育・コミュニティインフラに支えられている。

- **The Coding Train** (Daniel Shiffman, NYU ITP): YouTube チャンネルと thecodingtrain.com。p5.js、Processing、ml5 チュートリアルの正典。登録者 100 万人超。

- **OpenProcessing**: p5.js スケッチギャラリーとチャレンジサイト。Sinan Ascioglu 運営。Glitch / CodeSandbox と接続。

- **Genuary**: 毎年 1 月の 31 日間、毎日違うプロンプトで作る (Generative January)。Twitter / Bluesky で最も賑わう月。

- **Plottertober**: ペンプロッター (AxiDraw, iDraw, NextDraw) で毎日描く 10 月。

- **Inktober**: 直接的なクリエイティブコーディングイベントではないが作家の連携が大きい。

- **CreativeApplications.Net**、**NEORT**、**fx(hash) Discovery**: 作品キュレーションのハブ。

2026 年に新しく目立ったのは **AI プロンプト連動の Genuary** だ。毎日のプロンプトに「AI アシスタントと共著したコードのみ提出」と明示されることが増えた。

クリエイティブコーディングと AI エージェント — Cursor と Claude の新しい役割

2025–2026 年で最大の変化は **AI コードエージェントの台頭** だ。作家が Cursor / Claude Code / Continue で p5.js スケッチを始めるのが自然な風景になった。よく見るパターンは以下の通り。

- **プロンプトで下書き → 作家が後処理**: 「花びらが散るパーティクル、自分のパレットで」のような自然言語プロンプトで初稿を得て、30–60% を作家が修正。

- **シェーダーデバッグ**: GLSL / WGSL の数学・行列バグを速く取るペア。

- **データセット → ビジュアルマッピング**: LLM が CSV / JSON を要約し、その統計で `mapToShape()` を自動生成。

- **新 API の習得**: **`p5.strands`** シェーダー DSL のような追加機能を早く身につける助手。

作家性の議論は熱い。「AI と共著したスケッチでも作家性は保てるのか」は fx(hash) や Art Blocks の議論で何度も戻る話題だ。ポリシーは作家ごとに違い、自発的な開示 (disclosure) ノルムが芽生えつつある。

組み合わせパターン — 実作品はどう積まれるか

各ツールが明確な強みを持つので、実作品は単一ツールではなく **組み合わせパターン** で作られる。2026年5月時点でよく見る 6 種の組み合わせは以下の通り。

1. **ジェネラティブ NFT**: p5.js 一ファイル → fx(hash) または Art Blocks Engine 配布。

2. **コンサートビジュアル**: Notch Builder の映像 + disguise メディアサーバー + Resolume のライブトリガー。

3. **美術館インスタレーション**: TouchDesigner の映像 + Kinect / Azure DK センサー + Art-Net で LED。

4. **個人ライブ VJ セット**: Hydra + Strudel 音響 + MIDI コントローラ → クラブのプロジェクタ。

5. **ウェブインタラクティブ**: Three.js / R3F + transformers.js のカメラ入力 → シェーダー。

6. **ペンプロッター作品**: Processing 4 + Py5 → AxiDraw → 紙。

組み合わせの肝は OSC / Syphon / Spout / NDI のような **共通 IO プロトコル** だ。作品の背骨はツール選びではなく、信号の流れをどう描くかにある。

導入ロードマップ — ゼロから初作品まで

クリエイティブコーディングを始める人向けの標準ロードマップを 1 枚に整理する。

1. **Week 1–2**: p5.js ウェブエディタで 25–30 個の短いスケッチ。Coding Train シリーズを追う。

2. **Week 3–4**: Genuary か自分の 30 日チャレンジで毎日 1 作品。GitHub に公開。

3. **Month 2**: ツールを 1 段拡張。Processing 4 / Hydra / TouchDesigner の中から一つを選び 30 時間学習。

4. **Month 3**: 初めての fx(hash) リリースまたは OpenProcessing ギャラリー登録。フィードバックを集める。

5. **Month 4–6**: AI 統合 — ml5 Next または transformers.js でカメラ入力作品を 1 点。

6. **Month 6+**: ライブ出力 — VJ セットまたはインスタレーションコラボ。Resolume か Notch まで拡張。

肝はツール比較に埋没せず、**毎日短く作る** ことだ。ツール構成は作品に強いられた時に自然に増える。

おわりに — 2026 年 5 月、「コードも筆、モデルも筆」

結論は単純だ。2026 年のクリエイティブコーディングで **AI は新しい媒体ではなく、新しい色** だ。一人の作家が p5.js、Processing 4、TouchDesigner、Hydra、ml5 Next を同じ一作品の中で使うのが普通になった。ツール間の境界はさらに曖昧になり、信号フロー設計の重要度が増している。

最大の変化は二つだ。第一に、**ウェブ標準 (WebGPU, WebXR, transformers.js) の成熟** によってブラウザ一箇所で完結する仕事が増えた。第二に、**AI アシスタントの導入で学習曲線が緩やかになり** 参入障壁が下がった。両方が作家性に新たな挑戦を投げかける。

ツール選択に時間をかけすぎないこと。毎日作って、毎週共有し、毎月新ツールを一つ差し込むだけで、1 年で自分のスタイルが生まれる。コードはその過程の一部であって、ゴールではない。

References

- Processing 公式サイト: https://processing.org/

- p5.js 公式サイト: https://p5js.org/

- p5.js 2.0 リリースノート: https://github.com/processing/p5.js/releases

- openFrameworks 公式サイト: https://openframeworks.cc/

- Cinder 公式サイト: https://libcinder.org/

- OPENRNDR 公式サイト: https://openrndr.org/

- Nannou 公式サイト: https://nannou.cc/

- Hydra 公式サイト: https://hydra.ojack.xyz/

- TidalCycles 公式サイト: https://tidalcycles.org/

- SuperCollider 公式サイト: https://supercollider.github.io/

- Strudel 公式サイト: https://strudel.cc/

- Sonic Pi 公式サイト: https://sonic-pi.net/

- TouchDesigner 公式サイト: https://derivative.ca/

- vvvv gamma 公式サイト: https://visualprogramming.net/

- Notch 公式サイト: https://www.notch.one/

- Cables.gl 公式サイト: https://cables.gl/

- Three.js 公式サイト: https://threejs.org/

- React Three Fiber ドキュメント: https://docs.pmnd.rs/react-three-fiber/

- Tres.js 公式サイト: https://tresjs.org/

- Babylon.js 公式サイト: https://www.babylonjs.com/

- A-Frame 公式サイト: https://aframe.io/

- PlayCanvas 公式サイト: https://playcanvas.com/

- Needle Engine 公式サイト: https://needle.tools/

- Art Blocks 公式サイト: https://www.artblocks.io/

- fx(hash) 公式サイト: https://www.fxhash.xyz/

- Highlight 公式サイト: https://highlight.xyz/

- Bright Moments 公式サイト: https://www.brightmoments.io/

- ml5.js 公式サイト: https://ml5js.org/

- ml5 Next GitHub: https://github.com/ml5js/ml5-next-gen

- Magenta.js 公式サイト: https://magenta.tensorflow.org/js

- transformers.js 公式サイト: https://huggingface.co/docs/transformers.js

- Resolume 公式サイト: https://resolume.com/

- MadMapper 公式サイト: https://madmapper.com/

- VDMX 公式サイト: https://vidvox.net/

- Cycling '74 Max 公式サイト: https://cycling74.com/

- Pure Data 公式サイト: https://puredata.info/

- WLED 公式サイト: https://kno.wled.ge/

- PixelBlaze 公式サイト: https://electromage.com/pixelblaze

- Coding Train 公式サイト: https://thecodingtrain.com/

- OpenProcessing 公式サイト: https://openprocessing.org/

- Genuary 公式サイト: https://genuary.art/

- Rhizomatiks 公式サイト: https://rhizomatiks.com/

- teamLab 公式サイト: https://www.teamlab.art/

- WOW Inc. 公式サイト: https://www.w0w.co.jp/

- 白南準アートセンター: https://njp.ggcf.kr/