Simulating epidemics with WebGL

In a recent post, I looked at the SIR model for simulating epidemics. The SIR model only tracks three numbers: the number of “Susceptible”, “Infected”, and “Recovered” people. This doesn’t account for location: all simulated meetings are between two random members of the global population. This is clearly unrealistic, so let’s fix that. Below is a spatial SIR model, simulated with WebGL:

The world is modelled as a 2D grid. Each cell tracks the number of Susceptible, Infected and Recovered people. We visualize the state of the world with Blue and Red: Blue is the number of Susceptible people, and Red is the number of Infected people. (I’ve omitted the green Recovered people. See below.)

Each day, there are meetings between people. Two people meet if they are in the same or adjacent cells. Each meeting has a 10% chance of transmissing the infection. The infection lasts for an average of 30 days before “recovery”. As in the non-spatial SIR model, death is modelled as a form of recovery. Make what you will of this.

This model is certainly more realistic than the non-spatial SIR model. The infection dies out where the population density is too low to sustain the spread. It reminds me of a mould spreading. But this model is also still unrealistic in many ways. Real meetings don’t just happen between “adjacent” people: infections can jump from one city to another via airplanes.

To make this simulation efficient, I’ve implemented it as a WebGL fragment shader. This draws on a previous simulation of the Game of Life that I wrote in 2017. The entire state is stored as a 1024x1024 texture. I have one “stepper” fragment shader which reads this texture, and generates the next state. The initial process is bootstrapped with this 1024x1024 image, which I screenshotted from a population density map of Shanghai.

My simulation has a significant bug. You’ll notice that the number of red Infected people decreases after the height of the infection, But it never reaches zero. I don’t know why this is!

In future posts, I intend to fix this bug. I might also try modelling flights. I might also add some sliders, so you the reader can adjust the parameters of the model.

Tagged #programming, #graphics, #webgl, #epidemiology.

👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

Similar posts

WebGL shading: both diffuse and specular

A WebGL shader that combines diffuse and specular lighting, allowing the user to adjust the relative contribution of each using keyboard controls. Guest post by Luís Fonseca. 2017-10-28

Giant Game of Life

Implements a 1024x1024 grid of Conway’s Game of Life using WebGL fragment shaders. 2017-10-23

Game of Life implemented with a fragment shader

A Conway’s Game of Life simulation implemented using WebGL fragment shaders, with rendering to texture and a Gosper Glider Gun initial state. 2017-10-22

Drawing a cube in WebGL

Rendering an animated 3D cube in WebGL using a vertex shader, face color uniforms, and matrix transformations for rotating the cube. 2017-10-21

Generated normal-mapped ripples

Generating dynamic normal-mapped ripple effects using WebGL, with the mouse position controlling the light source. 2017-10-20

GLSL varying variables

GLSL varying allows vertex shader outputs to be passed to fragment shaders. A WebGL demo with colors interpolated between vertices. 2017-10-19

Similar posts

WebGL shading: both diffuse and specular

A WebGL shader that combines diffuse and specular lighting, allowing the user to adjust the relative contribution of each using keyboard controls. Guest post by Luís Fonseca. 2017-10-28

Giant Game of Life

Implements a 1024x1024 grid of Conway’s Game of Life using WebGL fragment shaders. 2017-10-23

Game of Life implemented with a fragment shader

A Conway’s Game of Life simulation implemented using WebGL fragment shaders, with rendering to texture and a Gosper Glider Gun initial state. 2017-10-22

Drawing a cube in WebGL

Rendering an animated 3D cube in WebGL using a vertex shader, face color uniforms, and matrix transformations for rotating the cube. 2017-10-21

Generated normal-mapped ripples

Generating dynamic normal-mapped ripple effects using WebGL, with the mouse position controlling the light source. 2017-10-20

GLSL varying variables

GLSL varying allows vertex shader outputs to be passed to fragment shaders. A WebGL demo with colors interpolated between vertices. 2017-10-19

More by Jim

What does the dot do in JavaScript?

foo.bar, foo.bar(), or foo.bar = baz - what do they mean? A deep dive into prototypical inheritance and getters/setters. 2020-11-01

Smear phishing: a new Android vulnerability

Trick Android to display an SMS as coming from any contact. Convincing phishing vuln, but still unpatched. 2020-08-06

A probabilistic pub quiz for nerds

A “true or false” quiz where you respond with your confidence level, and the optimal strategy is to report your true belief. 2020-04-26

Time is running out to catch COVID-19

Simulation shows it’s rational to deliberately infect yourself with COVID-19 early on to get treatment, but after healthcare capacity is exceeded, it’s better to avoid infection. Includes interactive parameters and visualizations. 2020-03-14

The inception bar: a new phishing method

A new phishing technique that displays a fake URL bar in Chrome for mobile. A key innovation is the “scroll jail” that traps the user in a fake browser. 2019-04-27

The hacker hype cycle

I got started with simple web development, but because enamored with increasingly esoteric programming concepts, leading to a “trough of hipster technologies” before returning to more productive work. 2019-03-23

Project C-43: the lost origins of asymmetric crypto

Bob invents asymmetric cryptography by playing loud white noise to obscure Alice’s message, which he can cancel out but an eavesdropper cannot. This idea, published in 1944 by Walter Koenig Jr., is the forgotten origin of asymmetric crypto. 2019-02-16

How Hacker News stays interesting

Hacker News buried my post on conspiracy theories in my family due to overheated discussion, not censorship. Moderation keeps the site focused on interesting technical content. 2019-01-26

My parents are Flat-Earthers

For decades, my parents have been working up to Flat-Earther beliefs. From Egyptology to Jehovah’s Witnesses to theories that human built the Moon billions of years in the future. Surprisingly, it doesn’t affect their successful lives very much. For me, it’s a fun family pastime. 2019-01-20

The dots do matter: how to scam a Gmail user

Gmail’s “dots don’t matter” feature lets scammers create an account on, say, Netflix, with your email address but different dots. Results in convincing phishing emails. 2018-04-07

The sorry state of OpenSSL usability

OpenSSL’s inadequate documentation, confusing key formats, and deprecated interfaces make it difficult to use, despite its importance. 2017-12-02

I hate telephones

I hate telephones. Some rational reasons: lack of authentication, no spam filtering, forced synchronous communication. But also just a visceral fear. 2017-11-08

The Three Ts of Time, Thought and Typing: measuring cost on the web

Businesses often tout “free” services, but the real costs come in terms of time, thought, and typing required from users. Reducing these “Three Ts” is key to improving sign-up flows and increasing conversions. 2017-10-26

Granddad died today

Granddad died. The unspoken practice of death-by-dehydration in the NHS. The Liverpool Care Pathway. Assisted dying in the UK. The importance of planning in end-of-life care. 2017-05-19

How do I call a program in C, setting up standard pipes?

A C function to create a new process, set up its standard input/output/error pipes, and return a struct containing the process ID and pipe file descriptors. 2017-02-17

Your syntax highlighter is wrong

Syntax highlighters make value judgments about code. Most highlighters judge that comments are cruft, and try to hide them. Most diff viewers judge that code deletions are bad. 2014-05-11

This page copyright James Fisher 2020. Content is not associated with my employer. Found an error? Edit this page.