1仕組みと動作原理
機能はすべて「インラインの実行可能コード+ルール」に集約:SKILL.md の本文で各粒子の状態更新ループ、外力関数、フローフィールド/curl ノイズ、空間グリッド連線、GPU Points シェーダー断片を直接提示しており、ライブラリやビルド手順なしでそのままコピー&ペーストして動作可能。
Drive many small elements with simple per-particle rules to get emergent, organic motion. Use 2D canvas for hundreds, GPU `Points` for thousands.
安定性はパラメータ調整ではなく数値積分形式で担保:半陰解法オイラー法(先に速度を更新し、新しい速度で位置を更新)と dt のクランプを明示的に要求。理由はそれぞれバネ/減衰力下での安定性と、タブの非アクティブ・カクつき後のシミュレーション破綻防止。
Prefer **semi-implicit Euler** (update velocity first, then position with the new velocity, as above) — it is stable for the spring/drag forces particles use. Use a fixed or clamped `dt` (`Math.min(dt, 1/30)`) so a stalled tab does not explode the simulation.
パフォーマンスのボトルネックを特定しデータ構造による解決策を提示:接続点ネットワークで総当たり比較を避け、半径に応じたバケット分割と隣接8グリッドのみの比較により、計算量を O(n²) から O(n) 近傍に削減。
Naively checking every pair is O(n²) and dies past ~300 particles. Use a **uniform spatial grid**: bin particles by cell, only compare against the 8 neighboring cells.
数万パーティクルへの道筋はアニメーションを頂点シェーダーへ移行すること:位置を BufferGeometry に格納して Points としてレンダリングし、「発光点に見せる」ための2つのスイッチ(加算合成+深度書き込みオフ、gl_PointCoord の距離ディスカードによる矩形から円形へのクリッピング)を明記。
`AdditiveBlending` + `depthWrite: false` gives the glowing-particle look. `discard` on `gl_PointCoord` distance makes square points round.
成果物は単一ファイル HTML に限定しバンドラーを禁止:canvas 2D をインライン化、または GPU 版では importmap で three を CDN に指定。1つのレンダリングループでビルド手順ゼロ。
For a self-contained particle effect (constellation background, confetti burst, flow field, GPU points) the deliverable is **one HTML file that opens directly in a browser** — canvas 2D inline, or Three.js from a CDN via an importmap for GPU `Points`, one render loop, no build step.
決定性は検証可能性の前提条件:素の Math.random をシード付き PRNG(mulberry32)に置き換えることで `?t=N` のフリーズフレームを再現可能にし、同一の N で同一ピクセルを出力させスクリーンショット検証を成立させる。
**Seed the RNG** — replace bare `Math.random()` with a seeded PRNG (e.g. mulberry32) so spawn positions, angles, and bursts reproduce frame-for-frame.
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx playwright screenshot(验证回路:打开本地 file:// 页面并截冻结帧) |
| cli | 仓库根共享脚本 scripts/seek-shot.sh、scripts/contact-sheet.sh(截图与拼图;不在 skill 目录内) |
| cli | ffmpeg / ffprobe(contact-sheet.sh 用 hstack 拼图;probe-mp4.sh 读编码参数) |
| network | 交付 HTML 经 importmap 从 CDN 取 three(GPU Points 分支)——产物期引用,由浏览器拉取 |
| package | simplex-noise(流场/curl 噪声示例引用的噪声库,注释中点名) |
4推奨統制措置と判定根拠
- scripts/: ローカルスクリプトまたはコマンドの実行: (SKILL.md の指示)npx playwright screenshot --wait-for-timeout=600 "file://$PWD/
- 网络端点: 外部ネットワークアクセスの宣言: skill ディレクトリ内にネットワーク呼び出しコードは一切存在しない。実行時のネットワーク面はツールチェーンに起因:`npx playwright` の初回実行時に npm registry から playw を取得
- 本地工作目录: ファイルの読み書きと成果物出力: 成果物本体:単一の particles.html(出力規約に基づきエージェントが生成)
5二重目の独立検証
- [ok] 「skill 目录内无脚本」是否成立(决定蓝而非黄/橙的关键) — 文件清单实证:skills/particle-system/ 下只有 SKILL.md、README.md(0 B)、references/particle-recipes.md。SKILL.md 提到的 `scripts/seek-shot.sh` 实际位于仓库根 scripts/,并非 skill 自有资产;因此判级对象内确实没有可执行代码。已在 reason/risks 记录「单装 skill 目录会使引用悬空」。
- [ok] 是否存在凭证或环境变量读取 — 全仓正则 `process.env|API_KEY|TOKEN|SECRET|Authorization` 在三个 iart 仓内零命中(唯一命中在 javascript-animation-skills 的 soundtrack/references/ai-music.md,属另一 skill)。本 skill 的 credential_reads 为空成立。
- [ok] 是否有比蓝更高的触发条件被漏掉(红档特征) — 对 `sandbox|automationcontrolled|no-verify|stealth|bypass|ignoreHTTPSErrors|dangerously` 全仓扫描零命中;不存在关沙箱、关 TLS、绕过自动化侦测或任意代码执行面。
- [ok] GPU / 无头渲染前提是否真的写进文档(任务特别提示项) — SKILL.md 验证段原文承认这是环境前提并把归因从代码上摘开:'For GPU points, WebGL needs a GPU context; Playwright/Chromium supplies one (swiftshader) headless.';完成清单第 1 条也要求无 WebGL 错误。
- [ok] 「O(n) 连接点」与「?t=N 可复现」两条能力声明是否与代码相符 — 空间网格实现(`cell = radius` 分桶、只查 3×3 邻域)与声明一致;harness 要求 seeded PRNG + 固定步进(`const step = 1 / 60`)再渲单帧,确实保证同 N 同像素。无夸大。
- [ok] reference 描述是否逐条落地 — references/particle-recipes.md 开篇即 'Complete, runnable systems for canvas and GPU particles.',与 SKILL.md 末尾列出的能力项(confetti/snow/smoke、鼠标吸引排斥、simplex 流场与 curl、空间网格星座、GPU Points)在文件内可逐节验证。
6結論
d8271a602d6dd44b…