Copy this prompt to ChatGPT/Claude to generate simulations.
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 drone 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`.
**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.");