Coronavirus Spreading Simulator In JavaScript

Category: Javascript , Recommended | March 31, 2020
Views Total:501 views
Official Page:Go to website
Last Update:March 31, 2020


Coronavirus Spreading Simulator In JavaScript


Just another open-source Coronavirus spreading simulator with different strategies that can be used to show how stay-at-home can help prevent the spread of COVID-19.

Requires p5.js library and inspired by Why outbreaks like coronavirus spread exponentially, and how to ‘flatten the curve’.

How to use it:

1. Download the package and insert the following scripts into your document.

<link as="script" rel="preload" href="./p5.min.js" />
<link as="script" rel="modulepreload" href="./app.js" />
<link as="script" rel="modulepreload" href="./options.js" />
<link as="script" rel="modulepreload" href="./dom.js" />
<link as="script" rel="modulepreload" href="./Ball.js" />
<link as="script" rel="modulepreload" href="./results.js" />
<link as="script" rel="modulepreload" href="./collisions.js" />
<script defer src="./p5.min.js"></script>
<script type="module" src="./app.js"></script>

2. Build the HTML for the Coronavirus Spreading Simulator.

 <form><label aria-label="Activate People Stay At Home filter" title="People stay at home"><input id=stay-home type=checkbox>? Stay At Home</label> <label aria-label="Activate Deaths provoked by virus" title="Deaths provoked by virus"><input id=deaths type=checkbox>☠️ Show deaths</label></form>
 <div id=count>
    <div>Healthy<br><span id=well>0</span></div>
    <div>Recovered<br><span id=recovered>0</span></div>
    <div>Sick<br><span id=infected>0</span></div>
    <div id=death-count>Deaths<br><span id=death>0</span></div>
    <div>Max Concurrently Sick<br><span id=max-concurrent-infected>0</span></div>
 <svg id=graph version=1.1 xmlns= xmlns:xlink= height=50 width=100% aria-labelledby="Graph of virus spread" role=img>
    <title>Graph of virus spread</title>
 <div id=canvas>
    <div id=replay style=display:none>? Run a new simulation</div>

3. Customize the simulator by overriding the default parameters in the options.js.

  death: false,
  stayHome: false
export const CANVAS_SIZE = {
  height: 880,
  width: 360
export const DESKTOP_CANVAS_SIZE = {
  height: 400,
  width: 800
export const BALL_RADIUS = 5
export const COLORS = {
  death: '#c50000',
  recovered: '#D88DBC',
  infected: '#5ABA4A',
  well: '#63C8F2'
export const STATES = {
  infected: 'infected',
  well: 'well',
  recovered: 'recovered',
  death: 'death'
export const COUNTERS = {
  'max-concurrent-infected': 'max-concurrent-infected'
export const STARTING_BALLS = {
  [STATES.infected]: 1,
  [STATES.well]: 199,
  [STATES.recovered]: 0,
  [STATES.death]: 0,
  'max-concurrent-infected': 0
export const RUN = {
  filters: { ...DEFAULT_FILTERS },
  results: { ...STARTING_BALLS },
  tick: 0
export const SPEED = 1
export const TOTAL_TICKS = 1600
export const TICKS_TO_RECOVER = 500
export const resetRun = () => {
  RUN.results = { ...STARTING_BALLS }
  RUN.tick = 0

You Might Be Interested In:

Leave a Reply