SchellingsModelOfSegregation/index.html at master · commoningtoys/SchellingsModelOfSegregation · GitHub

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
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Schelling's Model of Segregation</title>
	<script src="p5.min.js"></script>
	<script src="addons/p5.dom.min.js"></script>
	<script src="addons/p5.sound.min.js"></script>
	<script src="sketch.js"></script>
	<script src="Agent.js"></script>
	<script src="SchellingsModel.js"></script>
	<link rel="stylesheet" href="style.css">

</head>

<body bgcolor="#FFF">
	<div id="warning">
		<div id="content">
			<p>ROTATE YOUR
				<u>DEVICE</u> TO ENJOY THE MODEL</p>
		</div>
	</div>
	<div class="menu">
		<table>
			<th>
				<tr>
					<input type="range" id="kind" value="2" min="2" max="6" step="1" onchange="updateValue()">
				</tr>
			</th>
			<th>
				<tr>
					<div id="theKind">kind: 2</div>
				</tr>
			</th>
			<th>
				<tr>
					<input type="range" id="size" value="30" min="5" max="30" step="1" onchange="updateValue()">
				</tr>
			</th>
			<th>
				<tr>
					<div id="theSize">size: 30</div>
				</tr>
			</th>
			<th>
				<tr>
					<input type="range" id="threshold1" value="10" min="0" max="95" step="1" onchange="updateValue()">
				</tr>
			</th>
			<th>
				<tr>
					<input type="range" id="threshold2" value="30" min="1" max="95" step="1" onchange="updateValue()">
				</tr>
			</th>
			<th>
				<tr>
					<div id="theThreshold">10% threshold 30%</div>
				</tr>
			</th>
			<th>
				<tr>
					<input type="range" id="freeCell" value="30" min="5" max="90" step="5" onchange="updateValue()">
				</tr>
			</th>
			<th>
				<tr>
					<div id="theFreeCell">free cells: 30%</div>
				</tr>
			</th>
			<br>
			<th>
				<tr>
					<button type="button" id="initModel" onclick="initModel()">PLAY</button>
				</tr>
			</th>
			<br>
			<th>
				<tr>
					<button type="button" id="randomThreshold" onclick="randomThreshold()">RANDOMIZE THE THERSHOLDS</button>
				</tr>
			</th>
			<br>
			<th>
				<tr>
					<button type="button" id="info" onclick="showInfo = !showInfo">INFO</button>
				</tr>
			</th>
			<br>
			<br>
			<br>
			<th>
				<tr>
					<div class="happiness" id="happinessValue">:-(</div>
				</tr>
			</th>
		</table>


	</div>

	<div id="p5Sketch"></div>


	<div class="caseButtons">
		<button onclick="initModelByCase(1)">CASE 1</button>
		<button onclick="initModelByCase(2)">CASE 2</button>
		<button onclick="initModelByCase(3)">CASE 3</button>
	</div>
</body>

</html>