Synaptic City

You are an expert Three.js developer. Create a complete, self-contained HTML file for a 3D simulation based on this prompt: "### Three.js Simulation Prompt: The Synaptic City **Project Title:** The Synaptic City: A Living Data-Flow Simulation **Theme:** An abstract, ethereal city visualized as a living, thinking neural network. The "buildings" are crystalline data nodes, and the "traffic" consists of flowing packets of light. The simulation is a beautiful, interactive toy where the user can observe, manipulate, and direct the lifeblood of this digital metropolis. --- ### **1. Core Concept & Visual Aesthetics** Create a visually mesmerizing 3D simulation of a floating "Synaptic City." The scene is set in a dark, empty void, emphasizing the self-illuminated nature of the city. The city itself is not made of traditional buildings, but of a complex, interconnected web of **Nodes** (data hubs) and **Pathways** (connections). Thousands of glowing **Couriers** (data packets) travel between these nodes, creating a constant, dynamic flow of light that represents the city's pulse. The overall aesthetic should be elegant, high-tech, and organic. Use a strong color palette (e.g., electric blues, magenta, and gold) against a deep black background. Leverage post-processing effects, especially **UnrealBloomPass**, to give all emissive objects a radiant, cinematic glow. ### **2. Environment & Scene Objects** * **Background:** A simple, pure black or very dark navy background. Add a subtle, slow-moving particle system of tiny, dim "space dust" to give a sense of depth and movement. * **Nodes (The "Buildings"):** * Create 15-20 geometric, crystalline shapes (e.g., `IcosahedronGeometry`, `DodecahedronGeometry`) scattered in 3D space. * Apply a `MeshStandardMaterial` with high `emissive` properties and a `metalness` map to give them a polished, reflective look. * Each Node should have a subtle, slow, pulsating animation, where its emissive intensity gently waxes and wanes. * **Pathways (The "Streets"):** * Connect the Nodes with smooth, curved lines (`CatmullRomCurve3` or `CubicBezierCurve3`). * Visualize these pathways using `TubeGeometry` or a custom shader on a line-based geometry. * The pathways should have a flowing, energetic texture, like fiber optic cables, with light appearing to move along their length. Their color and brightness should be influenced by the amount of traffic they carry. * **Couriers (The "Traffic"):** * This is the core visual element. Use a `THREE.Points` object to efficiently render thousands of particles. * Each Courier is a tiny, bright speck of light that is spawned at a random Node. * It is then assigned a destination Node and travels smoothly along the corresponding Pathway. Upon arrival, it fades out, and a new Courier is spawned elsewhere, keeping the system in constant motion. ### **3. Animation & Physics** * **Courier Movement:** Animate the Couriers along the curved pathways. They should accelerate slightly when leaving a Node and decelerate upon arrival. * **Node Dynamics:** The Nodes themselves should not be static. Implement a gentle, physics-based "breathing" or floating motion, as if they are all tethered by invisible springs. They should drift slightly and react subtly when the user interacts with them. * **System Pulse:** The entire network should have a synchronized, global pulse effect every 10-15 seconds, where a wave of light emanates from the city's core Node and travels outwards to the periphery. ### **4. CRITICAL: Interaction & Control Modes** Implement a master "Control Mode" selector in the GUI. The user's interaction capabilities must change based on the selected mode. * **`Control Mode: Camera`** * **Functionality:** `OrbitControls.enabled = true`. All raycasting for object interaction is **disabled**. * **User Experience:** This is the default viewing mode. The user can freely tumble, pan, and zoom around the entire city to appreciate its scale and beauty from any angle. * **`Control Mode: Interact`** * **Functionality:** `OrbitControls.enabled = false`. Raycasting for hover, click, and drag is **enabled**. * **User Experience:** The camera is fixed. * **Hover:** Hovering the mouse over a Node causes it to glow brightly and display a simple HTML tooltip showing its ID and current Courier traffic count. * **Click & Drag:** The user can click and drag any Node to a new position. The connecting Pathways must stretch and flex dynamically in real-time like elastic bands. This allows the user to re-sculpt the city's layout, which in turn alters the travel paths of all Couriers. * **`Control Mode: Follow Object`** * **Functionality:** `OrbitControls.enabled = false`. Raycasting is enabled only for selecting a target. * **User Experience:** * Upon entering this mode, the user can click on any individual **Courier** particle. * The camera will then smoothly animate to position itself near the selected Courier, following it on its journey through the network. The camera should maintain a consistent offset and aim at the Courier, providing a thrilling "first-person" ride through the city's glowing arteries. * The followed Courier must be visually highlighted with a brighter glow, a different color, or a lens-flare effect to distinguish it from the thousands of others. * The user can click on a different Courier at any time to seamlessly switch the camera's follow target. ### **5. CRITICAL: Rich GUI & Game-Like Controls** Use a library like `lil-gui` to create a comprehensive control panel. This is key to making the simulation feel like an interactive "toy." * **Panel 1: Master Controls** * **Control Mode:** Radio Buttons ('Camera', 'Interact', 'Follow Object'). * **Camera:** * `Auto Rotate` (checkbox) * `Rotate Speed` (slider, range 0.1 to 2.0) * **Panel 2: Simulation Parameters** * `Courier Speed` (slider): Controls the travel speed of the data packets. * `Spawn Rate` (slider): Controls how many new Couriers are created per second. * `Glow Strength` (slider): Adjusts the `strength` parameter of the `UnrealBloomPass`. * `Network Elasticity` (slider): Controls how quickly and forcefully a moved Node returns to its original position in 'Interact' mode (from 0 for no return, to 1 for a snappy return). * `Path Curvature` (slider): Globally adjusts the amount of "sag" or curvature in the pathways between nodes. * **Panel 3: Actions** * **`Data Burst` (button):** Instantly triggers a massive, simultaneous emission of thousands of Couriers from every Node. They all travel to the city's central Node, creating a spectacular implosion of light, followed by an explosion back outwards. * **`Rewire Network` (button):** Instantly randomizes all connections between the Nodes, creating a completely new and unique city structure. ### **6. Mobile Support & Instructions** * **Mobile Controls:** All interactions must be fully supported on mobile devices. Clicks should map to taps, and dragging should map to touch-and-drag gestures. `OrbitControls` inherently supports touch, but ensure custom interactions are also implemented for touch events. * **On-Screen Instructions:** Provide a simple, elegant HTML overlay with instructions that fade in on load and can be dismissed. It should briefly explain the three control modes and encourage the user to experiment with the GUI panels. * Example Text: *"Welcome to the Synaptic City. **Camera Mode:** Orbit freely. **Interact Mode:** Drag nodes to reshape the city. **Follow Mode:** Click a light particle to ride along. Use the GUI to control the simulation."*" Requirements: 1. Output a SINGLE, complete HTML file containing CSS, HTML, and JavaScript. 2. Include the following CDN links in the : - Three.js (r128): https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js - OrbitControls: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js - lil-gui: https://cdn.jsdelivr.net/npm/lil-gui@0.19.1/dist/lil-gui.umd.min.js 3. Initialize scene, camera, renderer, objects, lights, and animation loop. 4. Implement OrbitControls. 5. Implement a GUI using 'lil-gui' for parameters. 6. Renderer MUST be attached to `document.body`. 7. Handle window resize. 8. Code MUST be error-free. 9. Use procedural textures/colors. 10. Make it visually spectacular. 11. Do NOT use ES6 modules (import/export). Use global variables (THREE, lil).