在线地址https://particles.casberry.in/开源提示词Act as a Creative Computational Artist High-Performance WebGL Shader Expert. **YOUR GOAL:** Write a single, highly optimized JavaScript function body that defines the movement behavior and visual appearance of particles in a massive 3D particles swarm simulation (20,000 units). **CONTEXT API VARIABLES (Read-Only unless specified):** 1. i (Integer): Index of the current particle (0 to count-1). 2. count (Integer): Total number of particles. 3. target (THREE.Vector3): **WRITE-ONLY**. You MUST update this vector object (target.set(x,y,z)) to position the particle. 4. color (THREE.Color): **WRITE-ONLY**. You MUST update this color object (color.setHSL(...) or color.set(...)) to paint the particle. 5. time (Float): Global simulation time in seconds. Use this for animation. 6. THREE: The full Three.js library access. **HELPER FUNCTIONS (Interactive UI):** - addControl(id, label, min, max, initialValue): Creates a real-time slider in the UI. Returns the current float value. *Example:* const speed addControl(speed, Rotation Speed, 0, 5, 1.0); - setInfo(title, description): Updates the HUD. **Call ONLY when i 0**. - annotate(id, positionVector, labelText): Adds a floating 3D label. **Call ONLY when i 0**. *Example:* annotate(center, new THREE.Vector3(0,0,0), Singularity); **CRITICAL PERFORMANCE RULES (STRICT COMPLIANCE REQUIRED):** 1. **ZERO GARBAGE COLLECTION:** This function runs 20,000 times *per frame* (60fps). - **NEVER** use new THREE.Vector3() or new THREE.Color() inside the loop (except for one-off annotations). - **NEVER** allocate arrays or objects inside the loop. - Reuse the provided target and color objects. 2. **MATH OVER LOGIC:** Avoid heavy branching (if/else) inside the loop. Use math functions (Math.sin, Math.cos, Math.abs) for shaping. 3. **OUTPUT ONLY:** Do not return any value. Just mutate target and color. 4. **STABILITY LOCK:** All coordinates and color values MUST be finite, real numbers. **NEVER** set values to NaN, Infinity, or undefined. Ensure your mathematical formulas (e.g. divisions) have safety guards against zero. 5. **ENVIRONMENT CONFLICTS:** Do not use variable names that conflict with the global environment. **NEVER** redefine or use common global names like SHADERS, THREE, Math, etc. inside your code. **SECURITY VALIDATION RULES (STRICT COMPLIANCE REQUIRED):** Our simulator includes a multi-stage security and stability validator. 1. **FORBIDDEN PATTERNS:** Any code containing the following will be REJECTED: - document, window, fetch, XMLHttpRequest, WebSocket - eval, Function(, import(, require(, process - __proto__, .prototype, globalThis, self, location, navigator - localStorage, sessionStorage, indexedDB, crypto - setTimeout, setInterval, alert(), confirm(), prompt() 2. **STABILITY GATE:** The code must pass a dry-run execution without throwing ANY runtime errors. 3. **CONCISE CLEAN:** Avoid extremely long variable names or deeply nested structures. Ensure the code is self-contained and does not use complex non-standard characters in comments that might disrupt database storage. 4. **NO UNDECLARED VARIABLES:** All variables (like phi, theta, radius, etc.) MUST be explicitly declared with let or const before use. Code triggering ReferenceError will fail the stability gate. **VISUALIZATION GUIDELINES:** - Create complex, organic, or mathematical structures (Fractals, Attractors, Fields, interference patterns). - Use time to create smooth, flowing animation. - Map i (index) to spatial coordinates to create continuous forms. - Use addControl to make the visualization interactive (e.g., expanding size, changing chaos levels). **REQUEST:** [INSERT YOUR CREATIVE IDEA HERE - e.g., A hyper-dimensional tesseract breathing in 4D space] **STRICT RESPONSE FORMAT:** Return **ONLY** the JavaScript code for the function body. Do not include markdown formatting, backticks, or explanations before/after the code. **EXAMPLE OUTPUT:** const scale addControl(scale, Expansion, 10, 100, 50); const angle i * 0.1 time; target.set(Math.cos(angle) * scale, Math.sin(angle) * scale, i * 0.05); color.setHSL(i / count, 1.0, 0.5); if (i 0) setInfo(Spiral Demo, A basic test.);三维粒子群模拟系统概述这是一个基于WebGL和Three.js的高性能三维粒子群模拟系统能够实时渲染20,000粒子并支持复杂的动态视觉效果。系统通过优化算法和零垃圾回收策略确保流畅的60fps性能。功能特性 核心功能大规模粒子模拟支持超过20,000个粒子的实时渲染高性能优化采用零垃圾回收策略避免内存分配实时交互通过UI控件动态调整模拟参数三维可视化支持复杂的数学结构和有机形态平滑动画基于时间的连续动画系统️ 交互控制可调节粒子旋转速度动态控制缩放参数实时调整颜色分布控制粒子运动轨迹 技术特点WebGL加速利用GPU进行并行计算数学驱动基于数学函数而非逻辑分支稳定性保障防止NaN和无限值内存安全完全避免垃圾回收快速开始前提条件现代Web浏览器Chrome 90、Firefox 88、Safari 14支持WebGL 2.0的GPUThree.js库v128安装克隆仓库git clone https://github.com/your-username/particle-swarm-sim.git安装依赖cd particle-swarm-sim npm install运行开发服务器npm run dev在浏览器中打开http://localhost:3000使用说明基本使用页面加载后系统将自动初始化20,000个粒子使用右侧面板的滑块调整模拟参数实时观察粒子系统的动态变化可暂停/恢复动画播放参数说明参数范围描述旋转速度0-5控制粒子绕轴旋转的速度扩展系数10-100控制粒子系统的整体大小颜色饱和度0.5-1.0控制粒子颜色的鲜艳程度运动幅度0-2控制粒子运动的剧烈程度键盘快捷键空格键暂停/继续动画R键重置所有参数F键全屏切换1-5键切换预设效果开发指南项目结构particle-swarm-sim/ ├── src/ │ ├── js/ │ │ ├── main.js # 主入口文件 │ │ ├── particleSystem.js # 粒子系统核心 │ │ └── controls.js # 交互控制 │ ├── css/ │ │ └── style.css # 样式文件 │ └── index.html # 主页面 ├── docs/ # 文档目录 ├── examples/ # 示例代码 └── package.json粒子行为定义系统核心是一个JavaScript函数负责定义每个粒子的行为和外观// 示例创建螺旋粒子系统 const scale addControl(scale, Expansion, 10, 100, 50); const speed addControl(speed, Rotation Speed, 0, 5, 1.0); const angle i * 0.1 time * speed; target.set( Math.cos(angle) * scale, Math.sin(angle) * scale, i * 0.05 ); color.setHSL(i / count, 1.0, 0.5); if (i 0) { setInfo(Dynamic Spiral, A rotating particle helix with interactive controls); annotate(center, new THREE.Vector3(0,0,0), Rotation Center); }性能优化规则零内存分配避免在循环中创建新对象数学优先使用三角函数替代条件判断向量复用重用THREE.Vector3和THREE.Color对象稳定性确保所有数学运算安全无除零错误扩展功能您可以通过修改粒子行为函数来创建不同的视觉效果数学结构分形、吸引子、矢量场物理模拟流体动力学、电磁场有机形态生物运动、群体行为抽象艺术色彩渐变、几何图案API参考核心变量变量类型描述iInteger当前粒子索引0到count-1countInteger粒子总数targetTHREE.Vector3粒子位置可写colorTHREE.Color粒子颜色可写timeFloat全局时间秒THREEObjectThree.js库引用辅助函数函数参数描述addControl(id, label, min, max, value)字符串, 字符串, 数字, 数字, 数字创建UI滑块控件setInfo(title, description)字符串, 字符串更新HUD信息annotate(id, position, text)字符串, THREE.Vector3, 字符串添加3D注释标签安全限制系统禁止使用以下APIDOM操作document,window网络请求fetch,XMLHttpRequest动态代码eval,Function存储APIlocalStorage,indexedDB定时器setTimeout,setInterval示例效果1. 四维超立方体// 在4D空间旋转的立方体投影到3D const t i * 0.001 time * 0.2; const u (i / count) * Math.PI * 2; const size addControl(size, Hypercube Size, 5, 50, 20); target.set( size * Math.cos(t) * Math.cos(u), size * Math.sin(t) * Math.cos(u), size * Math.sin(u) ); color.setHSL(t / (Math.PI * 2), 0.8, 0.6);2. 洛伦兹吸引子// 混沌系统的粒子实现 const chaos addControl(chaos, Chaos Factor, 0.1, 2.0, 0.5); const dt 0.01; let x (i % 100) * 0.1 - 5; let y (Math.floor(i / 100) % 100) * 0.1 - 5; let z Math.floor(i / 10000) * 0.1; for (let j 0; j 10; j) { const dx 10 * (y - x) * chaos; const dy x * (28 - z) - y; const dz x * y - (8/3) * z; x dx * dt; y dy * dt; z dz * dt; } target.set(x, y, z); color.setHSL(Math.atan2(y, x) / (Math.PI * 2), 1.0, 0.5);故障排除常见问题性能下降检查控制台警告减少粒子数量简化数学计算视觉效果异常确保所有数学值有限检查除零错误验证参数范围UI控件不响应检查JavaScript错误验证控件ID唯一性确认Three.js正确加载调试技巧// 在粒子0添加调试信息 if (i 0) { console.log(当前参数:, { time: time, count: count, target: target.toArray() }); }贡献指南Fork本仓库创建功能分支 (git checkout -b feature/amazing-effect)提交更改 (git commit -m Add amazing particle effect)推送到分支 (git push origin feature/amazing-effect)开启Pull Request代码规范遵循性能优化规则添加适当的注释包含示例代码更新文档