Skip to content
Published on

AI クリエイティブコーディング & ビジュアルアート 2026 完全ガイド - Processing 4 · p5.js · openFrameworks · Hydra · TouchDesigner · Notch · Cables.gl · Tres.js · Three.js · OPENRNDR · Nannou (Rust) 徹底解剖

🇰🇷KO🇺🇸EN🇯🇵JA
Split View필사 모드
Authors

はじめに — 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 でそのままデバッグできる。

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.isolated
import org.openrndr.extra.noise.simplex
import org.openrndr.math.Vector2

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 が一級市民になった。

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

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 シーンを書く。

import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { useRef } from 'react'

function Spinner() {
  const ref = useRef()
  useFrame((_, dt) => { ref.current.rotation.x += dt; ref.current.rotation.y += dt * 0.5 })
  return (
    <mesh ref={ref}>
      <icosahedronGeometry args={[1, 3]} />
      <meshPhysicalMaterial color="hotpink" roughness={0.2} metalness={0.6} />
    </mesh>
  )
}

export default function App() {
  return (
    <Canvas camera={{ position: [3, 3, 5] }}>
      <hemisphereLight intensity={1.2} />
      <Spinner />
      <OrbitControls />
    </Canvas>
  )
}

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

Discuss on Twitter • View on GitHub