We wanted to make a project that would involve learning some p5.js. We also wanted to learn more about disease and epidemic modelling, to understand the COVID-19 crisis better. This project is a blend of both, using p5.js simulations to mimic the spread of an epidemic from patient zero to full infection!

What it does

This is a basic epidemic simulator. We start off with one person who has the virus, which is 'infected' and represented by a red dot, and everyone else is 'susceptible', represented by a blue dot. Each person has a radius around them, and when someone crosses that radius, a number is sampled from a Bernoulli distribution with mean p. This p is a parameter between 0 and 1 that the user may choose, representing probability of infection. If the sampled number is greater than p, the other person gets infected and the dot turns red.

How we built it

This is built purely in HTML, pure CSS, and Javascript. p5.js was used for the animations and the simulation.

Challenges we ran into

We are really new to web development and simulating things, so there was a lot of learning involved!

Accomplishments that we're proud of

We managed to get the infection scenario up and running, and we managed to come up with creative ideas to implement the model of the infection scenario, such as representing probability of infection as well as finding creative ways for the program to register that two dots are in infectious range.

What we learned

We spent a lot of time discussing how to best model an epidemic, as well as more factors that would be useful to consider (and better ways to simulate an epidemic). We also learned a lot of javascript -- p5.js in particular.

What's next for Epidemic Simulator

We want to add more complexity to the model, and make it more realistic. We want to include recoveries, a chart showing cumulative case numbers, intervention factors (e.g. social distancing, masks, vaccinations), and more realistic models for people running into each other.

Built With

Share this project: