dsh-creation-mode 3.0.0 → 3.0.1

package/references/audio.md

@@ -0,0 +1,167 @@
+# 音画同步
+
+画面和声音各做各的，观众一眼就能看出「配乐是贴上去的」。同步是剪出来的，不是碰出来的。
+
+这一份讲：卡点用哪套时间、声音怎么分线、落点差几毫秒会被听出来、混音电平怎么定。
+
+---
+
+## 一、两套时间
+
+| 时间 | 来源 | 精度 | 用途 |
+|---|---|---|---|
+| `cuts` | 分镜切点 | 秒（0.01） | 段落结构 |
+| `cues` | 分镜里的镜头重点 | 秒（0.01） | 镜头内动作 |
+| `beats` | 你从动画代码里导出 | 毫秒（0.001） | **卡点** |
+
+`cuts` 只告诉你「第 3.6 秒换场」，`beats` 告诉你「第 3.617 秒标题砸下」。
+
+**每写完一段动画，把里面真正「炸」的时刻抄进 `beats`。** 文字砸下、数字跳到、
+粒子聚拢、故障闪一下——这些才是观众会跟着抖的点。
+
+```json
+{ "time": 3.617, "type": "impact", "label": "中文标题砸下", "power": 0.95 }
+```
+
+`power` 决定配乐里这一下的力度档位：0.8 以上当重击，0.4–0.8 当强调，0.4 以下当轻点。
+
+---
+
+## 二、两条总线
+
+配乐代码拿到两个出口：
+
+| 形参 | 接什么 | 处理 |
+|---|---|---|
+| `dest` | 重音、打击乐、转场冲击 | 原样输出，不衰减 |
+| `bed` | 铺底、旋律、和弦、律动 | 每个卡点前后被侧链下压 |
+
+```js
+// 铺底接 bed
+pad.connect(bed);
+// 重音接 dest
+kick.connect(dest);
+```
+
+分线错了，重音就淹在自己的伴奏里，怎么调音量都没用。
+
+### 侧链的时间常数
+
+`bed` 的下压由 `beats` 驱动，形状是：
+
+| 阶段 | 时长 | 增益 |
+|---|---|---|
+| 提前量 | 80–120ms | 1.0 → 0.25 |
+| 重音瞬间 | 0 | 0.2 |
+| 恢复 | 180–260ms | 0.2 → 1.0 |
+
+提前量太短（<50ms）听不出「让位」，太长（>200ms）会觉得音乐在喘。
+
+---
+
+## 三、落点
+
+| 偏差 | 听感 |
+|---|---|
+| 声音早 1 帧（33ms） | 抢，像音效先到 |
+| 完全同帧 | 准，有力量 |
+| 声音晚 1 帧 | 稍微钝，但可接受 |
+| 声音晚 2 帧以上 | 散，像两条轨没对上 |
+
+所以：**声音事件用 `start(b.time)` 精确落点，不要四舍五入到拍上。**
+
+```js
+const t0 = ctx.currentTime;
+for (const b of beats) {
+  if (b.type === 'impact') kick(t0 + b.time, b.power);
+}
+```
+
+---
+
+## 四、留白
+
+不是每一秒都要有声音。整条片子里留 2–3 处 0.5s 的静默，重音才有分量。
+
+| 位置 | 效果 |
+|---|---|
+| 情绪转折前 | 屏息感 |
+| 高潮前一拍 | 蓄力 |
+| 结尾前 | 收束 |
+
+静默不要放在段落中间——那会像掉帧或音轨断了。
+
+---
+
+## 五、电平
+
+| 元素 | 峰值 | 说明 |
+|---|---|---|
+| 铺底（bed） | −18 dBFS | 比人声/字幕低很多 |
+| 重音（dest） | −6 ~ −3 dBFS | 要能「跳出来」 |
+| 整体峰值 | ≤ −1 dBFS | 留 1dB 余量，不削波 |
+| 结尾 | 0（静音） | 最后 0.3–0.5s 自然衰减 |
+
+```js
+const master = ctx.createGain();
+master.gain.value = 0.9;          // 留余量
+master.connect(dest);
+```
+
+硬切音频在播放器里会有「啪」的爆音。**所有声音都要在 `duration` 内自然收尾**：
+
+```js
+const fade = ctx.createGain();
+fade.gain.setValueAtTime(1, t0 + duration - 0.4);
+fade.gain.linearRampToValueAtTime(0, t0 + duration);
+```
+
+---
+
+## 六、音效设计
+
+### 6.1 转场音效
+
+| 转场 | 音效 | 时长 |
+|---|---|---|
+| 硬切 | 短促 kick / hit | 0.15–0.25s |
+| 擦除 / 推 | 上行扫频 whoosh | 0.25–0.4s |
+| 叠化 | 不需要 | — |
+| 闪白 | 白噪声瞬态 + 低频撞击 | 0.2s |
+
+扫频不要做低频（见 timbre 里的硬禁令），用中高频的噪声过带通。
+
+### 6.2 文字音效
+
+逐字出现时给每个字一个极轻的 tick（−30dBFS），整句一次性给一个 whoosh。
+**不要每个字都给重音**，那会变成打字机噪音。
+
+### 6.3 数字滚动
+
+滚动过程中给一条持续的低频嗡鸣（随进度升调），落定时给一记 hit。
+
+---
+
+## 七、和画面的关系
+
+| 画面 | 声音 |
+|---|---|
+| 静止 | 可以有声音（呼吸、底噪） |
+| 快速运动 | 必须有声音（whoosh / 律动） |
+| 切点 | 必须有重音，否则切点「软」 |
+| 留白 | 最好静音，或只有极轻底噪 |
+
+**画面在动、声音是空的**，观众会觉得「卡了」。
+
+---
+
+## 八、自检
+
+- [ ] 每个 `beats` 里的 impact 都有对应声音？
+- [ ] 重音接的是 `dest` 不是 `bed`？
+- [ ] 铺底比重音低 10dB 以上？
+- [ ] 有没有 2–3 处静默？
+- [ ] 结尾 0.3–0.5s 自然衰减？
+- [ ] 整体峰值不超过 −1 dBFS？
+- [ ] 把音量调到很小再听，卡点还在不在？
+- [ ] 配乐密度有没有起伏（不能全程一个密度）？

package/references/camera.md

@@ -0,0 +1,168 @@
+# 镜头与空间
+
+平面画布也能有空间感。靠的是透视、视差、景深和运动。
+
+这一份讲：2.5D 推拉摇移、视差分层、伪 3D 投影、镜头运动的速度曲线。
+
+---
+
+## 一、镜头运动
+
+### 1.1 推（zoom in）
+
+画面向中心放大。速度曲线决定情绪：
+
+| 曲线 | 情绪 |
+|---|---|
+| ease-in-out | 平稳推进（叙事） |
+| ease-out | 猛地推近然后稳住（强调） |
+| 线性 | 机械、冷（科技感） |
+
+```js
+const z = 1 + 0.35 * easeInOutCubic(tween(t, start, 1.2));
+ctx.translate(cx, cy);
+ctx.scale(z, z);
+ctx.translate(-cx, -cy);
+drawScene(t);
+```
+
+放大超过 2 倍会明显糊（画布分辨率限制）。要推很远就用「换场」而不是「推」。
+
+### 1.2 摇（pan）
+
+画布内容整体平移，模拟摄像机左右摇。
+
+```js
+const dx = -W * 0.25 * easeInOutCubic(tween(t, start, 1.5));
+ctx.translate(dx, 0);
+drawScene(t);
+```
+
+平移时**背景要比前景慢**（视差），否则像整张图在滑动。
+
+### 1.3 手持感
+
+轻微的随机抖动，让画面不像 CG：
+
+```js
+const rand = mulberry32(Math.floor(t * 30));
+const shakeX = (rand() - 0.5) * 3;
+const shakeY = (rand() - 0.5) * 2;
+ctx.translate(shakeX, shakeY);
+```
+
+幅度 2–4px。超过 8px 会晕。
+
+---
+
+## 二、视差分层
+
+把画面拆成 3 层，按不同速度移动：
+
+```js
+function drawParallax(t, offset) {
+  ctx.save(); ctx.translate(offset * 0.2, 0); drawFar(t);  ctx.restore();   // 远景最慢
+  ctx.save(); ctx.translate(offset * 0.5, 0); drawMid(t);  ctx.restore();   // 中景
+  ctx.save(); ctx.translate(offset * 1.0, 0); drawNear(t); ctx.restore();   // 近景最快
+}
+```
+
+速度比 0.2 : 0.5 : 1.0 是经验值。远景再慢就变成静止了。
+
+---
+
+## 三、伪 3D
+
+### 3.1 透视投影
+
+把 3D 点投到 2D：
+
+```js
+function project(x, y, z, fov = 600) {
+  const s = fov / (fov + z);
+  return { x: cx + x * s, y: cy + y * s, s };
+}
+```
+
+`s` 是缩放系数，可以拿来同时缩放尺寸和透明度：
+
+```js
+const p = project(x, y, z);
+ctx.globalAlpha = 0.3 + 0.7 * p.s;
+ctx.drawImage(img, p.x - w * p.s / 2, p.y - h * p.s / 2, w * p.s, h * p.s);
+```
+
+### 3.2 绕 Y 轴旋转
+
+```js
+const a = t * 0.6;
+const rx = x * Math.cos(a) - z * Math.sin(a);
+const rz = x * Math.sin(a) + z * Math.cos(a);
+const p = project(rx, y, rz);
+```
+
+### 3.3 卡片翻转
+
+单个元素绕 Y 轴翻转，用横向缩放模拟：
+
+```js
+const flip = Math.cos(tween(t, start, 0.5) * Math.PI);   // 1 → -1
+ctx.scale(Math.abs(flip) || 0.001, 1);
+```
+
+`flip` 过 0 时要跳过绘制（避免除零或宽度为 0 的怪异渲染）。
+
+---
+
+## 四、景深
+
+近处清晰、远处模糊（或反过来）：
+
+```js
+// 远景
+ctx.save();
+ctx.filter = 'blur(6px)';
+ctx.globalAlpha = 0.7;
+drawFar(t);
+ctx.restore();
+// 近景
+drawNear(t);
+```
+
+`ctx.filter` 贵，远景用离屏预渲染的模糊图更省。
+
+---
+
+## 五、构图
+
+| 法则 | 用法 |
+|---|---|
+| 三分法 | 主体放在 1/3 线上，不要正中 |
+| 视线方向留白 | 人物/箭头朝向的一侧留更多空间 |
+| 前景遮挡 | 加一个模糊的前景元素（柱子、叶片），立刻有纵深 |
+| 大小对比 | 一个大元素 + 一堆小元素，比均匀分布有层次 |
+
+---
+
+## 六、速度与重量
+
+大物体移动要慢，小物体可以快。同样的位移，大元素用更长的时长：
+
+```js
+const durBig = 0.9;   // 大标题
+const durSmall = 0.4; // 小图标
+```
+
+违反这条，画面会像「轻飘飘的塑料」。
+
+---
+
+## 七、自检清单
+
+- [ ] 推镜头的放大倍数 ≤ 2？
+- [ ] 平移时背景比前景慢？
+- [ ] 手持抖动 ≤ 4px？
+- [ ] 3D 投影的缩放同时作用在尺寸上？
+- [ ] 翻转经过 0 时跳过了绘制？
+- [ ] 大元素比小元素动得慢？
+- [ ] 主体没有压在正中（除非刻意对称）？

package/references/color.md

@@ -0,0 +1,272 @@
+# 调色与质感
+
+纯代码画出来的画面很容易「塑料」：太干净、太平、太像 PPT。
+
+这一份讲：调色板怎么定、层次怎么拉、质感怎么加、什么时候该收手。
+
+---
+
+## 一、先限制调色板
+
+一条片子 3–5 个主色就够。超过 5 个，画面会散。
+
+分配比例（60/30/10 法则）：
+
+| 角色 | 占比 | 用途 |
+|---|---|---|
+| 底色 | 60% | 背景、大面积色块 |
+| 辅色 | 30% | 次级元素、分隔线、装饰 |
+| 强调色 | 10% | 只用在「要观众看的地方」：数字、关键词、按钮 |
+
+**强调色不要平均分布**。整屏都是强调色，等于没有强调。
+
+### 深色片子的起手式
+
+```js
+const PALETTE = {
+  bg:      '#0b0d12',   // 带一点蓝的黑
+  surface: '#161a23',   // 卡片/面板
+  line:    '#242a36',   // 分隔线
+  text:    '#e8e6e1',   // 带一点暖的白
+  muted:   '#8b8f9a',   // 次要文字
+  accent:  '#ff8a3d',   // 橙
+  accent2: '#3fd7c0',   // 青
+};
+```
+
+### 浅色片子的起手式
+
+```js
+const PALETTE = {
+  bg:      '#f5f2ea',   // 米白，不是纯白
+  surface: '#ffffff',
+  line:    '#ddd8cc',
+  text:    '#1a1815',
+  muted:   '#6b675f',
+  accent:  '#d97757',   // 陶土橙
+};
+```
+
+---
+
+## 二、层次靠明度，不靠饱和度
+
+新手喜欢用鲜艳的颜色区分层次，结果画面吵。正确做法是拉开明度：
+
+| 层 | 明度（HSL 的 L） | 例子 |
+|---|---|---|
+| 背景 | 8–18% | `#0b0d12` |
+| 次级背景 | 20–30% | `#161a23` |
+| 中间层 | 45–60% | `#4a5060` |
+| 主体 | 85–100% | `#e8e6e1` |
+
+相邻层至少差 20 个百分点，否则在暗环境下会糊在一起。
+
+---
+
+## 三、暗部不纯黑，亮部不纯白
+
+`#000` 和 `#fff` 在大屏上生硬，而且会让渐变出现断层。
+
+| 用途 | 不要用 | 改用 |
+|---|---|---|
+| 黑底 | `#000000` | `#0b0d12`（冷）或 `#14100c`（暖） |
+| 白字 | `#ffffff` | `#e8e6e1`（暖）或 `#e6eaf0`（冷） |
+
+这一条改完，画面立刻有「片子感」。
+
+---
+
+## 四、渐变
+
+### 4.1 避免色带
+
+两个相近色之间的长距离线性渐变会出现明显条纹（banding），尤其是 8bit 输出。
+
+解法一：加噪点（见第五节）。
+解法二：用多个中间色标，让过渡更平滑。
+
+```js
+const g = ctx.createLinearGradient(0, 0, 0, H);
+g.addColorStop(0.00, '#0b0d12');
+g.addColorStop(0.35, '#12161f');
+g.addColorStop(0.70, '#1a2030');
+g.addColorStop(1.00, '#0b0d12');
+```
+
+### 4.2 径向渐变做光
+
+```js
+const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+g.addColorStop(0, 'rgba(255,138,61,0.55)');
+g.addColorStop(0.4, 'rgba(255,138,61,0.18)');
+g.addColorStop(1, 'rgba(255,138,61,0)');
+ctx.fillStyle = g;
+ctx.fillRect(cx - r, cy - r, r * 2, r * 2);
+```
+
+半径至少是光源尺寸的 3 倍，否则会看到明显的圆边。
+
+---
+
+## 五、颗粒
+
+加一层极淡的噪点，能消掉渐变色带，也让画面不那么塑料。
+
+### 5.1 预生成噪声贴图
+
+```js
+function makeNoise(size = 256, seed = 1) {
+  const c = document.createElement('canvas');
+  c.width = c.height = size;
+  const x = c.getContext('2d');
+  const img = x.createImageData(size, size);
+  const rand = mulberry32(seed);
+  for (let i = 0; i < img.data.length; i += 4) {
+    const v = 128 + (rand() - 0.5) * 255;
+    img.data[i] = img.data[i + 1] = img.data[i + 2] = v;
+    img.data[i + 3] = 255;
+  }
+  x.putImageData(img, 0, 0);
+  return c;
+}
+```
+
+### 5.2 平铺
+
+```js
+const noise = ctx.createPattern(makeNoise(256, 7), 'repeat');
+ctx.globalAlpha = 0.03;
+ctx.globalCompositeOperation = 'overlay';
+ctx.fillStyle = noise;
+ctx.fillRect(0, 0, W, H);
+ctx.globalAlpha = 1;
+ctx.globalCompositeOperation = 'source-over';
+```
+
+透明度：
+
+| 值 | 观感 |
+|---|---|
+| 1–2% | 几乎看不见，但能消 banding |
+| 3–4% | 有胶片颗粒感（推荐） |
+| 6% 以上 | 脏 |
+
+噪声贴图要固定种子。每帧都重新生成会抖成雪花屏。
+
+---
+
+## 六、光晕
+
+### 6.1 shadowBlur
+
+最简单，但贵（每帧重算模糊）：
+
+```js
+ctx.shadowColor = 'rgba(255,138,61,0.8)';
+ctx.shadowBlur = 24;
+ctx.fillRect(x, y, w, h);
+ctx.shadowBlur = 0;   // 复位，否则后续所有绘制都带阴影
+```
+
+`shadowBlur` 超过 40 在 1080p 上明显掉帧。
+
+### 6.2 预渲染光斑
+
+性能更好：预生成一张径向渐变贴图，用 `drawImage` 叠加。
+
+```js
+const glow = (() => {
+  const c = document.createElement('canvas');
+  c.width = c.height = 256;
+  const g = c.getContext('2d');
+  const rg = g.createRadialGradient(128, 128, 0, 128, 128, 128);
+  rg.addColorStop(0, 'rgba(255,255,255,1)');
+  rg.addColorStop(0.35, 'rgba(255,255,255,0.35)');
+  rg.addColorStop(1, 'rgba(255,255,255,0)');
+  g.fillStyle = rg; g.fillRect(0, 0, 256, 256);
+  return c;
+})();
+
+// 使用时
+ctx.globalCompositeOperation = 'screen';
+ctx.globalAlpha = 0.6;
+ctx.drawImage(glow, cx - r, cy - r, r * 2, r * 2);
+ctx.globalAlpha = 1;
+ctx.globalCompositeOperation = 'source-over';
+```
+
+---
+
+## 七、暗角
+
+四角压暗 15–25%，中心不动。观众的视线会自然往中间走。
+
+```js
+const v = ctx.createRadialGradient(W/2, H/2, Math.min(W,H) * 0.35, W/2, H/2, Math.max(W,H) * 0.75);
+v.addColorStop(0, 'rgba(0,0,0,0)');
+v.addColorStop(1, 'rgba(0,0,0,0.28)');
+ctx.fillStyle = v;
+ctx.fillRect(0, 0, W, H);
+```
+
+暗角和光晕不要同时开到最大，会像廉价滤镜。
+
+---
+
+## 八、色差
+
+快速运动的画面加 1–2px 的 RGB 通道偏移，有镜头感。静止画面加色差只会显脏。
+
+```js
+ctx.globalCompositeOperation = 'lighter';
+ctx.fillStyle = 'rgba(255,0,60,0.5)';
+ctx.fillRect(-offset, 0, W, H);
+ctx.fillStyle = 'rgba(0,220,255,0.5)';
+ctx.fillRect(offset, 0, W, H);
+ctx.globalCompositeOperation = 'source-over';
+```
+
+只在高光边缘有效，全屏铺一层会变成紫色。
+
+---
+
+## 九、灰度自检
+
+导出前把画面转成灰度看一眼：如果灰度下层次还在，说明结构是对的；
+如果糊成一团，说明你在靠颜色硬撑，需要把明度关系拉开重画。
+
+```js
+ctx.filter = 'grayscale(1)';
+// 画一遍，截图看
+ctx.filter = 'none';
+```
+
+或者直接心算：把每个颜色换算成亮度 `0.299R + 0.587G + 0.114B`，看相邻层的差值
+是否 ≥ 40。
+
+---
+
+## 十、常见错误
+
+| 错误 | 后果 | 修正 |
+|---|---|---|
+| 7 种以上主色 | 画面散 | 砍到 3–5 个 |
+| 靠饱和度分层 | 吵、刺眼 | 靠明度 |
+| 纯黑纯白 | 生硬、断层 | 带色相的黑白 |
+| 无颗粒的大面积渐变 | 色带明显 | 加 3% 噪点 |
+| `shadowBlur` 60 | 掉帧 | 用预渲染光斑 |
+| 暗角 + 光晕 + 色差全开 | 廉价滤镜 | 最多两种 |
+| 每帧重新生成噪声 | 雪花屏 | 固定种子 + 预生成 |
+
+---
+
+## 十一、自检清单
+
+- [ ] 主色 ≤ 5 个，且 60/30/10 分配？
+- [ ] 相邻明度层差 ≥ 20 个百分点？
+- [ ] 暗部不是 `#000`，亮部不是 `#fff`？
+- [ ] 大面积渐变有噪点压 banding？
+- [ ] 噪点透明度在 3–4%？
+- [ ] `shadowBlur` 用完复位了吗？
+- [ ] 灰度下还能分清层次吗？