physicsGames

🌟 Architectural Vision & System Design

The core architectural vision of physicsGames is to deliver deterministic, 60 FPS physics simulations within a reactive web interface without the overhead of a virtual DOM. By leveraging Svelte’s compiler-first approach, the system minimizes runtime overhead, allowing the CPU to dedicate maximum cycles to mathematical vector calculations and collision detection.

┌─────────────────────────────────────────────────────────────────────────┐
│                           User Interface (Svelte)                       │
└────────────────────────────────────▲────────────────────────────────────┘
                                     │ (Reactive Subscriptions)
┌────────────────────────────────────▼────────────────────────────────────┐
│                         State Management (Stores)                       │
└────────────────────────────────────▲────────────────────────────────────┘
                                     │ (State Updates)
┌────────────────────────────────────▼────────────────────────────────────┐
│                     Physics Engine (Fixed Timestep Loop)                │
│  ┌──────────────────────┐  ┌──────────────────────┐  ┌───────────────┐  │
│  │  Verlet Integration  │─►│ Collision Detection  │─►│ Solver/Bounds │  │
│  └──────────────────────┘  └──────────────────────┘  └───────────────┘  │
└─────────────────────────────────────────────────────────────────────────┘

Core Data & System Flow

• Ingestion / Input: User interactions (mouse drags, gravity adjustments, vector forces) are captured via low-latency DOM event listeners and mapped directly to normalized coordinate spaces.
• Processing / Logic: The simulation runs on a decoupled, deterministic physics loop. It utilizes Verlet integration to calculate particle kinematics, resolving constraints and boundary collisions before committing the new state.
• Persistence & Caching: Simulation states and user-defined presets are serialized into lightweight JSON payloads, cached locally via browser storage, and synchronized reactively across components using Svelte stores.

---

💻 Tech Stack & Engineering Decisions

Every technology in this stack was selected to maximize execution speed, minimize bundle size, and guarantee a smooth rendering pipeline.

• Frontend (Svelte): Chosen over React or Vue due to its compile-time design. Svelte compiles components down to surgical, direct DOM updates, eliminating virtual DOM diffing overhead—a critical requirement when updating hundreds of physics entities simultaneously.
• Build Tool (Vite): Selected for its instant Hot Module Replacement (HMR) and highly optimized Rollup-based production bundling. Vite’s configuration was tuned to handle asset loading and code-splitting efficiently.
• Data & Middleware (Svelte Stores): Used to manage global simulation parameters (e.g., gravity constants, friction coefficients). By externalizing state from the component lifecycle, simulation data remains persistent even during hot reloads, preventing state loss during development.

---

⚙️ Engineering Excellence & Best Practices

This codebase serves as a benchmark for high-performance frontend engineering, adhering to strict performance and reliability standards:

• Memory Management & GC Optimization: To prevent Garbage Collection (GC