2nd/10_Wiki/Topics/Domain_Programming/AI_and_ML/Poetic-Computation.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-poetic-computation	Poetic Computation	10_Wiki/Topics	verified	self	creative-coding generative-art computational-poetics	none	A	0.9	applied	creative-coding generative-art p5js processing		2026-05-10	pending	language framework JavaScript p5.js

Poetic Computation

매 한 줄

"매 code as expressive medium — 매 not just utility, 매 art". 매 poetic computation 매 Taeyoon Choi (School for Poetic Computation, NYC) 의 popularize. 매 Processing (Casey Reas, Ben Fry) → p5.js (Lauren McCarthy) lineage 매 core. 매 generative art, live coding, sonification 의 포함.

매 핵심

매 lineage

• 매 Processing (2001): Casey Reas + Ben Fry @ MIT Media Lab. Java-based. 매 designers + artists 의 entry into code.
• 매 p5.js (2014-): Lauren McCarthy. 매 Processing 의 web port. 매 community-driven, accessibility-focused.
• 매 SFPC (2013-): School for Poetic Computation, NYC. 매 Taeyoon Choi co-founder. 매 "more poetry, less demo".
• 매 Hydra (Olivia Jack): live-coded video synthesizer.
• 매 TidalCycles (Alex McLean): live-coded music patterns.

매 핵심 개념

• 매 generative art: rule-based 매 procedural creation (Perlin noise, L-systems, cellular automata).
• 매 live coding: 매 perform 동안 매 code 의 edit — 매 algorave, code as instrument.
• 매 creative constraints: 매 limits 의 unlock creativity — 매 1KB demos, monochrome, 100 lines.
• 매 critical computing: 매 code 매 political — accessibility, surveillance, bias 의 examine.

매 modern (2026)

• 매 AI + creative coding: 매 Claude/GPT 매 generate p5 sketches, 매 Stable Diffusion 매 texture, 매 Suno 매 audio.
• 매 GenuaryJS, #plottertwitter: 매 community challenges.
• 매 web-native: 매 WebGL2/WebGPU 의 사용 (regl, ogl, three.js).
• 매 plotter art: 매 AxiDraw + p5 → physical drawings.

매 응용

1. 매 generative posters / album covers.
2. 매 live VJ + algorave performances.
3. 매 data sonification + interactive installations.
4. 매 educational tools (teaching coding through art).

💻 패턴

p5.js — flow field

// Perlin noise flow field — 매 generative art 매 classic
let particles = [];
function setup() {
  createCanvas(800, 800);
  for (let i = 0; i < 2000; i++) {
    particles.push({ x: random(width), y: random(height) });
  }
  background(20);
}
function draw() {
  for (let p of particles) {
    let a = noise(p.x * 0.005, p.y * 0.005) * TAU * 2;
    p.x += cos(a); p.y += sin(a);
    stroke(255, 30); point(p.x, p.y);
    if (p.x < 0 || p.x > width || p.y < 0 || p.y > height) {
      p.x = random(width); p.y = random(height);
    }
  }
}

Processing — 10 PRINT generative

// Commodore 64 BASIC: 10 PRINT CHR$(205.5+RND(1)); : GOTO 10
size(800, 800);
background(0); stroke(255); strokeWeight(2);
int s = 20;
for (int y = 0; y < height; y += s) {
  for (int x = 0; x < width; x += s) {
    if (random(1) > 0.5) line(x, y, x+s, y+s);
    else line(x+s, y, x, y+s);
  }
}

Hydra — live-coded video

// hydra.ojack.xyz — 매 browser 에 매 paste
osc(20, 0.1, 1.5)
  .kaleid(5)
  .modulate(noise(3))
  .rotate(0.1)
  .out()

TidalCycles — live-coded music

-- 매 Haskell-based pattern language
d1 $ stack [
  s "bd*4",
  s "~ cp ~ cp",
  n "0 2 4 7" # s "supersaw" # cutoff (range 200 4000 $ slow 4 sine)
]

p5 + ml5.js — AI body tracking

// ml5.js — 매 p5 친화 ML wrapper
let bodyPose, video, poses = [];
function preload() {
  bodyPose = ml5.bodyPose();
}
function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO); video.hide();
  bodyPose.detectStart(video, r => poses = r);
}
function draw() {
  image(video, 0, 0);
  for (let p of poses) {
    for (let kp of p.keypoints) {
      if (kp.confidence > 0.2) circle(kp.x, kp.y, 10);
    }
  }
}

AxiDraw plotter export (SVG)

// p5.svg addon — 매 AxiDraw 의 plot
function setup() {
  createCanvas(800, 800, SVG);
  noFill(); stroke(0);
  for (let i = 0; i < 100; i++) {
    circle(random(width), random(height), random(50, 200));
  }
  save("plot.svg");
}

Claude-generated sketch (LLM workflow)

// Prompt: "p5.js sketch — animated lissajous figure with rainbow trail, 60 lines"
// LLM 매 produces working code → human 매 edit + remix
function setup() { createCanvas(600, 600); colorMode(HSB); background(0); }
function draw() {
  noStroke();
  let t = frameCount * 0.01;
  let x = width/2 + 200 * sin(3*t);
  let y = height/2 + 200 * sin(2*t + PI/4);
  fill((frameCount * 2) % 360, 100, 100, 0.5);
  circle(x, y, 20);
}

매 결정 기준

상황	Tool
매 web-first, beginner	매 p5.js
매 Java/standalone	매 Processing
매 live VJ	매 Hydra
매 live music	매 TidalCycles / SuperCollider
매 high-perf shader	매 Shadertoy / GLSL
매 plotter art	매 p5.svg + AxiDraw
매 ML + creative	매 ml5.js / Magenta

기본값: 매 p5.js (web, free, accessible community).

🔗 Graph

• 부모: Creative-Coding
• 변형: Generative-Art
• Adjacent: Three.js

🤖 LLM 활용

언제: 매 boilerplate sketch 의 generate, 매 stuck on math (rotation, easing) 매 explanation, 매 code golf 의 explore. 언제 X: 매 conceptual originality (LLM 매 derivative), 매 performance-critical shader code (manual tuning).

❌ 안티패턴

• 매 utility-only mindset: 매 "what does it do" only — 매 "how does it feel" 의 ignore.
• 매 framework worship: 매 latest JS framework 의 chase — 매 idea > tool.
• 매 no constraints: 매 unlimited canvas → 매 paralysis. 매 creative constraints embrace.

🧪 검증 / 중복

• Verified (p5.js docs, SFPC, Processing Foundation).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Processing/p5/Hydra/TidalCycles patterns + AI integration