# **Computational Approaches to Epidemiological Simulation: A Blueprint for Developing Agent-Based Models and Macro-Level Solvers** ## **Introduction and Contextualization of Web-Based Epidemic Simulators** The proliferation of digital epidemiological models during the global crisis of the COVID-19 pandemic represented a critical watershed moment in both public health communication and computational modeling. Web-based simulation tools emerged as vital pedagogical instruments, specifically designed to translate highly abstract mathematical concepts of viral transmission into intuitive, interactive visual narratives. Among these tools, interactive simulators such as those hosted at c19model.com demonstrated the profound efficacy of using real-time graphical representations to convey the impact of non-pharmaceutical interventions to the general public.1 The overarching goal of these platforms was to demystify the exponential nature of viral spread and provide a visual rationale for highly restrictive public health policies. Constructing analogous platforms requires a dual-pronged computational approach, demanding a careful balance between microscopic agent-based modeling (ABM) on the frontend presentation layer and macroscopic compartmental modeling on the backend computational layer. At the microscopic level, epidemic simulators typically utilize object-oriented principles within a standard browser environment, relying heavily on fundamental web technologies such as HTML5 Canvas and vanilla JavaScript.1 These environments render hundreds of independent entities—often visually represented as bouncing balls, particles, or colloquially by users as "gumdrops"—where each entity acts as an autonomous agent governed by two-dimensional kinematics and a finite state machine that dictates its current epidemiological status: susceptible, infected, recovered, or deceased.1 At the macroscopic level, the underlying dynamics of these agents aggregate to mirror traditional epidemiological compartmental models, specifically the Susceptible-Infected-Recovered-Deceased (SIRD) model. Solving the differential equations inherent in the SIRD framework requires advanced numerical approximation techniques, such as Euler’s method, which can be efficiently executed using server-side languages like PHP to validate the stochastic outcomes of the frontend visualization.6 This report provides a comprehensive, exhaustive architectural and computational blueprint for developing high-fidelity epidemiological simulators. By dissecting the structural paradigms of open-source precedents, analyzing the strict mathematics of two-dimensional elastic collisions, and providing concrete implementations in both JavaScript and PHP, this analysis elucidates the intricate engineering required to simulate viral contagion accurately. Furthermore, it explores the deep second and third-order insights derived from transforming deterministic mathematical frameworks into stochastic, physics-based simulations, offering a rigorous and highly detailed framework for future developers, data scientists, and epidemiological researchers. ## **The Pedagogical Efficacy and Cognitive Interpretations of Visual Models** Before delving into the software architecture and the codebase, it is absolutely imperative to analyze the cognitive mechanisms that render these simulators effective, as well as the valid critiques they face regarding data presentation and user interpretation. The primary pedagogical advantage of an agent-based model is its unique capacity to embody the concept of invisible contagion in tangible physical terms. In platforms like c19model.com, which was developed using JavaScript by a programmer known by the handle "bertik750", users observe individual units bouncing within a rigidly confined arena.1 When a healthy unit collides with an infected unit, a visual color change occurs instantaneously, communicating the core mechanism of transmission without requiring the user to interpret a logarithmic graph or differential equations.1 However, translating complex socio-epidemiological phenomena into simplistic physical parameters introduces significant cognitive friction and potential misinterpretation. For instance, simulating a "closed border" in a two-dimensional canvas environment involves establishing rigid boundary collisions where particles cannot enter or exit a predefined sector.1 While mathematically absolute within the code, this visual representation prompted widespread user debates regarding the comparative efficacy of border closures versus internal movement restrictions, such as localized lockdowns or mandatory masking.1 In a perfectly closed digital system, a closed border prevents any external introduction of the virus, rendering it theoretically absolute; yet, in reality, logistical and supply chain necessities dictate that real-world borders must remain partially permeable, a nuance often lost in perfectly elastic collision models.1 Furthermore, the sequential layering of preventative measures in a single simulation canvas can completely obscure the isolated impact of individual policies, leading to flawed causal inferences. Critical feedback regarding early iterations of these simulators highlighted that when containment measures are enacted mid-simulation, the visual feedback can be dangerously misleading. Observers noted that infected entities often transition to a deceased state shortly after masking mandates or movement restrictions are visually introduced by the user, leading to an unintended interpretation where the mitigation strategy appears causally correlated with mortality.1 This observation highlights a crucial principle in simulation design: to communicate causality effectively and scientifically, simulators should employ comparative visualization. Running two or three separate simulation canvases side-by-side—one acting as a control group with zero interventions, and others applying specific constraints from the absolute beginning of the timeline—provides a cleaner, more scientifically rigorous demonstration of cause and effect.1 Additionally, the integration of a healthcare capacity threshold line is vital for contextualizing the severity of the exponential spread. Implementations of this feature typically draw a static horizontal line on the accompanying statistical chart, representing a safe limit where hospitals are not overwhelmed. Discussions among users indicate that this limit should ideally be set low—around twenty to thirty percent of the total simulated population—to accurately convey to younger audiences that modern healthcare infrastructure cannot simultaneously accommodate the entire population.1 Finally, designers must account for edge cases in the finite state machine, such as the visual anomaly where a particle transitions from a "recovered" state directly to a "dead" state. While mathematically plausible in broad statistical datasets over long periods, users perceive this immediate visual transition in a fast-paced simulator as a software bug or an oddity, detracting from the educational immersion.1 ## **Survey of the Epidemiological Simulation Ecosystem** To effectively replicate and enhance the functionalities of tools like c19model.com, one must understand the broader ecosystem of computational epidemiological modeling. The digital landscape is fundamentally divided into two distinct categories: highly visual, browser-based educational agent-based models (ABMs), and robust, data-driven scientific frameworks utilized by research institutions. Integrating the visual appeal of the former with the mathematical rigor of the latter is the ultimate objective of a comprehensive simulator. The scientific tier of modeling is characterized by heavy computational requirements and complex statistical methodologies. For example, the MRC Centre for Global Infectious Disease Analysis at Imperial College London developed the covid-sim microsimulation model, a highly sophisticated tool written in lower-level languages designed to process massive datasets and Monte Carlo simulations.11 When executing these models, developers note that full convergence of Markov chain Monte Carlo (MCMC) algorithms is required to obtain reliable posterior draws, a process entirely unsuitable for real-time browser execution.11 Similarly, the RAND Corporation developed an extensive c19model architecture. Interestingly, unlike the website c19model.com, the RAND c19model is an R package class designed to be compatible with the deSolve numerical solver package, focusing on calibrating state policies, tracking vaccination hesitancy, and modeling seasonal variants.13 Other academic models include the Covasim agent-based simulator developed by the Institute for Disease Modeling, and the MATLAB-based prediction models by "sasanca" which rely heavily on PCR data and the MATLAB curve-fitting toolbox for forecasting country-specific epidemic peaks.14 Conversely, the educational tier prioritizes visual immediacy over exhaustive statistical forecasting. These simulators are explicitly designed not as pure mathematical predictive engines, but as interactive demonstrations of how variables like social distancing flatten the curve.5 Repositories such as MTrajK/virus-spreading serve as excellent architectural references for this tier. Inspired by early influential graphics published by the Washington Post, these repositories utilize pure JavaScript to render bouncing particles in an arena, deliberately avoiding heavy compilation steps or complex external libraries to ensure maximum browser compatibility and mobile responsiveness.5 | Simulation Tier | Example Projects / Repositories | Core Technologies | Primary Use Case and Architecture | | :---- | :---- | :---- | :---- | | Scientific / Predictive | Imperial College covid-sim, RAND c19model, Covasim | C++, R (deSolve), Python, MATLAB | Macroscopic policy planning, Monte Carlo simulations, MCMC convergence, real-world data fitting. | | Educational / Visual | c19model.com, MTrajK/virus-spreading, Washington Post Simulator | Vanilla JavaScript, HTML5 Canvas, CSS | Pedagogical ABMs, demonstrating the mechanics of contagion, social distancing, and herd immunity via physics engines. | | Hybrid Web Integration | Proposed Architecture in this Report | JavaScript (Frontend Canvas) \+ PHP (Backend Solvers) | Bridging intuitive visual ABMs with rigorous backend numerical approximations (Euler's method) for comparative analysis. | By synthesizing these two paradigms, developers can construct a platform that uses PHP to run deterministic compartmental equations on the server, while utilizing JavaScript to render the stochastic, agent-based physical simulation in the client's browser, providing a comprehensive view of the theoretical versus the empirical spread of the pathogen. ## **Architectural Paradigms of Browser-Based Micro-Simulations** The architecture of a web-based viral spread simulator must prioritize high-frequency rendering and cross-platform accessibility. To achieve this, developers often eschew heavy JavaScript frameworks in favor of vanilla JavaScript, ensuring the simulation remains lightweight and strictly reliant on the native HTML5 Canvas API for rendering.5 An exemplary architecture is observed in the open-source repository MTrajK/virus-spreading, which structures the application into highly distinct modules that separate mathematical logic, rendering routines, and global state management.5 This repository, while simple, contains all the foundational elements necessary to replicate the mechanics of c19model.com. The structural blueprint of such an application involves a clear separation of concerns, divided into specific core script files within a source directory. The central entry point is the HTML file (index.html), which imports all subsequent JavaScript and CSS files, defines the simulation parameters through interactive slider inputs, and houses the designated \ elements utilized for both the physical simulation and the statistical charting.5 The visual presentation and responsiveness are managed by a styling stylesheet (css/styles.css), which defines media queries to ensure the simulation scales appropriately on mobile devices, alongside simple rules for typography and user interface elements.5 The application logic is deeply compartmentalized. A global constants file (js/common.js) contains all the foundational physical constants utilized throughout the simulation, preventing hard-coded magic numbers from cluttering the physics engine.5 The central control mechanism is the application workflow controller (js/app.js), acting as the primary orchestrator. This file is responsible for parsing user inputs from the HTML range sliders, initializing the simulation parameters, and managing the start, stop, and reset lifecycles of the animation frame.5 The physical rules of the environment are strictly encapsulated in a vector mathematics module (js/vector2d.js), which implements a two-dimensional vector utility class to handle position coordinates, direction, velocity, and scalar operations required for spatial movement in a Cartesian plane.5 The entity logic is managed by a distinct entity class (js/ball.js), determining how individual agents traverse the canvas, detect collisions, and importantly, alter their epidemiological states over the progression of time.5 A dedicated charting utility (js/chart.js) acts as the statistical observer, managing the drawing and updating logic of the real-time area graph that plots the total number of individuals in each state as the simulation progresses.5 Finally, a master simulation loop (js/simulation.js) binds these disparate components together, executing iterative updates via the native browser method window.requestAnimationFrame, thereby ensuring the canvas is cleared and redrawn at the highest possible frame rate for smooth motion.5 ## **Entity State Mechanics and the Finite State Machine** To mirror real-world viral dynamics accurately, each particle within the simulation operates as a highly specific finite state machine (FSM). The state of an agent determines both its physical kinetic behavior, such as its movement speed and response to collisions, and its biological interaction behavior, specifically its probability of infecting others or becoming infected.5 The visual design language standardizes these states through distinct, easily identifiable color coding, allowing users to intuitively track the progression of the outbreak macroscopically while following individual microscopic events with their eyes. | Epidemiological State | Visual Representation | Behavioral Characteristics and Physical Constraints | | :---- | :---- | :---- | | Susceptible (Healthy) | Green | Moves freely according to its velocity vector. Vulnerable to state transition upon physical collision with an infected agent, strictly governed by a parameterized "infection rate" probability check. | | Infected (Sick) | Red | Moves freely. Acts as a primary contagion vector. Remains in this state for a predefined temporal window (e.g., typically between 6 to 8 seconds of real-time rendering) before automatically transitioning to either a Recovered or Deceased state based on mortality parameters. | | Recovered (Immune) | Orange | Moves freely. Has cleared the infection and can no longer be infected or transmit the virus. Crucially, these entities function as physical kinetic barriers that impede the direct path of the virus through the susceptible population, effectively visualizing the mechanical nature of herd immunity. | | Deceased | Black | Stationary. Velocity vectors are permanently set to absolute zero. Does not register physical collisions with other moving particles, effectively acting as if it does not exist to the other bouncing balls, thus removing them entirely from the active kinetic population dynamics. | | Vaccinated | Blue | Moves freely. Represents a subset of the population defined by the "vaccinated" parameter. Possesses a mathematically reduced probability of transitioning to the Infected state upon collision, dependent entirely on the "vaccine efficiency" variable. | | Socially Distanced | Retains Base Color | Retains its health-based color but possesses a permanent zero velocity vector from the moment of initialization. Acts as a stationary physical obstacle that moving agents bounce off of, heavily restricting the overall kinetic energy and homogeneous mixing of the system. | The transitions between these states are heavily reliant on chronometric tracking. When an agent transitions from Susceptible to the Infected state following a collision, the simulation architecture must immediately record a precise timestamp. In each subsequent frame of the animation loop, the agent evaluates the delta time since its initial infection. Once this chronological threshold is breached, which simulates the biological duration of the illness, a stochastic calculation based on the parameterized "death rate" determines whether the agent successfully transitions to the Recovered state or falls into the Deceased state.5 This temporal logic ensures that the simulation curve accurately reflects the delayed lag between infection spikes and mortality spikes. ## **JavaScript Implementation: Spatial Movement and Boundary Constraints** The technical execution of the frontend model requires a robust, custom-built physics engine capable of handling elastic collisions in two-dimensional space. The complexity arises not merely from translating particles across a screen, but from accurately resolving the intricate mathematics of two overlapping circular entities and ensuring the strict conservation of momentum and kinetic energy during their interactions.19 At the absolute core of this physics engine is the two-dimensional vector, which stores both the current spatial position and the velocity of each individual agent. In the context of the HTML5 Canvas API, the coordinate system is inverted compared to standard Cartesian planes; it designates the top-left corner as the absolute origin point (0, 0), with the x-axis extending positively to the right and the y-axis extending positively downwards towards the bottom of the screen.10 To maintain modularity and mathematical cleanliness, developers must establish a Vector2D class to handle spatial calculations, effectively isolating the vector addition, subtraction, dot products, and scalar multiplication from the main game loop.5 The continuous movement of an agent per rendering frame is calculated by adding the velocity vector to the current position vector. When an agent reaches the absolute boundary of the defined canvas area, the simulation must simulate a rigid, infinitely massive wall collision by reversing the corresponding velocity component. If the particle strikes the vertical walls on the left or right, the x-velocity is multiplied by negative one; if it strikes the horizontal walls at the top or bottom, the y-velocity is inverted.10 This creates a perfectly enclosed, isolated environment, enforcing total quarantine from external variables. The implementation of the basic Vector class and the boundary logic requires precision to prevent the entities from escaping the digital arena. JavaScript // Define the 2D Vector utility for position and velocity calculations class Vector2D { constructor(x, y) { this.x \= x; this.y \= y; } // Add another vector (used for applying velocity to position) add(vector) { this.x \+= vector.x; this.y \+= vector.y; } // Subtract another vector (used for finding distance between two points) subtract(vector) { return new Vector2D(this.x \- vector.x, this.y \- vector.y); } // Calculate the length of the vector using the Pythagorean theorem magnitude() { return Math.sqrt(this.x \* this.x \+ this.y \* this.y); } // Multiply by a scalar value (used for applying impulse forces) multiply(scalar) { return new Vector2D(this.x \* scalar, this.y \* scalar); } // Calculate the dot product (crucial for 1D collision resolution in 2D space) dotProduct(vector) { return this.x \* vector.x \+ this.y \* vector.y; } } // Define the core Agent representing an individual in the population class Agent { constructor(x, y, radius, isSocialDistancing \= false) { this.position \= new Vector2D(x, y); // Assign random initial velocities; absolutely zero if practicing social distancing const speed \= isSocialDistancing? 0 : (Math.random() \* 2 \+ 1); const angle \= Math.random() \* 2 \* Math.PI; this.velocity \= new Vector2D(Math.cos(angle) \* speed, Math.sin(angle) \* speed); this.radius \= radius; this.mass \= 1.0; // Assuming equal mass for ideal perfectly elastic collisions // Epidemiological States: 'susceptible', 'infected', 'recovered', 'deceased' this.state \= 'susceptible'; this.infectionTimestamp \= null; } // Main update loop for the agent, executed every single frame update(canvasWidth, canvasHeight, simulationTime, params) { if (this.state \=== 'deceased') return; // Deceased agents do not update position or process logic // Apply kinetic velocity to spatial position this.position.add(this.velocity); // Boundary collision detection (Elastic bounce off rigid canvas walls) if (this.position.x \- this.radius \<= 0 || this.position.x \+ this.radius \>= canvasWidth) { this.velocity.x \*= \-1; // Prevent the particle from getting mathematically stuck inside the wall boundary this.position.x \= this.position.x \- this.radius \<= 0? this.radius : canvasWidth \- this.radius; } if (this.position.y \- this.radius \<= 0 || this.position.y \+ this.radius \>= canvasHeight) { this.velocity.y \*= \-1; // Prevent boundary overlap on the Y axis this.position.y \= this.position.y \- this.radius \<= 0? this.radius : canvasHeight \- this.radius; } // Handle temporal disease progression based on the recorded timestamp if (this.state \=== 'infected') { const timeInfected \= simulationTime \- this.infectionTimestamp; if (timeInfected \> params.recoveryTime) { // Stochastic determination of survival based on the parameterized death rate if (Math.random() \< params.deathRate) { this.state \= 'deceased'; this.velocity \= new Vector2D(0, 0); // Halt all kinetic movement instantly } else { this.state \= 'recovered'; } } } } } ## **JavaScript Implementation: Collision Detection and Elastic Resolution** The computational bottleneck in any fluid agent-based simulation lies heavily within the collision detection algorithms. In a naive implementation, every single particle must rigorously check its distance against every other particle in the system during every single frame of the animation loop, resulting in a computationally expensive ![][image1] time complexity.22 The actual physical distance between any two agents is calculated by applying the Pythagorean theorem, determining the true Euclidean distance between their center coordinates. If this calculated distance is strictly less than the sum of their two radii, a physical collision is determined to be occurring.17 A critical technical failure in rudimentary simulations, which heavily detracts from the realism of the model, is the well-known "sticky particle" syndrome. If two high-velocity agents overlap deeply between the rendering of two frames, simply reversing their velocities upon detecting the collision will cause them to mathematically remain overlapped in the subsequent frame. Because they are still overlapped, the algorithm will reverse their velocities once again, resulting in an infinite loop where the particles become permanently fused together, vibrating endlessly in space.18 To successfully prevent this catastrophic physics failure, the engine must first resolve the spatial overlap before applying any velocity changes. This is achieved mathematically by calculating the exact penetration depth and translating both particles outward along the axis of collision until their perimeters are perfectly tangential to one another.24 Once spatial resolution is achieved, the engine calculates the post-collision velocities. Assuming perfectly elastic collisions between entities of equal mass—a standard assumption in these pedagogical models that ignores energy dissipation due to friction or the Magnus effect caused by spinning 20—the velocities are exchanged along the normal line of the collision. This requires vector mathematics to project the velocities onto the collision normal, apply the one-dimensional elastic collision formula, and apply the resulting impulse vector back to the agents.23 Concurrently with this physical momentum transfer, the epidemiological logic evaluates the transmission probability. JavaScript // Master function to handle elastic collisions and viral infection transmission function resolveCollision(agentA, agentB, infectionProbability, vaccineEfficacy) { // Deceased agents are removed from the physical plane; they do not trigger collisions if (agentA.state \=== 'deceased' || agentB.state \=== 'deceased') return; // Calculate the vector connecting the center points of the two agents const positionDelta \= agentA.position.subtract(agentB.position); const distance \= positionDelta.magnitude(); const minDistance \= agentA.radius \+ agentB.radius; // Check if spatial overlap exists between the two agents if (distance \< minDistance) { // 1\. Resolve spatial overlap to prevent the "sticky particles" infinite loop const overlap \= minDistance \- distance; // Calculate a correction vector to push the particles apart const correctionVector \= positionDelta.multiply(overlap / distance).multiply(0.5); // Separate the particles equally along the collision normal line // Only move agents that are not anchored as social distancing entities if (agentA.velocity.magnitude() \> 0) agentA.position.add(correctionVector); if (agentB.velocity.magnitude() \> 0) agentB.position.subtract(correctionVector); // 2\. Vector Mathematics for 1D perfectly elastic collision in 2D space const normal \= new Vector2D(positionDelta.x / distance, positionDelta.y / distance); const relativeVelocity \= agentA.velocity.subtract(agentB.velocity); // Calculate the speed of the agents strictly along the normal vector line const speedAlongNormal \= relativeVelocity.dotProduct(normal); // Do not resolve momentum if objects are already moving apart if (speedAlongNormal \> 0) return; // Calculate the impulse scalar assuming equal masses and perfectly elastic conditions const restitution \= 1.0; const impulse \= \-(1 \+ restitution) \* speedAlongNormal / (1/agentA.mass \+ 1/agentB.mass); // Create the final impulse vector const impulseVector \= normal.multiply(impulse); // Apply momentum transfer to velocities if (agentA.velocity.magnitude() \> 0) agentA.velocity.add(impulseVector.multiply(1/agentA.mass)); if (agentB.velocity.magnitude() \> 0) agentB.velocity.subtract(impulseVector.multiply(1/agentB.mass)); // 3\. Epidemiological State Transmission Logic attemptInfection(agentA, agentB, infectionProbability, vaccineEfficacy); } } // Function to handle the stochastic probability of disease transmission function attemptInfection(agentA, agentB, probability, vaccineEfficacy) { // Determine if the interaction pairs an infected agent with a susceptible or vaccinated one const oneInfected \= (agentA.state \=== 'infected' && (agentB.state \=== 'susceptible' || agentB.state \=== 'vaccinated')); const twoInfected \= (agentB.state \=== 'infected' && (agentA.state \=== 'susceptible' || agentA.state \=== 'vaccinated')); if (oneInfected || twoInfected) { // Adjust probability if the receiving agent is vaccinated let effectiveProbability \= probability; if (agentA.state \=== 'vaccinated' || agentB.state \=== 'vaccinated') { effectiveProbability \= probability \* (1 \- vaccineEfficacy); } // Execute the stochastic infection roll if (Math.random() \< effectiveProbability) { if (agentA.state \=== 'susceptible' || agentA.state \=== 'vaccinated') { agentA.state \= 'infected'; agentA.infectionTimestamp \= Date.now(); // Record the exact time of infection } if (agentB.state \=== 'susceptible' || agentB.state \=== 'vaccinated') { agentB.state \= 'infected'; agentB.infectionTimestamp \= Date.now(); } } } } This microscopic computational model dynamically generates the pandemic curve strictly from the bottom up. By tweaking the overarching parameters—such as increasing the number of agents initialized with a zero velocity to simulate lockdown orders, or lowering the global infectionProbability to simulate mandatory masking protocols—the resulting spread is visually and statistically flattened in real-time.1 ## **Macroscopic Compartmental Modeling: The SIRD Framework** While the JavaScript agent-based model is highly effective for visual education and immediate public comprehension, it introduces a significant amount of stochastic noise into the output data. Real-world physical constraints in the canvas environment, such as the spatial density of the particles, the specific geometric layout of the canvas, and the inherent randomness of the initial velocity angles, inadvertently manipulate and distort the underlying mathematical parameters.5 To ground the educational simulation in rigorous scientific methodology, developers must juxtapose the client-side micro-simulation against a macroscopic deterministic model executed on the server. The absolute gold standard for such deterministic modeling is the compartmental SIRD (Susceptible, Infected, Recovered, Deceased) model, which is governed by a system of non-linear ordinary differential equations (ODEs). By executing these complex mathematical calculations on a backend utilizing a server-side language like PHP, the application can generate exact, deterministic baseline data, free from the chaotic variance of physical collisions. This pristine baseline data can then be transmitted to the frontend via a standard JSON API and plotted on the exact same chart alongside the chaotic data generated by the bouncing particles. This dual-layer approach transforms the application into an advanced analytical tool that visualizes the exact margin of error between pure mathematics and pseudo-random kinetic agent interactions. The macroscopic spread of a disease in a closed population without standard demographics (meaning there are no natural births or non-disease-related deaths included in the timeline) is continuous in time and operates on the strict assumption of homogeneous mixing. The principle of homogeneous mixing dictates that every individual in the population has a perfectly equal probability of coming into contact with any other individual in the population at any given moment.8 This is an assumption that is inherently challenged by the spatial and geographic limitations of the canvas-based micro-simulation, providing a fascinating point of contrast. The differential equations governing the continuous transition of the population between these distinct compartments are formally expressed in the scientific literature as follows: ![][image2] ![][image3] ![][image4] Where: * ![][image5] represents the total constant population. * ![][image6], ![][image7], ![][image8], and ![][image9] represent the total number of individuals currently residing in the Susceptible, Infected, Recovered, and Deceased compartments, respectively. * ![][image10] (Beta) is the effective transmission rate, dictating exactly how many susceptible individuals an infected individual compromises per defined time step. * ![][image11] (Gamma) is the recovery rate, mathematically equivalent to the inverse of the infectious period duration. * ![][image12] (Mu) is the disease-induced mortality rate. These equations perfectly describe the flow of the population from one state to the next. The susceptible population decreases as a function of the number of infected individuals and the transmission rate. The infected population grows by that exact same amount, but simultaneously decreases as individuals recover (governed by gamma) or die (governed by mu). ## **PHP Implementation: Numerical Approximation via Euler's Method** Because this specific system of non-linear differential equations cannot be solved analytically to yield explicit, closed-form formulas for ![][image13] and ![][image14], computational solvers must employ sophisticated numerical integration techniques to step through time.6 The most straightforward and widely implemented technique in this domain is Euler's Method.6 Euler's method calculates the exact rate of change at a specific point in time and assumes that the calculated rate remains perfectly constant over a microscopically small step size forward in time (![][image15]). By multiplying the rate of change by the time step and adding this fractional change to the current state, the algorithm estimates the state of the system in the subsequent step. While more complex numerical techniques exist in the literature—such as the Runge-Kutta 4th Order method (RK4) or fractional order Adams-Bashforth methods, which utilize Caputo fractional-order derivatives to handle the complex biological modeling of infectious diseases and provide higher accuracy over volatile exponential curves 27—Euler's method provides more than sufficient fidelity for standard pedagogical simulations.6 This is true provided that the temporal step size is minimized adequately to prevent the approximation from drifting away from the true mathematical curve. Implementing this numerical solver in PHP requires establishing an object-oriented class architecture that ingests the initial conditions, calculates the parameters, and meticulously steps through the simulation iteratively. Advanced implementations can also accommodate pulse vaccination strategies by abruptly modifying the susceptible population at specific time intervals 8, though for standard replication of c19model.com, a continuous curve is sufficient. The resulting data array containing the daily integer counts can then be JSON-encoded and dispatched to the frontend to power analytical charts.6 PHP \population \= $population; $this\-\>transmissionRate \= $beta; $this\-\>recoveryRate \= $gamma; $this\-\>mortalityRate \= $mu; } /\*\* \* Executes the numerical integration over a specified timeframe. \* \* @param int $days Total number of days to simulate the outbreak \* @param float $dt The discrete time step (delta t) for Euler's method approximation \* @param int $initialInfected The starting number of infected individuals at t=0 \* @return array Multi-dimensional array representing the timeline of the epidemic \*/ public function simulate($days, $dt, $initialInfected) { // Initialize the standard compartments $S \= $this\-\>population \- $initialInfected; $I \= $initialInfected; $R \= 0; $D \= 0; $timeline \=; $totalSteps \= $days / $dt; $N \= $this\-\>population; // Iterate through time using the defined microscopic step size for ($step \= 0; $step \<= $totalSteps; $step\++) { $currentTime \= $step \* $dt; // Record data for the current state. // Using modulo logic to only store daily integer intervals to save memory // and reduce the JSON payload size sent to the client. if (abs($currentTime \- round($currentTime)) \< ($dt / 2)) { $timeline \=; } // Calculate the derivatives based on the current state equations $dS\_dt \= \- ($this\-\>transmissionRate \* $S \* $I) / $N; $dI\_dt \= (($this\-\>transmissionRate \* $S \* $I) / $N) \- ($this\-\>recoveryRate \* $I) \- ($this\-\>mortalityRate \* $I); $dR\_dt \= $this\-\>recoveryRate \* $I; $dD\_dt \= $this\-\>mortalityRate \* $I; // Apply Euler's method approximation: State(new) \= State(old) \+ (Rate of Change \* dt) $S \+= $dS\_dt \* $dt; $I \+= $dI\_dt \* $dt; $R \+= $dR\_dt \* $dt; $D \+= $dD\_dt \* $dt; // Boundary enforcement to prevent microscopic mathematical errors // resulting from large step sizes from generating impossible negative populations $S \= max(0, $S); $I \= max(0, $I); $R \= max(0, $R); $D \= max(0, $D); } return $timeline; } } // \--------------------------------------------------------- // Server Execution and JSON API Response Generation // \--------------------------------------------------------- // Define epidemiological parameters mapping to a theoretical pathogen $totalPopulation \= 100000; $basicReproductionNumber \= 2.5; // R0, the basic reproduction number $durationOfInfection \= 7; // Duration in days $infectionFatalityRate \= 0.02; // 2% mortality rate // Derive the standard differential parameters for the ODEs $gamma \= 1 / $durationOfInfection; // Recovery rate is the inverse of the infection duration $mu \= $gamma \* ($infectionFatalityRate / (1 \- $infectionFatalityRate)); // Adjusted mortality rate $beta \= $basicReproductionNumber \* ($gamma \+ $mu); // Transmission rate derived backwards from R0 // Initialize and execute the PHP solver $simulator \= new SIRDModel($totalPopulation, $beta, $gamma, $mu); $results \= $simulator\-\>simulate( days: 120, dt: 0.01, // High resolution numerical step to ensure Euler accuracy initialInfected: 10 ); // Output the deterministic timeline to be seamlessly ingested by the frontend charting engine header('Content-Type: application/json'); echo json\_encode(, 'trajectory' \=\> $results \]); ?\> The pristine data produced by this robust PHP backend is entirely sterile and free from the chaotic spatial anomalies that plague ABMs. By feeding this exact mathematical curve into a modern charting library on the frontend—alongside the real-time stochastic counts aggregated from the canvas particles—the application successfully transitions from a simple, game-like children's visualization 1 into a highly comprehensive scientific workbench. ## **Second and Third-Order Dynamics in Simulation Mechanics** Integrating a microscopic JavaScript physical model with a macroscopic PHP mathematical model exposes profound second and third-order analytical insights regarding how pure mathematical principles break down when subjected to real-world physical constraints and spatial limitations. Analyzing these discrepancies is crucial for understanding the true value of agent-based modeling. ### **Spatial Density and the Artificial Manipulation of the Reproduction Number** In the strict compartmental SIRD model calculated by the PHP backend, the fundamental concept of homogeneous mixing assumes an infinite, non-spatial reality.8 However, when translating this theoretical mathematics to the JavaScript HTML5 canvas, the basic reproduction number (![][image16]) completely ceases to be a static parameter controlled by a mathematical slider. Instead, ![][image16] immediately becomes a dynamic, emergent property defined heavily by fluid dynamics and spatial density.5 If a user drastically increases the number of particles on a fixed-resolution canvas, the mean free path—the average distance an agent travels in a straight line before colliding with another—drastically decreases. Consequently, the collision frequency of the entire system skyrockets exponentially. Even if the nominal infection probability per collision is kept drastically low via the user interface, the sheer density artificially inflates the empirical ![][image16] observed in the charting data.1 Therefore, when replicating tools like c19model.com, developers must carefully calibrate the exact ratio of the particle radius to the total canvas area to ensure the baseline collision frequency closely mirrors the temporal scaling of real-world interactions. The physics of bouncing balls thus acts as a highly effective surrogate for population density metrics, visually illustrating to the user why densely populated urban centers experience vastly different, much steeper epidemic curves compared to rural zones, despite facing the exact same biological pathogen. ### **Herd Immunity as a Physical Kinetic Barricade** Furthermore, the state transition logic embedded within the JavaScript physics engine dictates that recovered (orange) and vaccinated (blue) agents continue to occupy physical space and trigger elastic collisions, but they do not serve as biological vectors for viral transmission.5 In the macroscopic PHP model, the removal of susceptible individuals merely alters the mathematical product in the non-linear infection term (![][image17]). In the microscopic JavaScript model, however, these immune agents physically intercept the trajectory of the infected agents. They act as moving biological shields. This introduces a fluid-dynamic visualization of herd immunity that is impossible to achieve in pure mathematics. When the proportion of immune agents crosses a specific density threshold within the geometric confines of the canvas, infected agents find themselves entirely surrounded and blockaded by immune entities, preventing them from kinetically reaching the remaining susceptible agents before their biological recovery timer expires. The stochastic simulation thereby proves the concept of herd immunity not through abstract fractional math, but through the literal kinetic obstruction of the pathogen in two-dimensional space. ### **Modeling Societal Asymmetry and Regulatory Compliance** Standard simulation tools, including early iterations of the Washington Post simulations and the initial versions of c19model.com, initially assumed symmetrical adherence to social regulations.1 Every single simulated entity was subjected to the exact same overarching physical rules regarding velocity and distancing. However, robust epidemiological simulators must acknowledge behavioral asymmetry to remain scientifically relevant and pedagogically accurate. This crucial realism is accomplished by injecting statistical variance into the properties of the Agent class in the JavaScript architecture. Instead of applying a universal, blanket velocity reduction to simulate lockdown protocols, a percentage of the population can be explicitly parameterized as "non-compliant." These non-compliant entities maintain high velocity vectors regardless of the global social distancing sliders manipulated by the user. Analytically, introducing just a ten percent non-compliance population disproportionately disrupts the efficacy of the physical lockdown. Because the non-compliant agents move rapidly through the stationary or slowed population, they ricochet across the canvas, acting as super-spreaders. This highlights a critical third-order insight: in agent-based models reliant on physical collisions, kinetic energy is not distributed evenly. The variance in individual human behavior drastically skews the empirical transmission rate, resulting in outbreaks far beyond the deterministic, symmetrical predictions outputted by the backend PHP ODE solver. ### **The Computational Limits of Micro-Simulations** As users attempt to scale these web-based simulations to encompass tens of thousands of entities to better reflect a true macro-population, the computational limitations of the frontend ecosystem become immediately apparent. The JavaScript collision detection algorithm discussed previously relies entirely on a double for loop to check every single agent against every other agent, yielding an exponential growth in required calculations per frame. At a standard 60 frames per second rendering rate, a canvas loaded with 2,000 agents requires approximately two million discrete distance checks every sixteen milliseconds, a load that will swiftly crash standard browser tabs.17 To overcome this inherent limitation, advanced simulation architectures must implement Spatial Partitioning algorithms, such as Quadtrees or uniform spatial hashing grids. By mathematically dividing the HTML5 canvas into segmented spatial zones, an agent only needs to calculate distance metrics with other agents currently occupying its immediate or directly adjacent grid cells. This profound computational optimization mirrors real-world geography, implicitly enforcing the premise that an individual in one spatial region cannot instantly infect an individual in another without the kinetic time required to physically traverse the canvas. This reinforces the overall fidelity of the simulation by intertwining the computational optimization logic directly with the epidemiological necessity of localized, geographically constrained transmission models. ## **Conclusion** The construction of interactive epidemiological simulators, inspired heavily by the pedagogical success of platforms like c19model.com, requires a rigorous synthesis of kinematics, sociology, and dual-layered computational engineering. The unparalleled value of these tools lies not in their absolute predictive accuracy, but in their capacity to render the invisible, highly abstract mathematics of infectious disease as a visible, kinetic reality that can be intuitively grasped by the public. By employing a frontend architecture that fully leverages the client-side processing power of the HTML5 Canvas API and vanilla JavaScript, developers can construct a microscopic environment where entities navigate the complex geometry of viral transmission through perfectly elastic collisions and deterministic finite state machines. This physical rendering transforms abstract public health policies—such as border closures, vaccination mandates, and social distancing protocols—into literal boundary constraints, probability reductions, and velocity alterations, respectively, offering immense educational utility. Simultaneously, recognizing the stochastic volatility and density dependencies inherent in the canvas environment necessitates the strict integration of a macroscopic benchmark. Utilizing server-side scripting like PHP to process the precise numerical integration of SIRD differential equations via Euler's Method firmly grounds the application in established theoretical epidemiology. When seamlessly synthesized into a unified platform, the juxtaposition of the visual micro-model and the mathematical macro-model transcends basic public education, offering profound insights into how spatial density, behavioral variance, and kinetic interactions relentlessly manipulate the mathematical trajectory of global infectious outbreaks. #### **Works cited** > 1. Simulation of regulations effecting virus spread created for children in mind. c19model.com, accessed July 22, 2026, [https://www.reddit.com/r/educationalgifs/comments/fxpg0k/simulation\_of\_regulations\_effecting\_virus\_spread/](https://www.reddit.com/r/educationalgifs/comments/fxpg0k/simulation_of_regulations_effecting_virus_spread/) > 2. Lista över covid-19-simuleringsmodeller \- Wikipedia, accessed July 22, 2026, [https://sv.wikipedia.org/wiki/Lista\_%C3%B6ver\_covid-19-simuleringsmodeller](https://sv.wikipedia.org/wiki/Lista_%C3%B6ver_covid-19-simuleringsmodeller) > 3. List of COVID-19 simulation models \- Wikipedia, accessed July 22, 2026, [https://en.wikipedia.org/wiki/List\_of\_COVID-19\_simulation\_models](https://en.wikipedia.org/wiki/List_of_COVID-19_simulation_models) > 4. bouncing-ball · GitHub Topics, accessed July 22, 2026, [https://github.com/topics/bouncing-ball?l=javascript\&o=asc\&s=forks](https://github.com/topics/bouncing-ball?l=javascript&o=asc&s=forks) > 5. GitHub \- MTrajK/virus-spreading: Simple virus spreading simulation ..., accessed July 22, 2026, [https://github.com/MTrajK/virus-spreading](https://github.com/MTrajK/virus-spreading) > 6. SIR Model, Part 3, accessed July 22, 2026, [https://sites.math.duke.edu/education/ccp/materials/diffcalc/sir/sir3.html](https://sites.math.duke.edu/education/ccp/materials/diffcalc/sir/sir3.html) > 7. Euler's Method for the SIR Model \- YouTube, accessed July 22, 2026, [https://www.youtube.com/watch?v=mc4S0UIbIuY](https://www.youtube.com/watch?v=mc4S0UIbIuY) > 8. Impulsive Linearly Implicit Euler Method for the SIR Epidemic Model with Pulse Vaccination Strategy \- MDPI, accessed July 22, 2026, [https://www.mdpi.com/2075-1680/13/12/854](https://www.mdpi.com/2075-1680/13/12/854) > 9. Bertik750 \- Roblox, accessed July 22, 2026, [https://www.roblox.com/users/2326366872/profile](https://www.roblox.com/users/2326366872/profile) > 10. Bounce off the walls \- Game development \- MDN Web Docs, accessed July 22, 2026, [https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D\_Breakout\_game\_pure\_JavaScript/Bounce\_off\_the\_walls](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls) > 11. ImperialCollegeLondon/covid19model: Code for modelling estimated deaths and cases for COVID19. \- GitHub, accessed July 22, 2026, [https://github.com/ImperialCollegeLondon/covid19model](https://github.com/ImperialCollegeLondon/covid19model) > 12. This is the COVID-19 CovidSim microsimulation model developed by the MRC Centre for Global Infectious Disease Analysis hosted at Imperial College, London. \- GitHub, accessed July 22, 2026, [https://github.com/mrc-ide/covid-sim](https://github.com/mrc-ide/covid-sim) > 13. PLOS One paper: Reopening California: Seeking Robust, Non-Dominated COVID-19 Exit Strategies \- GitHub, accessed July 22, 2026, [https://github.com/RANDCorporation/covid-19-reopening-california](https://github.com/RANDCorporation/covid-19-reopening-california) > 14. COVID-19 Agent-based Simulator (Covasim): a model for exploring coronavirus dynamics and interventions \- GitHub, accessed July 22, 2026, [https://github.com/institutefordiseasemodeling/covasim](https://github.com/institutefordiseasemodeling/covasim) > 15. sasanca/COVID-19Model \- GitHub, accessed July 22, 2026, [https://github.com/sasanca/COVID-19Model](https://github.com/sasanca/COVID-19Model) > 16. BeepBeep virus contagion simulator replicating an article from the Washington Post about COVID-19 \- GitHub, accessed July 22, 2026, [https://github.com/sylvainhalle/virus-contagion](https://github.com/sylvainhalle/virus-contagion) > 17. Collision detection between balls javascript \- Stack Overflow, accessed July 22, 2026, [https://stackoverflow.com/questions/33510442/collision-detection-between-balls-javascript](https://stackoverflow.com/questions/33510442/collision-detection-between-balls-javascript) > 18. Ball collisions getting stuck together when colliding canvas html 5 \- Stack Overflow, accessed July 22, 2026, [https://stackoverflow.com/questions/47100924/ball-collisions-getting-stuck-together-when-colliding-canvas-html-5](https://stackoverflow.com/questions/47100924/ball-collisions-getting-stuck-together-when-colliding-canvas-html-5) > 19. Pelican and Javascript \- Bouncing Balls in Canvas \- Jack McKew's Blog, accessed July 22, 2026, [https://jackmckew.dev/pelican-and-javascript-bouncing-balls-in-canvas.html](https://jackmckew.dev/pelican-and-javascript-bouncing-balls-in-canvas.html) > 20. Graphical Analysis of Motion — High School Physics \- Lykke, accessed July 22, 2026, [https://www.getlykke.com/explore/public/high-school-physics-060065c2-a6bb-4d4e-a0a1-42b95ab5e1eb?section=graphical-analysis-motion](https://www.getlykke.com/explore/public/high-school-physics-060065c2-a6bb-4d4e-a0a1-42b95ab5e1eb?section=graphical-analysis-motion) > 21. Newton's Cradle Simulation with Damping | PDF | Collision | Oscillation \- Scribd, accessed July 22, 2026, [https://www.scribd.com/document/924006967/AID-B-GROUP-3](https://www.scribd.com/document/924006967/AID-B-GROUP-3) > 22. Collision detection \- Game development \- MDN Web Docs, accessed July 22, 2026, [https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D\_Breakout\_game\_pure\_JavaScript/Collision\_detection](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) > 23. elastic 2d ball collision using angles \- Stack Overflow, accessed July 22, 2026, [https://stackoverflow.com/questions/30497287/elastic-2d-ball-collision-using-angles](https://stackoverflow.com/questions/30497287/elastic-2d-ball-collision-using-angles) > 24. 2D Collision in Canvas \- Balls Overlapping When Velocity is High, accessed July 22, 2026, [https://gamedev.stackexchange.com/questions/31876/2d-collision-in-canvas-balls-overlapping-when-velocity-is-high](https://gamedev.stackexchange.com/questions/31876/2d-collision-in-canvas-balls-overlapping-when-velocity-is-high) > 25. How a Bouncing Ball Works \- PhysicsHub – Interactive Physics Simulations Online, accessed July 22, 2026, [https://physicshub.github.io/blog/physics-bouncing-ball-comprehensive-educational-guide](https://physicshub.github.io/blog/physics-bouncing-ball-comprehensive-educational-guide) > 26. 2D Elastic Collision with SFML \- Stack Overflow, accessed July 22, 2026, [https://stackoverflow.com/questions/31620730/2d-elastic-collision-with-sfml](https://stackoverflow.com/questions/31620730/2d-elastic-collision-with-sfml) > 27. Mathematical analysis of SIRD model of COVID-19 with Caputo fractional derivative based on real data \- PMC, accessed July 22, 2026, [https://pmc.ncbi.nlm.nih.gov/articles/PMC7831877/](https://pmc.ncbi.nlm.nih.gov/articles/PMC7831877/) [image1]: [image2]: [image3]: [image4]: [image5]: [image6]: [image7]: [image8]: [image9]: [image10]: [image11]: [image12]: [image13]: [image14]: [image15]: [image16]: [image17]: