Web Simulation 

 

 

 

  SIRV Model (Epidemic Spread) Simulation 

This note provides an interactive, visual simulation of epidemic spread using the SIRV (Susceptible-Infected-Recovered-Vaccinated) model. The simulation demonstrates how diseases spread through a population and visualizes the concept of "flattening the curve" through social distancing measures and vaccination campaigns.

The simulation uses the SIRV (Susceptible-Infected-Recovered-Vaccinated) model, where each person can be in one of four states: Susceptible (Blue) - can become infected or vaccinated, Infected (Yellow/Red gradient) - can spread the disease and will eventually recover, Recovered (Green) - immune after infection and cannot be reinfected, and Vaccinated (Purple) - immune via vaccination and cannot be infected.

You can interact with the simulation by adjusting the transmission rate (probability of infection on contact), recovery time (how long it takes to recover), social distancing percentage (percentage of people who stay stationary), and vaccination rate (rate at which susceptible individuals are vaccinated). The real-time graph below the simulation shows how the number of people in each state changes over time, demonstrating the "flattening the curve" effect when social distancing is increased or vaccination campaigns are implemented.

NOTE : The simulation uses collision detection to determine when people come into contact. When an infected (red/yellow) person collides with a susceptible (blue) person, there is a probability (based on transmission rate) that the susceptible person becomes infected. Infected people recover after a set time period and become immune (green). Vaccinated individuals (purple) cannot be infected. Social distancing reduces movement, which reduces contact and slows the spread of the disease. Vaccination campaigns convert susceptible individuals to vaccinated at a rate that is 10 times slower than disease transmission, reflecting the slower pace of vaccination programs compared to disease spread.

Math behind the Simulation

The SIRV (Susceptible-Infected-Recovered-Vaccinated) model is a compartmental epidemiological model that divides the population into four groups based on their disease status. The simulation implements a discrete, agent-based version of this model where each person is an individual agent that can transition between states.

State Variables

Each person in the simulation has a state variable that can be one of four values:

  • S (Susceptible): Can become infected or vaccinated
  • I (Infected): Currently infected and can spread the disease
  • R (Recovered): Recovered and immune after infection (cannot be reinfected)
  • V (Vaccinated): Immune via vaccination (cannot be infected)

State Transitions

The SIRV model has three possible state transitions:

S → I → R (infection path)
S → V (vaccination path)

1. Susceptible → Infected (Transmission)

When a susceptible person comes into contact with an infected person (detected via circle-circle collision), transmission occurs with probability β (the transmission rate):

P(S → I) = β

where β is the user-adjustable transmission rate (0 to 1, displayed as 0-100%). In the simulation, this is implemented as:

if (Math.random() < transmissionRate) { person.state = 'infected'; }

2. Infected → Recovered

An infected person recovers after a fixed time period τ (recovery time, in frames). This is implemented as a timer:

if (infectionTime ≥ τ) { I → R }

where infectionTime is incremented each frame for infected individuals. Once recovered, a person cannot transition back to susceptible (this is the SIR model, not SIRS which allows reinfection).

3. Susceptible → Vaccinated

A susceptible person can be vaccinated through a vaccination campaign. The vaccination rate ν (nu) controls the probability that a susceptible person becomes vaccinated each frame. However, vaccination is implemented at 1/10th the set rate to reflect that vaccination campaigns are much slower than disease spread:

P(S → V) = ν / 10

where ν is the user-adjustable vaccination rate (0 to 1, displayed as 0-100%). The effective vaccination rate is divided by 10 to make vaccination 10 times slower than infection spread, reflecting the slower pace of vaccination programs. Vaccination is NOT contagious - vaccinated individuals do NOT cause others to become vaccinated.

Continuous SIRV Model (Reference)

The classical continuous-time SIRV model uses differential equations to describe the rate of change of each compartment:

dS/dt = -β · S · I / N - ν · S
dI/dt = β · S · I / N - γ · I
dR/dt = γ · I
dV/dt = ν · S

where:

  • S, I, R, V: Number of people in each state
  • N: Total population (N = S + I + R + V)
  • β: Transmission rate (contact rate × probability of transmission)
  • γ: Recovery rate (1 / average recovery time)
  • ν: Vaccination rate (rate at which susceptible individuals are vaccinated)

The simulation implements a discrete, agent-based version where:

  • Transmission occurs probabilistically on contact (collision detection)
  • Recovery occurs deterministically after a fixed time period
  • Each person is an individual agent, not a fraction of the population

Social Distancing Effect

Social distancing is implemented by setting a percentage of people to be stationary (velocity = 0). This reduces the contact rate, effectively reducing β in the continuous model. The effect is:

βeffective = β · (1 - socialDistancingPercent)

where socialDistancingPercent is the fraction of people who don't move. This reduction in contact rate:

  • Reduces the peak number of infected people (Imax)
  • Spreads infections over a longer time period
  • Does not necessarily reduce the total number of people who eventually get infected

This is the mathematical basis for "flattening the curve" - the area under the I(t) curve (total infections) may remain similar, but the peak height is reduced and the curve is spread wider.

Collision Detection

The simulation uses circle-circle collision detection to determine when two people come into contact. For two circles with centers at (x₁, y₁) and (x₂, y₂) and radii r₁ and r₂:

distance = √[(x₂ - x₁)² + (y₂ - y₁)²]
collision = (distance < r₁ + r₂)

When a collision is detected between an infected and susceptible person, the transmission probability is applied. The collision also triggers an elastic collision response for realistic movement:

impulse = 2 · (v₂ - v₁) · n
v₁ = v₁ + impulse · n
v₂ = v₂ - impulse · n

where n is the normalized collision normal vector, creating realistic bouncing behavior.

Key Insight: Flattening the Curve

The fundamental insight of the SIR model is that reducing the transmission rate (through social distancing, masks, etc.) doesn't necessarily prevent the disease from spreading - it slows it down. Mathematically, this means:

  • The peak of infections (Imax) is reduced, preventing healthcare systems from being overwhelmed
  • The duration of the epidemic is extended, spreading cases over time
  • The total number of people who eventually get infected may remain similar (depending on the basic reproduction number R₀ = β/γ)

This is why the graph shows a "flattened curve" when social distancing is increased - the red line (infected count) has a lower peak but extends over a longer time period, which is exactly what public health measures aim to achieve.

 

Usage Example

Follow these steps to explore epidemic spread and "flattening the curve":

  1. Initial State: When you first load the simulation, 200 people are randomly distributed across the canvas, with one person initially infected (red). Click the "Play" button to start the simulation and watch the disease spread.
  2. Observe Natural Spread: With default settings (Transmission Rate: 30%, Recovery Time: 200 frames, Social Distancing: 0%), watch how the disease spreads through the population. Notice how:
    • Red (infected) people spread the disease to blue (susceptible) people on contact
    • The number of infected people peaks and then decreases as people recover
    • The graph shows the classic epidemic curve with a sharp peak
  3. Experiment with Transmission Rate: Adjust the "Transmission Rate" slider (0-100%):
    • Low (0-20%): Disease spreads slowly, may not infect everyone
    • Medium (30-50%): Moderate spread, typical epidemic behavior
    • High (60-100%): Rapid spread, most people get infected quickly
  4. Experiment with Recovery Time: Adjust the "Recovery Time" slider (50-500 frames):
    • Short (50-100): People recover quickly, shorter epidemic duration
    • Medium (150-250): Balanced recovery time
    • Long (300-500): People stay infected longer, epidemic lasts longer
  5. Flatten the Curve with Social Distancing: This is the key educational moment! Adjust the "Social Distancing" slider (0-100%):
    • 0%: No social distancing - sharp peak in infections (overwhelms healthcare)
    • 30-50%: Moderate distancing - peak is lower and wider (flattened curve)
    • 70-100%: Strong distancing - very low peak, very wide spread over time
    Watch the graph! The red line (infected count) should show a lower, wider peak when social distancing is increased. This demonstrates "flattening the curve" - spreading cases over a longer time period to avoid overwhelming healthcare systems.
  6. Experiment with Vaccination: Adjust the "Vaccination Rate" slider (0-100%):
    • 0%: No vaccination - standard SIR model behavior
    • 1-5%: Slow vaccination campaign - gradually reduces susceptible population
    • 10-20%: Moderate vaccination - significant impact on disease spread
    • 30%+: Rapid vaccination - can prevent major outbreaks
    Note: The effective vaccination rate is 10 times slower than the set value (e.g., 2% slider = 0.2% per frame) to reflect that vaccination campaigns are slower than disease spread. Watch how vaccination reduces the number of susceptible individuals and can prevent or reduce the peak of infections.
  7. Observe the Graph: The real-time graph below the simulation shows four lines:
    • Blue line: Number of susceptible people (decreases as they get infected or vaccinated)
    • Red line: Number of infected people (peaks then decreases as they recover)
    • Green line: Number of recovered people (increases over time)
    • Purple line: Number of vaccinated people (increases as vaccination campaign progresses)
    The graph updates in real-time, allowing you to see how different parameters affect the epidemic curve. Notice how vaccination can reduce the peak of infections by reducing the susceptible population.
  8. Reset and Compare: Click "Reset" to start a new simulation with the same parameters. Try running the same simulation multiple times to see how randomness affects the spread. Then change parameters and compare the results.

Tip: The key insight is that social distancing doesn't prevent the disease from spreading - it slows it down. By reducing contact between people, the same number of people may eventually get infected, but over a longer time period. This "flattening the curve" prevents healthcare systems from being overwhelmed by too many cases at once. Watch the graph carefully - with high social distancing, the red peak should be much lower and wider compared to no social distancing!

Parameters

Followings are short descriptions on each parameters
  • Transmission Rate: Controls the probability that a susceptible person becomes infected when they come into contact with an infected person (range: 0-100%, default: 30%). Higher values mean the disease spreads more easily on contact. This represents factors like how contagious the disease is, whether people are wearing masks, etc. When two people collide, there is a chance (based on this rate) that the susceptible person becomes infected.
  • Recovery Time: Controls how long (in frames) an infected person remains infected before recovering (range: 50-500 frames, default: 200). Higher values mean people stay infected longer, which can lead to longer epidemics and more total infections. This represents the natural course of the disease and medical treatment effectiveness.
  • Social Distancing: Controls the percentage of people who stay stationary and don't move (range: 0-100%, default: 0%). Higher values mean more people stay in place, reducing contact and slowing the spread of the disease. This is the key parameter for "flattening the curve" - when increased, the epidemic peak becomes lower and wider, spreading cases over a longer time period. This demonstrates how reducing contact can prevent healthcare systems from being overwhelmed.
  • Vaccination Rate: Controls the rate at which susceptible individuals are vaccinated per frame (range: 0-100%, default: 0%). Higher values mean more susceptible people get vaccinated each frame. However, the effective vaccination rate is 10 times slower than the set value (e.g., 2% slider = 0.2% per frame) to reflect that vaccination campaigns are much slower than disease spread. Vaccination is NOT contagious - vaccinated individuals do NOT cause others to become vaccinated. This simulates a vaccination campaign where susceptible individuals are vaccinated at a given rate, reducing the susceptible population and potentially preventing or reducing the peak of infections. When vaccination rate is high, you can see the purple (vaccinated) line grow on the graph while the blue (susceptible) line decreases.
  • Step Delay: Controls the delay between simulation steps in milliseconds (range: 0-500 ms, default: 200). Higher values slow down the simulation, making it easier to observe the spread of the disease and state transitions. When set to 0, the simulation runs at maximum speed (60 FPS). The default value of 200 ms provides a good balance between speed and observability. This parameter is useful for educational purposes, allowing you to watch the disease spread in slow motion and better understand the dynamics of the epidemic.

Buttons and Controls

Followings are short descriptions on each control
  • Play/Pause: Located at the top of the control panel, this button starts or pauses the simulation. When you click Play, people begin moving and the disease can spread. The button text changes to "Pause" during simulation, allowing you to pause and resume at any time. When paused, you can still adjust the parameter sliders and see their effects when you resume.
  • Reset: Located next to the Play/Pause button at the top of the control panel, this button resets the simulation to its initial state. All people are reset to susceptible (blue), except for one randomly selected person who starts as infected (red). The graph is also cleared. This is useful for testing different parameter combinations and observing how they affect the epidemic spread.
  • Parameter Preset: A dropdown menu to quickly load predefined combinations of Transmission Rate, Recovery Time, Social Distancing, and Vaccination Rate. Selecting a preset automatically updates all the sliders below. If you manually adjust any slider, the preset automatically switches to "Custom" to preserve your unique settings. Available presets:
    • Default (Normal Spread): Transmission Rate 30%, Recovery Time 200, Social Distancing 0%, Vaccination Rate 0% - Balanced epidemic behavior
    • Fast Spread: Transmission Rate 70%, Recovery Time 100, Social Distancing 0%, Vaccination Rate 0% - Rapid disease spread with quick recovery
    • Slow Spread: Transmission Rate 15%, Recovery Time 400, Social Distancing 0%, Vaccination Rate 0% - Slow, prolonged epidemic
    • Flattened Curve: Transmission Rate 30%, Recovery Time 200, Social Distancing 60%, Vaccination Rate 0% - Demonstrates "flattening the curve" effect
    • Pandemic (High Transmission): Transmission Rate 85%, Recovery Time 150, Social Distancing 0%, Vaccination Rate 0% - Very contagious disease scenario
    • Controlled (Low Risk): Transmission Rate 20%, Recovery Time 200, Social Distancing 80%, Vaccination Rate 0% - Low transmission with strong social distancing
    • Custom: Your manually adjusted parameter settings

Interaction and Visualization

  • Person Visualization: Each person is drawn as a colored circle (5 pixel radius) representing their state:
    • Blue: Susceptible - can become infected or vaccinated
    • Yellow/Red gradient: Infected - color changes from bright yellow (just infected) to dark red (long infected) based on infection duration, has a subtle glow effect
    • Green: Recovered - immune after infection, cannot be reinfected
    • Purple: Vaccinated - immune via vaccination, cannot be infected
    People move around the canvas and bounce off walls. When social distancing is enabled, some people stop moving and remain stationary. The color gradient for infected individuals helps visualize how long each person has been infected - newly infected people appear bright yellow, while those closer to recovery appear dark red.
  • Click to Toggle Individual State: You can click on any individual person in the simulation to cycle through all four states. Each click advances the state in this order: Susceptible (Blue) → Infected (Yellow/Red) → Recovered (Green) → Vaccinated (Purple) → Susceptible (Blue). This works at any time - whether the simulation is paused or running. This feature is useful for:
    • Manually controlling the initial infected population
    • Simulating interventions (quarantine/recovery) on specific individuals
    • Testing different scenarios by manually changing individual states
    • Observing how individual state changes affect the overall epidemic curve
    • Creating custom initial conditions before starting the simulation
    The cursor changes to a pointer when hovering over the simulation canvas to indicate that individuals can be clicked. Click repeatedly on the same person to cycle through all states.
  • Collision Detection: The simulation uses circle-circle collision detection to determine when two people come into contact. When an infected (red) person collides with a susceptible (blue) person, there is a probability (based on transmission rate) that the susceptible person becomes infected. The collision also causes a simple elastic collision response, making the movement more realistic.
  • Real-time Graph: Below the main simulation canvas, a real-time line graph shows the number of people in each state over time. The graph has four colored lines:
    • Blue line: Susceptible count (starts high, decreases as people get infected or vaccinated)
    • Red line: Infected count (peaks then decreases as people recover)
    • Green line: Recovered count (increases over time as infected people recover)
    • Purple line: Vaccinated count (increases over time as vaccination campaign progresses)
    The graph updates every frame, allowing you to see how the epidemic evolves. This is where you can clearly see the "flattening the curve" effect when social distancing is increased - the red peak becomes lower and wider. You can also observe how vaccination reduces the susceptible population and can prevent or reduce the peak of infections.
  • State Transitions: People transition between states based on the simulation rules:
    • Susceptible → Infected: Happens on contact with an infected person, based on transmission rate probability
    • Susceptible → Vaccinated: Happens based on vaccination rate probability (10 times slower than the set rate)
    • Infected → Recovered: Happens automatically after the recovery time has elapsed
    • Recovered: Permanent state - recovered people cannot be reinfected (SIR model, not SIRS)
    • Vaccinated: Permanent state - vaccinated people cannot be infected (vaccination is not contagious)
  • Social Distancing Effect: When social distancing is enabled, a percentage of people stop moving (velocity set to 0). These stationary people reduce contact with others, slowing the spread of the disease. This is visualized in the graph as a "flattened curve" - the peak of infections is lower and spread over a longer time period. This demonstrates the public health concept of spreading cases over time to avoid overwhelming healthcare systems.
  • Performance: The simulation uses O(n²) collision detection (each person checks all other people), which works well for 200 people. The simulation runs at 60 FPS using requestAnimationFrame for smooth animation.