-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
119 lines (103 loc) · 5.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<title>sirsimx</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:100,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/default.css">
<link rel="stylesheet" href="styles/footer.css">
<!-- favicon.ico -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body onload="alertIfNotChrome()">
<div class="main" id="main">
<div id="title-div">
<h1>Disease Spread Simulation</h1>
</div>
<div id="content-div">
<div id="text-div">
<p>
The following canvas simulates how a disease spreads through a population.<br>
The simulation is based on the
<a href="https://en.wikipedia.org/wiki/Compartmental_models_in_epidemiology#The_SIR_model">SIR
Model</a>.
</p>
In the model, the population, represented by the dots on the canvas is divided into susceptible
of being infected (the yellow dots), infectious (the reds), and recovered from the disease
(the green ones).
</p>
<p>
The settable parameters are the population size - between 3 and 300, the probability of being
infected,
the recovery time, and the speed at which the dots move - the higher the speed, the higher the
number of
collisions between the dots, and the faster the disease spreads. The disease is spread by the
infectious
by the collision with a susceptible.
Once recovered, one cannot be affected again by the disease.<br>
The simulation starts with one infectious and all the others susceptible.
</p>
<p>
New features, bug fixes, and better style will be released soon, stay tuned!<br />
Source code available at this <a href="https://github.com/lorenzofelletti/sirsimx">link</a>.
</p>
</div>
<div class="flex-container" id="sim-and-form-container">
<div id="graph-sim-div">
<div id="graph-container">
</div>
<div id="sirsim-container">
</div>
</div>
<div class="form-div" id="form-div">
<!-- form to set the simulation parameters and restart the sim -->
<form name="form-sim-params" class="grid-container">
<h2 class="form-legend">Parameters</h2>
<label for="popsize" id="pslabel" class="label">Population Size</label>
<span id="psmin" class="minspan"></span>
<input type="range" id="popsize" min="10" max="500" step="10" value="300">
<span id="psmax" class="maxspan"></span><span id="psactval" class="actspan"></span>
<label for="infectionprobability">Infection Probability</label>
<span id="ipmin" class="minspan"></span>
<input type="range" id="infectionprobability" min="0.01" max="1" step="0.01" value="1">
<span id="ipmax" class="maxspan"></span><span id="ipactval" class="actspan"></span>
<label for="recoverytimeinmillis">Recovery Time (ms)</label>
<span id="rtmin" class="minspan"></span>
<input type="range" id="recoverytimeinmillis" min="1000" max="5000" step="100" value="2000">
<span id="rtmax" class="maxspan"></span><span id="rtactval" class="actspan"></span>
<label for="speed">Speed</label>
<span id="spmin" class="minspan"></span>
<input type="range" id="speed" min="1" max="5" step="0.1" value="2">
<span id="spmax" class="maxspan"></span><span id="spactval" class="actspan"></span>
<label for="vaccination">Vaccination Rate</label>
<span id="vcmin" class="minspan"></span>
<input type="range" id="vaccination" min="0" max="1" step="0.05" value="0.3">
<span id="vcmax" class="maxspan"></span><span id="vcactval" class="actspan"></span>
<label for="effectiveness">Vaccine Effectiveness</label>
<span id="effecmin" class="minspan"></span>
<input type="range" id="effectiveness" min="0" max="1" step="0.05" value="0.85">
<span id="effecmax" class="maxspan"></span><span id="effecactval" class="actspan"></span>
<div class="formbtn-div flex-container">
<button id="restartbtn">Restart</button>
<button id="resetbtn">Reset</button>
</div>
</form>
</div> <!-- form-div -->
</div> <!-- flex-container -->
</div>
<!-- Footer -->
<div class="footer">
<span id="footer-span">Lorenzo Felletti 2020</span>
</div> <!-- footer -->
</div> <!-- main -->
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script src="scripts/alert.js"></script>
<script src="scripts/sirsim.js"></script>
<script src="scripts/graphp5.js"></script>
<script src="scripts/startsim.js"></script>
<script src="scripts/form.js"></script>
</body>
</html>