2nd/10_Wiki/Topics/AI_and_ML/Processing.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-processing	Processing	10_Wiki/Topics	verified	self	Processing language p5.js Generative Art Toolkit	none	A	0.9	applied	creative-coding generative-art visualization java javascript		2026-05-10	pending	language framework Java/JavaScript Processing/p5.js

Processing

매 한 줄

"매 sketch 는 setup() + draw() 의 loop". 2001 Casey Reas + Ben Fry @ MIT Media Lab 에서 시작된 creative coding language. 매 visual artist + designer + educator 를 위한 minimal API. 매 2026 현재 p5.js (JavaScript port) 가 web-first default.

매 핵심

매 모델

• setup(): 매 once 실행 — canvas size, initial state.
• draw(): 매 frame 실행 (default 60fps) — render loop.
• mousePressed / keyPressed: 매 event callback.
• frameCount, millis(): 매 time-based animation primitive.

매 변형

• Processing (Java): 매 desktop, 매 OpenGL access, 매 .pde sketch.
• p5.js: 매 web-native JS port — Lauren McCarthy, 2014. 매 modern default.
• Processing.py: 매 Python mode (deprecated 2024, py5 successor).
• py5: 매 Processing 4 + Java17 backend, 매 Python frontend. 매 Jupyter integration.

매 응용

1. Generative art (Casey Reas 의 Process series).
2. Data visualization (Ben Fry, Visualizing Data 책).
3. Live coding / VJing (Hydra adjacency).
4. Interactive installations (museums, galleries).
5. Education — 매 first programming language for 비-CS major.

💻 패턴

Sketch 기본 구조 (p5.js)

function setup() {
  createCanvas(800, 600);
  colorMode(HSB, 360, 100, 100, 1);
}

function draw() {
  background(0, 0, 10, 0.05);  // trail effect
  const t = frameCount * 0.01;
  for (let i = 0; i < 100; i++) {
    const x = width/2 + cos(t + i*0.1) * (200 + i*2);
    const y = height/2 + sin(t + i*0.1) * (200 + i*2);
    fill(i * 3.6, 80, 100);
    noStroke();
    circle(x, y, 8);
  }
}

Perlin noise field (flow field)

let particles = [];

function setup() {
  createCanvas(1000, 1000);
  for (let i = 0; i < 2000; i++) {
    particles.push({x: random(width), y: random(height)});
  }
  background(15);
}

function draw() {
  noStroke();
  for (const p of particles) {
    const a = noise(p.x * 0.003, p.y * 0.003, frameCount * 0.005) * TWO_PI * 4;
    p.x += cos(a) * 1.5;
    p.y += sin(a) * 1.5;
    if (p.x < 0 || p.x > width) p.x = random(width);
    if (p.y < 0 || p.y > height) p.y = random(height);
    fill(255, 50);
    circle(p.x, p.y, 1);
  }
}

Recursive tree (L-system feel)

function setup() {
  createCanvas(800, 800);
  stroke(255);
  noLoop();
}

function draw() {
  background(20);
  translate(width/2, height);
  branch(180);
}

function branch(len) {
  line(0, 0, 0, -len);
  translate(0, -len);
  if (len > 4) {
    push(); rotate(0.4); branch(len * 0.67); pop();
    push(); rotate(-0.4); branch(len * 0.67); pop();
  }
}

Shader (WEBGL mode)

let shader1;

function preload() {
  shader1 = loadShader('vert.glsl', 'frag.glsl');
}

function setup() {
  createCanvas(800, 800, WEBGL);
}

function draw() {
  shader(shader1);
  shader1.setUniform('u_time', millis() * 0.001);
  shader1.setUniform('u_res', [width, height]);
  rect(-width/2, -height/2, width, height);
}

py5 Jupyter sketch

import py5

def setup():
    py5.size(800, 800)
    py5.color_mode(py5.HSB, 360, 100, 100)

def draw():
    py5.background(0, 0, 10)
    for i in range(50):
        h = (i * 7 + py5.frame_count) % 360
        py5.fill(h, 80, 100)
        py5.circle(400 + py5.cos(i) * 200, 400 + py5.sin(i) * 200, 20)

py5.run_sketch()

AI-assisted generative (2026 pattern)

// Claude Opus 4.7 generates sketch from prompt → eval as p5 sketch
// 매 modern workflow: prompt → code → live edit
const response = await fetch('/api/claude', {
  method: 'POST',
  body: JSON.stringify({prompt: 'circular spirograph with 7-fold symmetry'})
});
const code = await response.text();
new Function('p', code)(p5Instance);

매 결정 기준

상황	Approach
Web sketch / share link	p5.js (default 2026)
Desktop performance + OpenGL	Processing 4 (Java)
Python data viz integration	py5
Live VJ / shader-heavy	Hydra or TouchDesigner
Production interactive install	openFrameworks (C++)

기본값: p5.js — 매 web 즉시 share, 매 zero install.

🔗 Graph

• 부모: Creative-Coding · Generative-Art
• 변형: p5js · py5 · openFrameworks
• 응용: Data-Visualization · Interactive-Art
• Adjacent: Hydra · TouchDesigner · Three.js

🤖 LLM 활용

언제: 매 sketch idea → code, 매 stuck on math (rotation, easing), 매 shader GLSL 의 starter. 언제 X: 매 final aesthetic decision — 매 LLM 의 generative output 의 generic. 매 artistic intent 의 human.

❌ 안티패턴

• draw() 안 heavy work: 매 60fps 의 깨짐. preload / setup 의 사용.
• Global mutable state spaghetti: 매 small sketch 에서 OK, 매 large 의 class structure.
• NOLOOP forget: 매 static image 의 noLoop() 의 사용 — 매 CPU 의 절약.
• Pixel-by-pixel without loadPixels(): 매 250x slow. 매 typed array 의 사용.

🧪 검증 / 중복

• Verified (processing.org docs, p5js.org reference).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Processing/p5.js creative coding 의 full content.