Skip to content
Published on

AI Creative Coding & Visual Art 2026 Deep Dive - Processing 4 · p5.js · openFrameworks · Hydra · TouchDesigner · Notch · Cables.gl · Tres.js · Three.js · OPENRNDR · Nannou (Rust)

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

Intro — May 2026, Creative Coding Treats AI as a Second Color

Until the early 2020s, creative coding mostly meant "draw with Processing or p5.js in a single file." By May 2026 the picture has shifted completely. Diffusion models live inside the sketching tool, ml5 Next adds realtime pose estimation in one line, and Hydra live-coded visuals routinely embed transformers.js sentiment classifiers. At the same time the older tools have sharper niches — Processing 4 owns desktop & print, p5.js owns web/NFT, openFrameworks owns installations, TouchDesigner and Notch own live events, and Three.js + R3F became the de facto web 3D standard.

This article is not a marketing matrix but an honest pass at "what gets made where, today." It covers Art Blocks and fx(hash) generative NFTs, the Rhizomatiks and teamLab scene in Japan, Random Walks and the Nam June Paik Art Center in Korea, and the global education ecosystem around Coding Train, Genuary, and OpenProcessing.

Creative Coding 2026 — The Eight Tracks at a Glance

First the big picture. The May 2026 ecosystem splits into eight tracks:

  1. Foundation libraries: Processing 4, p5.js 2.0, openFrameworks, Cinder, OPENRNDR, Nannou
  2. Live coding: Hydra, TidalCycles + SuperCollider, Sonic Pi, Strudel, Punctual
  3. Node-based: TouchDesigner, vvvv gamma, Notch Builder, Cables.gl
  4. Web 3D: Three.js, Tres.js, React Three Fiber, Babylon.js, A-Frame, PlayCanvas
  5. Generative NFT platforms: Art Blocks, fx(hash), Highlight, Bright Moments
  6. AI integration: ml5 Next, Magenta.js, transformers.js, TensorFlow.js + p5, ONNX Runtime Web
  7. Live performance (VJ / mapping): Resolume Arena, MadMapper, VDMX, Coge
  8. MIDI / sound / physical IO: Max/MSP, Pure Data, Ableton Live + M4L, WLED, PixelBlaze

Each track has different audiences and output media. A p5.js piece can go straight to Art Blocks. A TouchDesigner patch goes to ad and event stages. Hydra code becomes a club VJ set. Below we walk through them one by one.

Processing 4 — The Canonical Desktop Creative Coding IDE

Processing was started in 2001 by Ben Fry and Casey Reas at the MIT Media Lab as a Java-based IDE and library. As of May 2026 the 4.x line is stable, with a 5.x alpha public. The 4.x line moved to Java 17 LTS, gained native Apple Silicon ARM builds, dark mode, and a refreshed PDF export pipeline.

A typical Processing 4 sketch looks like this:

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 is strong where you want desktop print at high DPI, pen plotter (AxiDraw, iDraw) integration, and stable OpenGL / P3D. Java libraries (PostgreSQL JDBC, iText PDF, etc.) plug in cleanly. It remains the most popular tool for Genuary and Plottertober.

If you prefer Python there is Processing.py (Python Mode), and for a lighter workflow Py5 — a Python binding on top of Processing 4 — settled in 2026. Py5 runs inside Jupyter notebooks, so data viz plus generative art flows blend naturally.

p5.js 2.0 — The Web-First Reinterpretation of Processing

p5.js was started by Lauren McCarthy in 2013 as a JavaScript port of Processing. As of May 2026 p5.js 2.0 is the headline major release. Key changes:

  • WebGL2 by default: shaders / instancing / texture arrays are first-class
  • ESM-first and tree-shakable: production bundles can drop under 200KB
  • Built-in accessibility: ARIA and text alternatives generated automatically
  • Strengthened TypeScript definitions: autocomplete and refactors are reliable

A basic p5 sketch reads naturally on first sight.

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's biggest pull is that the same sketch runs unmodified on fx(hash), Art Blocks Engine, and OpenProcessing. A single-file sketch becomes an NFT. The friendlier shader DSL via p5.strands and the cleaner Web Audio surface in p5.sound 2 are also meaningful updates.

openFrameworks — The C++ Workhorse for Installations

openFrameworks (OF) was started in 2005 by Zach Lieberman, Theo Watson, Arturo Castro and others as a C++ creative coding toolkit. As of May 2026 0.12.x is the stable release, with native Apple Silicon, oF/iOS 17 and visionOS builds, and a Vulkan renderer (ofxVk).

For large interactive installations — multi-screen, sensor and camera IO, museum-grade installs — openFrameworks remains the gold standard. The ofxAddon ecosystem is deep: ofxOpenCv, ofxKinect, ofxOsc, ofxMidi, ofxAssimp, ofxImGui have become de facto standards.

#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);
  }
};

A sibling C++ framework is Cinder (libcinder). Its license is more commercially friendly (BSD-2) and it pairs well with modern C++. Cinder still anchors Apple internal demos, Black Rock City installations, and many music tour visuals.

OPENRNDR — Modern Creative Coding on Kotlin / JVM

OPENRNDR is a Kotlin-based creative coding framework from the Dutch studio RNDR. It combines JVM stability, expressive Kotlin DSLs, and an OpenGL 4.3 renderer. As of May 2026 0.4.x is the stable line, and it debugs natively inside 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 shines in data viz and infographic-heavy work. PDF, SVG, and PNG-series exports are clean, and Kotlin Coroutines make async composition feel natural.

Nannou — Creative Coding in Rust

Nannou is the Rust creative coding framework. Started by Tom Bevan and Mitchell Nordine, it rides on the wgpu backend (Vulkan / Metal / DX12) and targets desktop plus Wasm. As of May 2026 0.20.x is the main line, with growing affinity to Bevy and other game engines.

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's strictness is a steep onboarding cost, but in return you get single-binary distribution, memory safety, and wgpu shader authoring. Music performance visuals, embedded LED controllers, and pen plotter workflows are increasingly Rust-first.

Hydra — Olivia Jack's Live-Coded Visuals

Hydra is a JavaScript live-coded visual environment from Olivia Jack. It runs instantly in the browser and chains GLSL shader functions through a fluent API. As of May 2026 it is the de facto standard for the live coding / algorave scene.

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()

Six lines produce a kinetic mandala. Hydra exposes s0, s1, s2, s3 input channels for camera, screen, and video files, and o0–o3 output buffers for multi-pass composition. Hydra Sync (via hydra-synth node) lets live coders exchange feeds peer-to-peer via WebRTC and has become a standard club-set trick.

Alternatives include Punctual (David Ogborn, Haskell-based DSL) and Cyril (Processing-based DSL). For a node-based live coding angle, see vvvv gamma below.

TidalCycles + SuperCollider — Two Standards for Live-Coded Sound

TidalCycles is Alex McLean's Haskell DSL for pattern-based live coding of sound. It uses SuperCollider (SC3, James McCartney) plus the SuperDirt synthesis library as its backend. In 2026 it remains the standard for algorave sound sets.

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"

For a browser-friendly path there is Strudel (Tidal in JavaScript, by Felix Roos). It speaks Tidal syntax on top of the Web Audio API and pairs cleanly with Hydra for live visuals. Sonic Pi (Sam Aaron, Ruby DSL) is strong in education and school live coding.

The Tidal + Hydra + Strudel bundle is the canonical algorave stack. Korea has ACMP and Algorave Seoul as recurring events.

TouchDesigner — The Leader of Node-Based Installations

TouchDesigner (Derivative) is a node-based visual programming environment started in 2000 by ex-Houdini developers. It uses a signal-flow paradigm with CHOP (channel), TOP (texture), SOP (surface), MAT (material), and COMP (component) networks. As of May 2026 the stable line is 2024.40000+, with NDI 6, native Apple Silicon, and a refreshed Engine COMP.

For installations (exhibitions, ad booths, concerts), concert visuals, AR stages, LED matrix control, and machine-vision-driven interactives, TouchDesigner is effectively the leader. Its embedded Python interpreter handles OSC, MIDI, WebSocket and gRPC natively. Educational / Non-Commercial is free; Commercial is an annual license model.

Alternatives are vvvv gamma (the .NET-based environment from Germany's NODE group) and Notch Builder. vvvv gamma is a real program graph with an embedded compiler; Notch is stronger at concert and live-event scale.

Notch Builder — The Standard for Concert / Live Events

Notch is a node-based realtime visual tool from a UK company, split into Notch Builder plus Notch Playback. You design in the Builder; a Playback-licensed PC hosts the output, usually orchestrated by a media server (disguise, Pixera, Pandoras Box). As of May 2026 v0.9.x is stable with 1.0 GA imminent.

For concert visuals, esports grand finals, and car launch events, Notch is effectively the standard. AR camera tracking (stYpe, MoSys), display mapping, and GPU-side particle / fluid / cloth simulation all run live.

The downside is cost. Builder licenses are pricey annual subscriptions, with additional Playback license fees. In return you get deep integration with disguise media servers, and 5K–8K outputs are routine rather than exceptional.

Cables.gl — Browser-Native Node-Based Coding

Cables.gl is a browser-based node coding environment from a Berlin team. On top of WebGL 2 you draw TouchDesigner-style patches, then export the result as a self-contained HTML bundle. As of May 2026 Cables 3.x is the stable line.

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

It thrives where you want visuals that run instantly in the browser — campaign sites, interactive headers, workshop demos. Patches save as JSON, which keeps them Git-friendly. The platform is SaaS with free and Pro/team tiers.

Three.js — The Industry Standard for Web 3D

Three.js was started in 2010 by Ricardo Cabello (Mr.doob). It supports WebGL and WebGPU (WebGPURenderer) side by side, and as of May 2026 the stable line is r170+. The WebGPU backend is now stable across nearly all core features, and USD/Z import, IES lighting, and ACES Filmic are first-class.

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 shows up everywhere — e-commerce 3D previews, data viz (next to Observable and deck.gl), game prototypes, NFT galleries, AR.js / WebXR. It is the industry standard.

React Three Fiber & Tres.js — Declarative Three.js

React Three Fiber (R3F) wraps Three.js as React components. The Poimandres collective (drei, cannon-es, zustand) maintains it. You write 3D scenes in JSX.

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 ports the idea to Vue 3. Single-file components carry an entire 3D scene, and the Cientos library mirrors R3F's drei. For 3D content inside a Next.js or Nuxt full-stack app, R3F and Tres are essentially the standard.

Babylon.js / A-Frame / PlayCanvas / Needle — Beyond Three.js

Three.js isn't the only option. As of May 2026 the live alternatives are:

  • Babylon.js 7.x: backed by Microsoft. Full game-engine flavor — physics, node material editor, GUI, and an inspector all included. Strongest on WebXR and Quest 3 builds.
  • A-Frame: HTML-component-style WebXR. Built on top of Three.js. Strong for education and simple 360 viewers.
  • PlayCanvas: a UK-origin engine with a SaaS collaborative editor. Strong in ad games and mobile ad creatives.
  • Needle Engine: export from Unity and get a WebGL/WebGPU bundle automatically — the bridge for Unity studios going to the web.

Selection is straightforward: shaders and data viz lean Three.js + R3F; full games and physics go to Babylon.js or PlayCanvas; Unity asset reuse goes to Needle; education and 360 / AR go to A-Frame.

Generative NFT Platforms — Art Blocks, fx(hash), Highlight

After the 2021–2022 bubble, generative NFTs settled by May 2026 into a more durable long-form collector market.

  • Art Blocks (Ethereum, Snowfro): Curated / Playground / Factory / Engine tracks. Tyler Hobbs's Fidenza and Dmitri Cherniak's Ringers anchor the canon. Token hash (tokenData.hash) drives a p5.js / Three.js render.
  • fx(hash) (Tezos): open release model. Anyone can mint, with little gatekeeping. Lower fees and faster experiments.
  • Highlight: multichain (Base, Zora, Ethereum). Highlight Studio supports no-code releases too.
  • Bright Moments: an IRL minting gallery model — events in Venice, Tokyo, and Berlin where collectors witness mints live.

Artists routinely release variants of the same code across platforms. SDKs like p5.js + fxhash SDK and p5.js + artblocks-engine SDK supply a standard IO interface.

ml5 Next + Magenta.js — Combining ML in the Browser

ml5.js is a TensorFlow.js wrapper started by Daniel Shiffman's group at NYU ITP. In 2025 a modern rebuild called ml5 Next kicked off, and as of May 2026 the stable modules include:

  • ml5.handpose, ml5.bodyPose, ml5.facemesh — hand / body / face estimation
  • ml5.imageClassifier — MobileNet / TeachableMachine compatible
  • ml5.soundClassifier — Speech Commands
  • ml5.neuralNetwork — in-browser training and inference
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) is the music ML side — MelodyRNN, MusicVAE, and DDSP-WAE run live in the browser. transformers.js (Xenova / Hugging Face) ships ONNX-converted LLMs, CLIP, SAM, and Whisper to the browser too. Common combos include TensorFlow.js + p5 direct integration and ONNX Runtime Web + Three.js.

Resolume / MadMapper / VDMX — Live VJing and Projection Mapping

Sending live visuals to a stage is a separate tooling category.

  • Resolume Arena / Avenue: Dutch company. De facto standard for VJ sets. Clip triggering, shaders (FFGL, ISF), Spout/Syphon, NDI 6.
  • MadMapper: GarageCUBE. Specialized in projection mapping and LED mapping. Mac and Windows.
  • VDMX: VIDVOX. macOS-only, with strong ISF shader support.
  • Modul8: GarageCUBE. A classic macOS VJ tool — simple and stable.
  • Coge: a newer macOS option that runs lean on Metal.

The relationship with TouchDesigner is usually a split — TouchDesigner generates content, Resolume triggers it live. Syphon (macOS) and Spout (Windows) pass GPU textures between apps without capture cards.

Max/MSP, Pure Data, M4L — The MIDI and Media Backbone

Max/MSP (Cycling '74) is the media programming environment that started at IRCAM in the 1980s. As of 2026 Max 9 is the stable line, with Max for Live (M4L) embedded inside Ableton Live. Pure Data (Miller Puckette, OSS) is Max's open-source sibling.

For creative coding artists, Max usually acts as middleware connecting MIDI controllers to TouchDesigner / Hydra. Max receives controller signals and forwards them as OSC to TouchDesigner, Hydra, or Processing.

A sibling tool with similar flow is Bitwig Studio + The Grid. You patch modular synth signal flow inside a DAW and ship it as OSC / MIDI to your visual stack.

WLED / Hyperion / PixelBlaze — Pixels and LED Control

Creative coding doesn't only output to screens. WS2812B/SK6812-style LED strips and matrices are an enormous axis of installation work.

  • WLED: firmware for ESP8266/ESP32. Free OSS. 200+ built-in effects. Home Assistant, MQTT, E1.31(sACN), Art-Net support. As of 2026 WLED 0.16.x is the stable line.
  • Hyperion.ng: Raspberry Pi-based ambient light system. Captures TV/monitor edge colors and pushes them to LEDs.
  • PixelBlaze (electromage): an LED controller programmed with JS-shader-like code. Popular with artists.
  • OctoWS2811 + Teensy 4.1: Paul Stoffregen. The standard hardware path for massive (tens of thousands of pixels) LED matrices.

The standard workflow is to bridge these to TouchDesigner / openFrameworks through Art-Net / sACN. A single patch can debug screen previews and LED output side by side.

Korean Creative Coding — In Nam June Paik's Shadow

Korean media art and creative coding still rests on the giant shadow of Nam June Paik. As of May 2026, the notable active venues and groups include:

  • Nam June Paik Art Center (Yongin, Gyeonggi): the canon of media art. One or two flagship exhibitions a year.
  • National Museum of Modern and Contemporary Art (MMCA): a digital / media art track in the Seoul branch's Multi-Project Hall.
  • Random Walks: a studio led by Jiyin Kim and collaborators. Interactive installations and data art.
  • Code in Pajamas Studio: a Jiyin Kim affiliated line — workshops and education.
  • WOOM Lab, KAIST CT, Hongik DM Design: university incubation tracks.
  • Seoul Mediacity Biennale: a biennial event that re-emphasized digital art in 2024–2025.

The toolchain leans TouchDesigner heavy plus p5.js / Three.js for web output. Relative to the global average, openFrameworks is under-represented, while TouchDesigner and Notch dominate the larger event market.

Japanese Creative Coding — The Rhizomatiks–teamLab Split

Japan is a global hub of creative coding and media art. The May 2026 core scene includes:

  • Rhizomatiks (led by Daito Manabe): a studio known for collaborations with Perfume, Björk, and ELEVENPLAY. Deep mix of openFrameworks, TouchDesigner, and Unity.
  • teamLab: digital art museums in Azabudai and Toyosu in Tokyo. Proprietary engine. Millions of yearly visitors.
  • WOW Inc. (Tokyo / Sendai / London): the canon of motion graphics + interactive. Strong in car and cosmetics advertising.
  • Plaplax: children's interactive and museum content.
  • Yusuke Murakami / BRDG: visual design and data art.
  • Yusuke Endoh: a solo artist who anchors the Quine code art canon.

The tool distribution mirrors the global average but openFrameworks and Unity carry more weight than in Korea. teamLab uses its own engine, while Rhizomatiks rotates between OF, Unity, and TouchDesigner depending on the production.

Education + Community — Coding Train, Genuary, OpenProcessing

Strong education and community infrastructure underpins creative coding.

  • The Coding Train (Daniel Shiffman, NYU ITP): the YouTube channel and thecodingtrain.com. The canonical p5.js, Processing, and ml5 tutorials. Over a million subscribers.
  • OpenProcessing: a p5.js sketch gallery and challenge site, run by Sinan Ascioglu. Connects with Glitch and CodeSandbox.
  • Genuary: a daily-prompt event each January (Generative January). The single most active month on Twitter / Bluesky for the scene.
  • Plottertober: a daily pen plotter (AxiDraw, iDraw, NextDraw) event every October.
  • Inktober: not strictly creative coding but with deep artist crossover.
  • CreativeApplications.Net, NEORT, fx(hash) Discovery: curation hubs for the field.

A new 2026 trend is AI-prompt-aware Genuary. Daily prompts increasingly say something like "submit only code co-authored with an AI assistant."

AI Agents in Creative Coding — Cursor and Claude in New Roles

Through 2025–2026, the largest shift has been the rise of AI code agents. Artists routinely start p5.js sketches inside Cursor, Claude Code, or Continue. Frequent patterns:

  • Prompt-to-draft, then artist-polish: a natural-language prompt like "petals falling particle system, in my color palette" returns a first sketch the artist edits 30–60% of.
  • Shader debugging: a fast pair for catching GLSL / WGSL math and matrix bugs.
  • Dataset to visual mapping: an LLM summarizes a CSV / JSON, then auto-generates mapToShape() helpers.
  • Onboarding to new APIs: learning the p5.strands shader DSL and similar additions faster.

The artist-identity debate is loud. "Does an AI-coauthored sketch still belong to the artist?" is a recurring topic on fx(hash) and Art Blocks discussion boards. Policies differ by artist, and voluntary disclosure norms are emerging.

Composition Patterns — How Real Pieces Are Stacked

Because each tool has clear strengths, real artworks come from composition patterns rather than a single tool. The six patterns most commonly seen in May 2026:

  1. Generative NFT: a single p5.js file shipped to fx(hash) or Art Blocks Engine.
  2. Concert visuals: Notch Builder content + disguise media server + Resolume triggering.
  3. Museum installation: TouchDesigner visuals + Kinect / Azure DK sensors + Art-Net to LEDs.
  4. Personal live VJ set: Hydra + Strudel sound + a MIDI controller, projected at a club.
  5. Web interactive: Three.js / R3F + transformers.js webcam input feeding shaders.
  6. Pen plotter piece: Processing 4 + Py5 driving an AxiDraw across paper.

The thread tying these together is the shared IO protocols — OSC, Syphon, Spout, NDI. The artwork's spine is the signal flow you draw, not the specific tool you pick.

Adoption Roadmap — From Zero to a First Piece

A standard roadmap for beginners:

  1. Week 1–2: 25–30 small sketches on the p5.js web editor. Follow Coding Train series.
  2. Week 3–4: A daily 30-day challenge — Genuary or your own. Publish to GitHub.
  3. Month 2: Expand one tool tier. Pick one of Processing 4, Hydra, or TouchDesigner and put 30 hours in.
  4. Month 3: First fx(hash) release or OpenProcessing gallery entry. Collect feedback.
  5. Month 4–6: AI integration — one piece with ml5 Next or transformers.js using camera input.
  6. Month 6+: Live output — a VJ set or an installation collaboration. Extend to Resolume or Notch.

The key is to make small things daily, not to over-compare tools. The tool stack expands naturally when a piece demands it.

Closing — "Code Is a Brush, Models Are a Brush"

The conclusion is simple. In 2026 creative coding, AI is not a new medium — it is a new color. A single artist routinely uses p5.js, Processing 4, TouchDesigner, Hydra, and ml5 Next inside one work. The borders between tools blur, and signal-flow design matters more.

The two largest changes are: first, the maturation of web standards (WebGPU, WebXR, transformers.js) lets more pieces ship inside the browser; second, AI assistants flatten the learning curve, lowering entry barriers. Both pose fresh challenges to artist identity.

Don't agonize over tool choices. Make daily, share weekly, add a new tool monthly, and within a year you will have a recognizable style. Code is one part of that path, not the destination.

References

Discuss on Twitter • View on GitHub