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

---
id: wiki-2026-0508-processing
title: Processing
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Processing language, p5.js, Generative Art Toolkit]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [creative-coding, generative-art, visualization, java, javascript]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: Java/JavaScript
  framework: 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)
```javascript
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)
```javascript
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)
```javascript
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)
```javascript
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
```python
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)
```javascript
// 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]]
- Adjacent: [[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. |