---
id: wiki-2026-0508-poetic-computation
title: Poetic Computation
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [creative-coding, generative-art, computational-poetics]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [creative-coding, generative-art, p5js, processing]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: 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
```javascript
// 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
```processing
// 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
```javascript
// 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
-- 매 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
```javascript
// 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)
```javascript
// 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)
```javascript
// 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 |