-
Notifications
You must be signed in to change notification settings - Fork 27
/
Copy pathenglish.html
111 lines (95 loc) · 4.76 KB
/
english.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
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script language="javascript" type="text/javascript" src="SocialDistancingSimulator.js"></script>
<link rel="stylesheet" href="style.css">
<title>Social distancing simulator</title
</head>
<body>
<div class="container">
<h1>Social distancing simulator</h1>
<p>This simulator allows you to interactively explore the effects of social distancing on
the spread of any contagious disease. Each circle represents a person who can be either healthy
(white), immune (yellow), infected (red), or deceased (gray). A healthy person is infected
when they collide with an infected person. After a period of infection, a person either dies
or become permanently immune.
</p>
<p>Move the sliders left and right to change the parameters and observe what happens. A detailed explanation is available below.</p>
<table class='parameters'>
<tr>
<td>Social distance</td>
<td><input id="social-distance-slider" class="slider" type="range" min="0" max="100" value="10"
oninput="document.getElementById('social-distance-value').innerHTML=this.value;"
onchange="document.getElementById('social-distance-value').innerHTML=this.value;"/></td>
<td><span id="social-distance-value">10</span>%</td>
<td class="restart-button" rowspan="3"><input id='restart-button' type='submit' value='Restart'/></td>
</tr>
<tr>
<td>Mortality</td>
<td><input id="mortality-slider" class="slider" type="range" min="0" max="100" value="3"
oninput="document.getElementById('mortality-value').innerHTML=this.value;"
onchange="document.getElementById('mortality-value').innerHTML=this.value;"/></td>
<td><span id="mortality-value">3</span>%</td>
</tr>
<tr>
<td>Infection duration</td>
<td><input id="sick-time-slider" class="slider" type="range" min="0" max="10" step="0.1" value="2"
oninput="document.getElementById('sick-time-value').innerHTML=Number(this.value).toFixed(1);"
onchange="document.getElementById('sick-time-value').innerHTML=Number(this.value).toFixed(1);"/></td>
<td><span id="sick-time-value">2.0</span>s</td>
</tr>
</table>
<div id="ball-simulation"></div>
<table class="statistics">
<tr>
<td><span style="font-size: 32px;">○</span> healthy</td>
<td><span style="font-size: 32px; color: #FFFF40">●</span> immune</td>
<td><span style="font-size: 32px; color: #FF0000">●</span> sick</td>
<td><span style="font-size: 32px; color: #808080">●</span> deceased</td>
<td>time</td>
</tr>
<tr>
<td><span id="healthy-stat"></span>%</td>
<td><span id="immune-stat"></span>%</td>
<td><span id="sick-stat"></span>%</td>
<td><span id="dead-stat"></span>%</td>
<td><span id="current-time"></span>s</td>
</tr>
</table>
<div id="ball-graph"></div>
<p><b>Social distancing</b> controls to what extent the population enforces
social distancing. At 0% there is no social distancing and persons move
with maximum speed, so that there is a great deal of contact between them. At
100% everyone remains still and there is no contact at all.
</p>
<p><b>Mortality</b> is the probability that a sick person dies. If you set mortality
to 0% nobody dies, while a mortality of 100% means that anybody who catches the
infection will die.</p>
<p><b>Infection duration</b> determines for how long a person is infected.
A longer time gives an infected person more opportunities to spread the infection.
Since the simulation runs at high speed, time is measured in seconds.</p>
<p>
The simulation purposely makes a number of simplifying assumptions, among them:
there is no incubation period;
persons are contagious for the entire duration of their sickness;
and the probability of passing the infection through contact is 100%.
</p>
<p>
The author of the simulation is <a href="http://www.andrej.com/">Andrej
Bauer</a>.
The idea for it came from an
<a href="https://www.washingtonpost.com/graphics/2020/world/corona-simulator/">article</a>
in the Washington post written by Harry Stevens.
The source code is freely available as a GitHub project <a href="https://github.com/andrejbauer/social-distancing-simulator"><code>social-distancing-simulator</code></a>.
Please help improve the code and translate it into your language.
</p>
<p>See this page in <a href="./index.html">other languages</a>.
<p><b>Disclaimer:</b> The purpose of the simulator is purely educational. It
demonstrates the complexity of social distancing during an epidemic in terms of an
artificial mathematical model. It should not be used to draw any conclusions about
real contagious diseases.
</p>
</div>
</body>
</html>