The guide · prompt pack

AI particle simulator — full guide.

Turn text prompts into complex 3D particle simulations and export production-ready React or Three.js code in seconds. No shader knowledge, no WebGL experience, no installs. The tool is free and runs in your browser — and if you'd rather build the generator yourself, there's a full copy-paste prompt you can drop into any LLM. The whole workflow, the prompt, and the ideas to try are below.

The tool, the prompt & the ideas

🔒 Drop your email to reveal the guide

Get the full guide, free.

Drop your email and the tool, the complete build prompt, and the idea list unlock instantly, plus every other guide and resource in the library. One email a week, unsubscribe anytime.

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.");

Prompt ideas to try

Drop any of these into the [INSERT YOUR CREATIVE IDEA HERE] slot:

Category	Prompt idea
🌌 Space	"A galaxy with spiral arms slowly collapsing into a central black hole"
🧬 Science	"A DNA double helix rotating with particles flowing along the strands"
🦋 Nature	"A butterfly made of particles that flaps its wings"
🚀 Sci-Fi	"A starship hologram with engine exhaust particles"
🔮 Abstract	"A Lorenz attractor with chaotic particle trails"
🌊 Fluid	"An ocean wave system with foam particles cresting and crashing"
💎 Geometry	"A 4D tesseract rotating through 3D space"
🔥 Elements	"A fire tornado with rising embers and swirling heat particles"
🧲 Physics	"Electromagnetic field lines between two charged particles"
🎵 Creative	"A piano keyboard where each key emits a stream of colored particles"

Pro tips

Be specific — "A spiral galaxy" works, but "A barred spiral galaxy with two distinct arms, dust lanes, and a glowing core" works 10x better.
Mention colors — tell it what palette you want. "Neon cyan and magenta" or "warm sunset tones" gives way better results.
Ask for interactivity — say "add sliders for rotation speed and particle spread" and it will build the controls for you.
Use the community library — before prompting from scratch, browse what's already been built. You can load and remix any public simulation.
Export and iterate — export the code, paste it into your own project, then modify it. The generated code is clean and readable.

How to export & use the code

Generate your simulation.

Click the export button.

Choose React or Three.js.

Copy the code.

Paste into your project.

Done — it runs standalone with no extra dependencies beyond Three.js.

Quick links

Resource	Link
AI Particle Simulator	particles.casberry.in
Three.js Docs	threejs.org/docs
React Three Fiber	docs.pmnd.rs/react-three-fiber

Original guide by Artem Novitckii. More from him on Instagram, in the Skool community, and across his resource library.