-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathschelling.html
More file actions
144 lines (127 loc) · 8.57 KB
/
Copy pathschelling.html
File metadata and controls
144 lines (127 loc) · 8.57 KB
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schelling's Segregation Model</title>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="../static/js/angular.min.js"></script>
</head>
<body ng-app="app">
{% raw %}
<div id="wrapper">
<div id="title-panel">
<h2 class="text-center">Segregation Simulator <span class="label label-danger">Beta</span></h2>
<p class="text-center">An implementation of the Thomas Schelling's Segregation Model.</p>
</div>
<div ng-controller="SimulationController" class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<div class="controls-section">
<fieldset>
<legend>Simulation setup</legend>
<label for="gridWidth">Columns</label>
<input type="number" class="number-input-60" ng-model="conf.width" ng-change="initializeBoard()" min="10" step="{{conf.blockSize}}" max="500" id="gridWidth">
<label for="gridHeight">Rows</label>
<input type="number" class="number-input-60" ng-model="conf.height" ng-change="initializeBoard()" min="10" step="{{conf.blockSize}}" max="500" id="gridHeight">
<label for="threshold">Threshold</label>
<select name="threshold" ng-model="conf.threshold">
<option ng-repeat="t in [2,3,4,5,6]">{{t}}</option>
</select>
<label for="speed">Speed</label>
<select name="speed" ng-model="conf.speed">
<option value="1000">Slow</option>
<option value="500">Medium</option>
<option value="100">Fast</option>
</select>
<label for="firstColorRatio">({{conf.firstColorName}}: {{conf.firstColorRatio}}% / {{conf.secondColorName}}: {{100 - conf.firstColorRatio}}%)</label>
<input type="range" name="firstColorRatio" ng-model="conf.firstColorRatio" ng-change="initializeBoard()" min="1" max="99" value="50">
<label for="blanksRatio">Blanks Ratio ({{conf.blanksRatio}}%):</label>
<input type="range" name="blanksRatio" ng-model="conf.blanksRatio" ng-change="initializeBoard()" min="1" max="99" value="10">
</fieldset>
</div>
<div class="controls-section">
<fieldset>
<legend>Board design</legend>
<label for="blockSize">Block Size</label>
<input type="number" class="number-input-50" ng-model="conf.blockSize" ng-change="draw()" min="1" max="50" id="blockSize">
<label for="firstColor">First Color</label>
<select name="firstColor" ng-model="conf.firstColorName" ng-change="draw()">
<option ng-repeat="color in conf.colors">{{color}}</option>
</select>
<label for="secondColor">Second Color</label>
<select name="secondColor" ng-model="conf.secondColorName" ng-change="draw()">
<option ng-repeat="color in conf.colors">{{color}}</option>
</select>
<label>Fill Strokes
<input type="checkbox" ng-change="draw()" ng-model="conf.fillStroke">
</label><br/>
</fieldset>
</div>
<div id="control-buttons">
<button id="btnStart" class="btn btn-primary" ng-click="start();">Start</button>
<button id="btnStop" class="btn btn-danger" ng-click="stop();" disabled>Stop</button>
<button id="btnReset" class="btn btn-default" ng-click="reset();">Reset</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<canvas id="canvas" width="{{ conf.width * conf.blockSize }}" height="{{ conf.height * conf.blockSize }}" title="To save the image: Right click -> Save image as..."></canvas>
</div>
<p class="text-center">Round: {{ conf.round }}. Unsatisfied: {{ conf.unsatisfied | number:2 }}%.</p>
</div>
</div>
<footer class="text-center">
<p>Developed by <a target="_blank" href="https://about.me/jonathan_hepp">Jonathan Hepp</a>.</p>
<p>Learn more about how the simulator works <a data-toggle="modal" href="#game-info-modal">clicking here</a>.</p>
</footer>
</div>
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content text-justify">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Schelling's Model for Segregation</h4>
</div>
<div class="modal-body">
<p><strong>Background</strong></p>
<p>This simulator was inspired by an economic model proposed by <a href="https://en.wikipedia.org/wiki/Thomas_Schelling" target="_blank">Thomas Schelling</a> to try to understand the segregation of populations. It was originally talking about racial segregation, but it is generic enough to be used in different contexts of segregation or no context at all. This simulator isn't meant to be accurate with the original model. </p>
<p><strong>How It Works</strong></p>
<p>The simulation board is randomly filled with two different populations and blank space. In the first round, the algorithm iterates over the board cells looking for dissatisfied agents. </p>
<p>A dissatisfied agent is one which has a number of opposing agents surrounding him that is greater than the threshold defined in the simulation. So let's say an agent of the population A is surrounded by 5 agents of the population B and the threshold defined is 4. This agent in particular is considered dissatisfied by the algorithm.</p>
<p>After the algorithm has iterated over the whole board, the simulator changes the position of all the dissatisfied agents. This agents can change positions with other dissatisfied agents or with blank spaces.</p>
<p>Notice that this changing in agents positions can have two effects: it can make previously dissatisfied agents to become satisfied and vice-versa. </p>
<p>The simulator keeps repeating this process until there are no more dissatisfied agents on the board. </p>
<p><strong>What It Means</strong></p>
<p>After running different setups of the simulation, you should be able to notice something. </p>
<p>The threshold value of the simulation is called the tolerance threshold, usually referred as <i>variable t</i>, and it is the determining factor on the outcome of the simulation. The lower you set this threshold, the more segregated the populations become, usually forming big isolated blocks separated by blank spaces. As you increase the threshold, the board gets more mixed up, more homogeneous. That is the whole point of the simulation.</p>
<p>You may notice that in certain combinations of board size and threshold sets the simulation might never end, since it might not be possible to satisfy all the agents. Nevertheless, you can stop the simulation at any time. </p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p id="alertModalMessage"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="../static/js/jquery-2.2.3.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/schelling.js"></script>
{% endraw %}
</body>
</html>