AI Particle Simulator — Full Guide + Prompt Pack

Turn text prompts into complex 3D particle simulations. Export production-ready React or Three.js code in seconds.

🔗 The Tool

AI Particle Simulator
👉 https://particles.casberry.in/

• 100% Free

• No sign-up required

• Works in your browser

🚀 How It Works

1. Open the tool

2. Type a prompt describing the particle system you want

3. Watch it generate a live 20,000+ particle simulation

4. Tweak it using the auto-generated real-time controls

5. Export the code (React or Three.js) — drop it straight into your project

That's it. No shader knowledge. No WebGL experience. No installs.

🧠 The Prompt, if you want to build it yourself (Copy & Paste This)

Paste this into Claude, ChatGPT, or any LLM — then add your creative idea at the bottom where it says [INSERT YOUR CREATIVE IDEA HERE].

The LLM will generate the function code. Paste that code into the simulator.

👇 Full Prompt:

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

Here are some ideas you can drop into the [INSERT YOUR CREATIVE IDEA HERE] slot:

⚡ 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

1. Generate your simulation

2. Click the export button

3. Choose React or Three.js

4. Copy the code

5. Paste into your project

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

📌 Quick Links