@baimingtao/lbs-agent 1.0.0

package/extensions/skills/builtin/creative/p5js/references/visual-effects.md

@@ -0,0 +1,895 @@
+# 视觉效果
+
+## Noise
+
+### Perlin Noise 基础
+
+```javascript
+noiseSeed(42);
+noiseDetail(4, 0.5);  // octaves, falloff
+
+// 1D noise — smooth undulation
+let y = noise(x * 0.01);  // returns 0.0 to 1.0
+
+// 2D noise — terrain/texture
+let v = noise(x * 0.005, y * 0.005);
+
+// 3D noise — animated 2D field (z = time)
+let v = noise(x * 0.005, y * 0.005, frameCount * 0.005);
+```
+
+缩放因子（0.005 等）至关重要：
+- `0.001` — 非常平滑，大尺寸特征
+- `0.005` — 平滑，中等尺寸特征
+- `0.01` — 标准的生成艺术缩放比例
+- `0.05` — 细节丰富，小尺寸特征
+- `0.1` — 接近随机，带有颗粒感
+
+### 分形布朗运动
+
+分层 noise octaves 用于生成自然外观的纹理。每一层 octave 都会在更小的尺度上增加细节。
+
+```javascript
+function fbm(x, y, octaves = 6, lacunarity = 2.0, gain = 0.5) {
+  let value = 0;
+  let amplitude = 1.0;
+  let frequency = 1.0;
+  let maxValue = 0;
+  for (let i = 0; i < octaves; i++) {
+    value += noise(x * frequency, y * frequency) * amplitude;
+    maxValue += amplitude;
+    amplitude *= gain;
+    frequency *= lacunarity;
+  }
+  return value / maxValue;
+}
+```
+
+### 域扭曲 (Domain Warping)
+
+将 noise 的输出作为输入坐标反馈回去，从而产生流畅且有机的扭曲效果。
+
+```javascript
+function domainWarp(x, y, scale, strength, time) {
+  // First warp pass
+  let qx = fbm(x + 0.0, y + 0.0);
+  let qy = fbm(x + 5.2, y + 1.3);
+
+  // Second warp pass (feed back)
+  let rx = fbm(x + strength * qx + 1.7, y + strength * qy + 9.2, 4, 2, 0.5);
+  let ry = fbm(x + strength * qx + 8.3, y + strength * qy + 2.8, 4, 2, 0.5);
+
+  return fbm(x + strength * rx + time, y + strength * ry + time);
+}
+```
+
+### 旋度噪声
+
+无散度的噪声场。遵循 curl noise 的粒子永远不会汇聚或发散——它们以平滑、漩涡状的图案流动。
+
+```javascript
+function curlNoise(x, y, scale, time) {
+  let eps = 0.001;
+  // Partial derivatives via finite differences
+  let dndx = (noise(x * scale + eps, y * scale, time) -
+              noise(x * scale - eps, y * scale, time)) / (2 * eps);
+  let dndy = (noise(x * scale, y * scale + eps, time) -
+              noise(x * scale, y * scale - eps, time)) / (2 * eps);
+  // Curl = perpendicular to gradient
+  return createVector(dndy, -dndx);
+}
+```
+
+## 流场
+
+用于引导粒子的向量网格。这是最基础的生成艺术技术。
+
+```javascript
+class FlowField {
+  constructor(resolution, noiseScale) {
+    this.resolution = resolution;
+    this.cols = ceil(width / resolution);
+    this.rows = ceil(height / resolution);
+    this.field = new Array(this.cols * this.rows);
+    this.noiseScale = noiseScale;
+  }
+
+  update(time) {
+    for (let i = 0; i < this.cols; i++) {
+      for (let j = 0; j < this.rows; j++) {
+        let angle = noise(i * this.noiseScale, j * this.noiseScale, time) * TWO_PI * 2;
+        this.field[i + j * this.cols] = p5.Vector.fromAngle(angle);
+      }
+    }
+  }
+
+  lookup(x, y) {
+    let col = constrain(floor(x / this.resolution), 0, this.cols - 1);
+    let row = constrain(floor(y / this.resolution), 0, this.rows - 1);
+    return this.field[col + row * this.cols].copy();
+  }
+}
+```
+
+### 流场粒子
+
+```javascript
+class FlowParticle {
+  constructor(x, y) {
+    this.pos = createVector(x, y);
+    this.vel = createVector(0, 0);
+    this.acc = createVector(0, 0);
+    this.prev = this.pos.copy();
+    this.maxSpeed = 2;
+    this.life = 1.0;
+  }
+
+  follow(field) {
+    let force = field.lookup(this.pos.x, this.pos.y);
+    force.mult(0.5);  // force magnitude
+    this.acc.add(force);
+  }
+
+  update() {
+    this.prev = this.pos.copy();
+    this.vel.add(this.acc);
+    this.vel.limit(this.maxSpeed);
+    this.pos.add(this.vel);
+    this.acc.mult(0);
+    this.life -= 0.001;
+  }
+
+  edges() {
+    if (this.pos.x > width) this.pos.x = 0;
+    if (this.pos.x < 0) this.pos.x = width;
+    if (this.pos.y > height) this.pos.y = 0;
+    if (this.pos.y < 0) this.pos.y = height;
+    this.prev = this.pos.copy();  // prevent wrap line
+  }
+
+  display(buffer) {
+    buffer.stroke(255, this.life * 30);
+    buffer.strokeWeight(0.5);
+    buffer.line(this.prev.x, this.prev.y, this.pos.x, this.pos.y);
+  }
+}
+```
+
+## 粒子系统
+
+### 基础物理粒子
+
+```javascript
+class Particle {
+  constructor(x, y) {
+    this.pos = createVector(x, y);
+    this.vel = p5.Vector.random2D().mult(random(1, 3));
+    this.acc = createVector(0, 0);
+    this.life = 255;
+    this.decay = random(1, 5);
+    this.size = random(3, 8);
+  }
+
+  applyForce(f) { this.acc.add(f); }
+
+  update() {
+    this.vel.add(this.acc);
+    this.pos.add(this.vel);
+    this.acc.mult(0);
+    this.life -= this.decay;
+  }
+
+  display() {
+    noStroke();
+    fill(255, this.life);
+    ellipse(this.pos.x, this.pos.y, this.size);
+  }
+
+  isDead() { return this.life <= 0; }
+}
+```
+
+### 吸引子驱动的粒子
+
+```javascript
+class Attractor {
+  constructor(x, y, strength) {
+    this.pos = createVector(x, y);
+    this.strength = strength;
+  }
+
+  attract(particle) {
+    let force = p5.Vector.sub(this.pos, particle.pos);
+    let d = constrain(force.mag(), 5, 200);
+    force.normalize();
+    force.mult(this.strength / (d * d));
+    particle.applyForce(force);
+  }
+}
+```
+
+### Boid 群集行为
+
+```javascript
+class Boid {
+  constructor(x, y) {
+    this.pos = createVector(x, y);
+    this.vel = p5.Vector.random2D().mult(random(2, 4));
+    this.acc = createVector(0, 0);
+    this.maxForce = 0.2;
+    this.maxSpeed = 4;
+    this.perceptionRadius = 50;
+  }
+
+  flock(boids) {
+    let alignment = createVector(0, 0);
+    let cohesion = createVector(0, 0);
+    let separation = createVector(0, 0);
+    let total = 0;
+
+    for (let other of boids) {
+      let d = this.pos.dist(other.pos);
+      if (other !== this && d < this.perceptionRadius) {
+        alignment.add(other.vel);
+        cohesion.add(other.pos);
+        let diff = p5.Vector.sub(this.pos, other.pos);
+        diff.div(d * d);
+        separation.add(diff);
+        total++;
+      }
+    }
+    if (total > 0) {
+      alignment.div(total).setMag(this.maxSpeed).sub(this.vel).limit(this.maxForce);
+      cohesion.div(total).sub(this.pos).setMag(this.maxSpeed).sub(this.vel).limit(this.maxForce);
+      separation.div(total).setMag(this.maxSpeed).sub(this.vel).limit(this.maxForce);
+    }
+
+    this.acc.add(alignment.mult(1.0));
+    this.acc.add(cohesion.mult(1.0));
+    this.acc.add(separation.mult(1.5));
+  }
+
+  update() {
+    this.vel.add(this.acc);
+    this.vel.limit(this.maxSpeed);
+    this.pos.add(this.vel);
+    this.acc.mult(0);
+  }
+}
+```
+
+## 像素操作
+
+### 读取与写入像素
+
+```javascript
+loadPixels();
+for (let y = 0; y < height; y++) {
+  for (let x = 0; x < width; x++) {
+    let idx = 4 * (y * width + x);
+    let r = pixels[idx];
+    let g = pixels[idx + 1];
+    let b = pixels[idx + 2];
+    let a = pixels[idx + 3];
+
+    // Modify
+    pixels[idx] = 255 - r;       // invert red
+    pixels[idx + 1] = 255 - g;   // invert green
+    pixels[idx + 2] = 255 - b;   // invert blue
+  }
+}
+updatePixels();
+```
+
+### 像素级噪点纹理
+
+```javascript
+loadPixels();
+for (let i = 0; i < pixels.length; i += 4) {
+  let x = (i / 4) % width;
+  let y = floor((i / 4) / width);
+  let n = noise(x * 0.01, y * 0.01, frameCount * 0.02);
+  let c = n * 255;
+  pixels[i] = c;
+  pixels[i + 1] = c;
+  pixels[i + 2] = c;
+  pixels[i + 3] = 255;
+}
+updatePixels();
+```
+
+### 内置滤镜
+
+```javascript
+filter(BLUR, 3);        // Gaussian blur (radius)
+filter(THRESHOLD, 0.5); // Black/white threshold
+filter(INVERT);          // Color inversion
+filter(POSTERIZE, 4);    // Reduce color levels
+filter(GRAY);            // Desaturate
+filter(ERODE);           // Thin bright areas
+filter(DILATE);          // Expand bright areas
+filter(OPAQUE);          // Remove transparency
+```
+
+## 纹理生成
+
+### 点画法 / 修拉点彩法
+
+```javascript
+function stipple(buffer, density, minSize, maxSize) {
+  buffer.loadPixels();
+  for (let i = 0; i < density; i++) {
+    let x = floor(random(width));
+    let y = floor(random(height));
+    let idx = 4 * (y * width + x);
+    let brightness = (buffer.pixels[idx] + buffer.pixels[idx+1] + buffer.pixels[idx+2]) / 3;
+    let size = map(brightness, 0, 255, maxSize, minSize);
+    if (random() < map(brightness, 0, 255, 0.8, 0.1)) {
+      noStroke();
+      fill(buffer.pixels[idx], buffer.pixels[idx+1], buffer.pixels[idx+2]);
+      ellipse(x, y, size);
+    }
+  }
+}
+```
+
+### 半色调
+
+```javascript
+function halftone(sourceBuffer, dotSpacing, maxDotSize) {
+  sourceBuffer.loadPixels();
+  background(255);
+  fill(0);
+  noStroke();
+  for (let y = 0; y < height; y += dotSpacing) {
+    for (let x = 0; x < width; x += dotSpacing) {
+      let idx = 4 * (y * width + x);
+      let brightness = (sourceBuffer.pixels[idx] + sourceBuffer.pixels[idx+1] + sourceBuffer.pixels[idx+2]) / 3;
+      let dotSize = map(brightness, 0, 255, maxDotSize, 0);
+      ellipse(x + dotSpacing/2, y + dotSpacing/2, dotSize);
+    }
+  }
+}
+```
+
+### 交叉影线
+
+```javascript
+function crossHatch(x, y, w, h, value, spacing) {
+  // value: 0 (dark) to 1 (light)
+  let numLayers = floor(map(value, 0, 1, 4, 0));
+  let angles = [PI/4, -PI/4, 0, PI/2];
+
+  for (let layer = 0; layer < numLayers; layer++) {
+    push();
+    translate(x + w/2, y + h/2);
+    rotate(angles[layer]);
+    let s = spacing + layer * 2;
+    for (let i = -max(w, h); i < max(w, h); i += s) {
+      line(i, -max(w, h), i, max(w, h));
+    }
+    pop();
+  }
+}
+```
+
+## 反馈循环
+
+### 帧反馈 (Echo/Trail)
+
+```javascript
+let feedback;
+
+function setup() {
+  createCanvas(800, 800);
+  feedback = createGraphics(width, height);
+}
+
+function draw() {
+  // Copy current feedback, slightly zoomed and rotated
+  let temp = feedback.get();
+
+  feedback.push();
+  feedback.translate(width/2, height/2);
+  feedback.scale(1.005);  // slow zoom
+  feedback.rotate(0.002); // slow rotation
+  feedback.translate(-width/2, -height/2);
+  feedback.tint(255, 245);  // slight fade
+  feedback.image(temp, 0, 0);
+  feedback.pop();
+
+  // Draw new content to feedback
+  feedback.noStroke();
+  feedback.fill(255);
+  feedback.ellipse(mouseX, mouseY, 20);
+
+  // Show
+  image(feedback, 0, 0);
+}
+```
+
+### 泛光 / 辉光（后期处理）
+
+将场景降采样到一个小缓冲区中，进行模糊处理，然后以叠加混合模式覆盖。这会在明亮区域周围产生柔和的辉光。这是标准的生成艺术泛光技术。
+
+```javascript
+let scene, bloomBuf;
+
+function setup() {
+  createCanvas(1080, 1080);
+  scene = createGraphics(width, height);
+  bloomBuf = createGraphics(width, height);
+}
+
+function draw() {
+  // 1. Render scene to offscreen buffer
+  scene.background(0);
+  scene.fill(255, 200, 100);
+  scene.noStroke();
+  // ... draw bright elements to scene ...
+
+  // 2. Build bloom: downsample → blur → upscale
+  bloomBuf.clear();
+  bloomBuf.image(scene, 0, 0, width / 4, height / 4);  // 4x downsample
+  bloomBuf.filter(BLUR, 6);  // blur the small version
+
+  // 3. Composite: scene + additive bloom
+  background(0);
+  image(scene, 0, 0);           // base layer
+  blendMode(ADD);               // additive = glow
+  tint(255, 80);                // control bloom intensity (0-255)
+  image(bloomBuf, 0, 0, width, height);  // upscale back to full size
+  noTint();
+  blendMode(BLEND);             // ALWAYS reset blend mode
+}
+```
+
+**参数调整：**
+- 降采样比例（1/4 为标准值，1/8 更柔和，1/2 更紧凑）
+- 模糊半径（通常为 4-8，数值越大辉光范围越广）
+- Tint alpha（40-120，控制辉光强度）
+- 为节省性能可每 N 帧更新一次 bloom：`if (frameCount % 2 === 0) { ... }`
+
+**常见错误：** 在 ADD 通道之后忘记使用 `blendMode(BLEND)` —— 此后绘制的所有内容都会变成叠加混合模式。
+
+### 拖尾缓冲区亮度
+
+通过 `createGraphics()` 结合半透明消退矩形来实现拖尾累积，这是粒子轨迹的标准技术，但**拖尾总是比你预期的要暗**。消退矩形的 alpha 值在每一帧都会产生乘法叠加效应。
+
+```javascript
+// The fade rect alpha controls trail length AND brightness:
+trailBuf.fill(0, 0, 0, alpha);
+trailBuf.rect(0, 0, width, height);
+
+// alpha=5  → very long trails, very dim (content fades to 50% in ~35 frames)
+// alpha=10 → long trails, dim
+// alpha=20 → medium trails, visible
+// alpha=40 → short trails, bright
+// alpha=80 → very short trails, crisp
+```
+
+**陷阱：** 你为了长拖尾设置了 alpha=5，但 alpha=30 的粒子笔触却看不见，因为它们在累积到足够密度之前就消退了。你可以选择：
+- **提高笔触的 alpha** 到 80-150（而不是直觉上的 20-40）
+- **降低消退的 alpha**，但只能接受较短的拖尾
+- **对笔触使用叠加混合模式**：明亮的粒子会不断累积，暗淡的粒子则保持暗淡
+
+```javascript
+// WRONG: low fade + low stroke = invisible
+trailBuf.fill(0, 0, 0, 5);     // long trails
+trailBuf.rect(0, 0, W, H);
+trailBuf.stroke(255, 30);       // too dim to ever accumulate
+trailBuf.line(px, py, x, y);
+
+// RIGHT: low fade + high stroke = visible long trails
+trailBuf.fill(0, 0, 0, 5);
+trailBuf.rect(0, 0, W, H);
+trailBuf.stroke(255, 100);      // bright enough to persist through fade
+trailBuf.line(px, py, x, y);
+```
+
+### 反应-扩散 (Gray-Scott)
+
+```javascript
+class ReactionDiffusion {
+  constructor(w, h) {
+    this.w = w;
+    this.h = h;
+    this.a = new Float32Array(w * h).fill(1);
+    this.b = new Float32Array(w * h).fill(0);
+    this.nextA = new Float32Array(w * h);
+    this.nextB = new Float32Array(w * h);
+    this.dA = 1.0;
+    this.dB = 0.5;
+    this.feed = 0.055;
+    this.kill = 0.062;
+  }
+
+  seed(cx, cy, r) {
+    for (let y = cy - r; y < cy + r; y++) {
+      for (let x = cx - r; x < cx + r; x++) {
+        if (dist(x, y, cx, cy) < r) {
+          let idx = y * this.w + x;
+          this.b[idx] = 1;
+        }
+      }
+    }
+  }
+
+  step() {
+    for (let y = 1; y < this.h - 1; y++) {
+      for (let x = 1; x < this.w - 1; x++) {
+        let idx = y * this.w + x;
+        let a = this.a[idx], b = this.b[idx];
+        let lapA = this.laplacian(this.a, x, y);
+        let lapB = this.laplacian(this.b, x, y);
+        let abb = a * b * b;
+        this.nextA[idx] = constrain(a + this.dA * lapA - abb + this.feed * (1 - a), 0, 1);
+        this.nextB[idx] = constrain(b + this.dB * lapB + abb - (this.kill + this.feed) * b, 0, 1);
+      }
+    }
+    [this.a, this.nextA] = [this.nextA, this.a];
+    [this.b, this.nextB] = [this.nextB, this.b];
+  }
+
+  laplacian(arr, x, y) {
+    let w = this.w;
+    return arr[(y-1)*w+x] + arr[(y+1)*w+x] + arr[y*w+(x-1)] + arr[y*w+(x+1)]
+           - 4 * arr[y*w+x];
+  }
+}
+```
+
+## 像素排序
+
+```javascript
+function pixelSort(buffer, threshold, direction = 'horizontal') {
+  buffer.loadPixels();
+  let px = buffer.pixels;
+
+  if (direction === 'horizontal') {
+    for (let y = 0; y < height; y++) {
+      let spans = findSpans(px, y, width, threshold, true);
+      for (let span of spans) {
+        sortSpan(px, span.start, span.end, y, true);
+      }
+    }
+  }
+  buffer.updatePixels();
+}
+
+function findSpans(px, row, w, threshold, horizontal) {
+  let spans = [];
+  let start = -1;
+  for (let i = 0; i < w; i++) {
+    let idx = horizontal ? 4 * (row * w + i) : 4 * (i * w + row);
+    let brightness = (px[idx] + px[idx+1] + px[idx+2]) / 3;
+    if (brightness > threshold && start === -1) {
+      start = i;
+    } else if (brightness <= threshold && start !== -1) {
+      spans.push({ start, end: i });
+      start = -1;
+    }
+  }
+  if (start !== -1) spans.push({ start, end: w });
+  return spans;
+}
+```
+
+## 高级生成技术
+
+### L-System (Lindenmayer Systems)
+
+基于语法的递归生长算法，常用于生成树木、植物和分形。
+
+```javascript
+class LSystem {
+  constructor(axiom, rules) {
+    this.axiom = axiom;
+    this.rules = rules;  // { 'F': 'F[+F]F[-F]F' }
+    this.sentence = axiom;
+  }
+
+  generate(iterations) {
+    for (let i = 0; i < iterations; i++) {
+      let next = '';
+      for (let ch of this.sentence) {
+        next += this.rules[ch] || ch;
+      }
+      this.sentence = next;
+    }
+  }
+
+  draw(len, angle) {
+    for (let ch of this.sentence) {
+      switch (ch) {
+        case 'F': line(0, 0, 0, -len); translate(0, -len); break;
+        case '+': rotate(angle); break;
+        case '-': rotate(-angle); break;
+        case '[': push(); break;
+        case ']': pop(); break;
+      }
+    }
+  }
+}
+
+// Usage: fractal plant
+let lsys = new LSystem('X', {
+  'X': 'F+[[X]-X]-F[-FX]+X',
+  'F': 'FF'
+});
+lsys.generate(5);
+translate(width/2, height);
+lsys.draw(4, radians(25));
+```
+
+### 圆形堆叠
+
+用大小不一且互不重叠的圆填满空间。
+
+```javascript
+class PackedCircle {
+  constructor(x, y, r) {
+    this.x = x; this.y = y; this.r = r;
+    this.growing = true;
+  }
+
+  grow() { if (this.growing) this.r += 0.5; }
+
+  overlaps(other) {
+    let d = dist(this.x, this.y, other.x, other.y);
+    return d < this.r + other.r + 2;  // +2 gap
+  }
+
+  atEdge() {
+    return this.x - this.r < 0 || this.x + this.r > width ||
+           this.y - this.r < 0 || this.y + this.r > height;
+  }
+}
+
+let circles = [];
+
+function packStep() {
+  // Try to place new circle
+  for (let attempts = 0; attempts < 100; attempts++) {
+    let x = random(width), y = random(height);
+    let valid = true;
+    for (let c of circles) {
+      if (dist(x, y, c.x, c.y) < c.r + 2) { valid = false; break; }
+    }
+    if (valid) { circles.push(new PackedCircle(x, y, 1)); break; }
+  }
+
+  // Grow existing circles
+  for (let c of circles) {
+    if (!c.growing) continue;
+    c.grow();
+    if (c.atEdge()) { c.growing = false; continue; }
+    for (let other of circles) {
+      if (c !== other && c.overlaps(other)) { c.growing = false; break; }
+    }
+  }
+}
+```
+
+### Voronoi 图（Fortune 算法近似）
+
+```javascript
+// Simple brute-force Voronoi (for small point counts)
+function drawVoronoi(points, colors) {
+  loadPixels();
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      let minDist = Infinity;
+      let closest = 0;
+      for (let i = 0; i < points.length; i++) {
+        let d = (x - points[i].x) ** 2 + (y - points[i].y) ** 2;  // magSq
+        if (d < minDist) { minDist = d; closest = i; }
+      }
+      let idx = 4 * (y * width + x);
+      let c = colors[closest % colors.length];
+      pixels[idx] = red(c);
+      pixels[idx+1] = green(c);
+      pixels[idx+2] = blue(c);
+      pixels[idx+3] = 255;
+    }
+  }
+  updatePixels();
+}
+```
+
+### 分形树
+
+```javascript
+function fractalTree(x, y, len, angle, depth, branchAngle) {
+  if (depth <= 0 || len < 2) return;
+
+  let x2 = x + Math.cos(angle) * len;
+  let y2 = y + Math.sin(angle) * len;
+
+  strokeWeight(map(depth, 0, 10, 0.5, 4));
+  line(x, y, x2, y2);
+
+  let shrink = 0.67 + noise(x * 0.01, y * 0.01) * 0.15;
+  fractalTree(x2, y2, len * shrink, angle - branchAngle, depth - 1, branchAngle);
+  fractalTree(x2, y2, len * shrink, angle + branchAngle, depth - 1, branchAngle);
+}
+
+// Usage
+fractalTree(width/2, height, 120, -HALF_PI, 10, PI/6);
+```
+
+### 奇异吸引子
+
+```javascript
+// Clifford Attractor
+function cliffordAttractor(a, b, c, d, iterations) {
+  let x = 0, y = 0;
+  beginShape(POINTS);
+  for (let i = 0; i < iterations; i++) {
+    let nx = Math.sin(a * y) + c * Math.cos(a * x);
+    let ny = Math.sin(b * x) + d * Math.cos(b * y);
+    x = nx; y = ny;
+    let px = map(x, -3, 3, 0, width);
+    let py = map(y, -3, 3, 0, height);
+    vertex(px, py);
+  }
+  endShape();
+}
+
+// De Jong Attractor
+function deJongAttractor(a, b, c, d, iterations) {
+  let x = 0, y = 0;
+  beginShape(POINTS);
+  for (let i = 0; i < iterations; i++) {
+    let nx = Math.sin(a * y) - Math.cos(b * x);
+    let ny = Math.sin(c * x) - Math.cos(d * y);
+    x = nx; y = ny;
+    let px = map(x, -2.5, 2.5, 0, width);
+    let py = map(y, -2.5, 2.5, 0, height);
+    vertex(px, py);
+  }
+  endShape();
+}
+```
+
+### 泊松圆盘采样
+
+这种均匀分布看起来更加自然——在放置元素时比纯随机效果更好。
+
+```javascript
+function poissonDiskSampling(r, k = 30) {
+  let cellSize = r / Math.sqrt(2);
+  let cols = Math.ceil(width / cellSize);
+  let rows = Math.ceil(height / cellSize);
+  let grid = new Array(cols * rows).fill(-1);
+  let points = [];
+  let active = [];
+
+  function gridIndex(x, y) {
+    return Math.floor(x / cellSize) + Math.floor(y / cellSize) * cols;
+  }
+
+  // Seed
+  let p0 = createVector(random(width), random(height));
+  points.push(p0);
+  active.push(p0);
+  grid[gridIndex(p0.x, p0.y)] = 0;
+
+  while (active.length > 0) {
+    let idx = Math.floor(Math.random() * active.length);
+    let pos = active[idx];
+    let found = false;
+
+    for (let n = 0; n < k; n++) {
+      let angle = Math.random() * TWO_PI;
+      let mag = r + Math.random() * r;
+      let sample = createVector(pos.x + Math.cos(angle) * mag, pos.y + Math.sin(angle) * mag);
+
+      if (sample.x < 0 || sample.x >= width || sample.y < 0 || sample.y >= height) continue;
+
+      let col = Math.floor(sample.x / cellSize);
+      let row = Math.floor(sample.y / cellSize);
+      let ok = true;
+
+      for (let dy = -2; dy <= 2; dy++) {
+        for (let dx = -2; dx <= 2; dx++) {
+          let nc = col + dx, nr = row + dy;
+          if (nc >= 0 && nc < cols && nr >= 0 && nr < rows) {
+            let gi = nc + nr * cols;
+            if (grid[gi] !== -1 && points[grid[gi]].dist(sample) < r) { ok = false; }
+          }
+        }
+      }
+
+      if (ok) {
+        points.push(sample);
+        active.push(sample);
+        grid[gridIndex(sample.x, sample.y)] = points.length - 1;
+        found = true;
+        break;
+      }
+    }
+    if (!found) active.splice(idx, 1);
+  }
+  return points;
+}
+```
+
+## 附加库
+
+### p5.brush — 自然媒介
+
+手绘的有机美感。支持水彩、炭笔、钢笔、马克笔。需要 **p5.js 2.x + WEBGL**。
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/p5.brush@latest/dist/p5.brush.js"></script>
+```
+
+```javascript
+function setup() {
+  createCanvas(1200, 1200, WEBGL);
+  brush.scaleBrushes(3);  // essential for proper sizing
+  translate(-width/2, -height/2);  // WEBGL origin is center
+  brush.pick('2B');  // pencil brush
+  brush.stroke(50, 50, 50);
+  brush.strokeWeight(2);
+  brush.line(100, 100, 500, 500);
+  brush.pick('watercolor');
+  brush.fill('#4a90d9', 150);
+  brush.circle(400, 400, 200);
+}
+```
+
+内置笔刷：`2B`、`HB`、`2H`、`cpencil`、`pen`、`rotring`、`spray`、`marker`、`charcoal`、`hatch_brush`。
+内置向量场：`hand`、`curved`、`zigzag`、`waves`、`seabed`、`spiral`、`columns`。
+
+### p5.grain — 胶片颗粒与纹理
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/p5.grain@0.7.0/p5.grain.min.js"></script>
+```
+
+```javascript
+function draw() {
+  // ... render scene ...
+  applyMonochromaticGrain(42);   // uniform grain
+  // or: applyChromaticGrain(42); // per-channel randomization
+}
+```
+
+### CCapture.js — 确定性视频录制
+
+无论实际渲染速度如何，都以固定的帧率录制画布。这对于复杂的生成艺术而言至关重要。
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script>
+```
+
+```javascript
+let capturer;
+
+function setup() {
+  createCanvas(1920, 1080);
+  capturer = new CCapture({
+    format: 'webm',
+    framerate: 60,
+    quality: 99,
+    // timeLimit: 10,    // auto-stop after N seconds
+    // motionBlurFrames: 4  // supersampled motion blur
+  });
+}
+
+function startRecording() {
+  capturer.start();
+}
+
+function draw() {
+  // ... render frame ...
+  if (capturer) capturer.capture(document.querySelector('canvas'));
+}
+
+function stopRecording() {
+  capturer.stop();
+  capturer.save();  // triggers download
+}
+```