Skip to content

Commit 4a2f9a2

Browse files
chanrtchanrt
committed
Initialized schelling model
1 parent 9a17b37 commit 4a2f9a2

File tree

6 files changed

+310
-0
lines changed

6 files changed

+310
-0
lines changed

‎about.html

+2
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,8 @@ <h2>Planned Topics</h2>
283283
<li>Boltzmann Distribution in a randomized exchange lattice</li>
284284
<li>Solve Travelling Salesman using Genetic Algorithm, Simulated Annealing and Ant-Colony Optimization</li>
285285
<li>Raycasting</li>
286+
<li>Wave function collapse (procedural level generation)</li>
287+
<li>Maximum flow in a network</li>
286288
</ol>
287289

288290
<p class="flow-text">

‎schelling_model/Boid.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
class Boid {
2+
constructor(type, i, j) {
3+
this.type = type;
4+
this.x = (j + 0.5) * cell_length;
5+
this.y = (i + 0.5) * cell_length;
6+
}
7+
render() {
8+
if (this.type == 1) {
9+
context.fillStyle = "#ff0000";
10+
}
11+
else if (this.type == 2) {
12+
context.fillStyle = "#0000ff";
13+
}
14+
15+
context.beginPath();
16+
context.arc(this.x, this.y, boid_radius, 0, 2 * Math.PI);
17+
context.fill();
18+
}
19+
}

‎schelling_model/basic.js

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
let screen_width = window.innerWidth, screen_height = window.innerHeight;
2+
let canvas_width, canvas_height;
3+
let fps = 24, paused = false;
4+
let mobile;
5+
6+
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
7+
mobile = true;
8+
} else {
9+
mobile = false;
10+
}
11+
12+
let canvas = document.getElementById("canvas");
13+
let context = canvas.getContext("2d");
14+
15+
if (mobile) {
16+
canvas_width = 0.9 * screen_width;
17+
}
18+
else {
19+
canvas_width = 0.4 * screen_width;
20+
}
21+
canvas_height = canvas_width;
22+
23+
canvas.width = canvas_width;
24+
canvas.height = canvas_height;
25+
26+
let animate = window.requestAnimationFrame
27+
|| window.webkitRequestAnimationFrame
28+
|| window.mozRequestAnimationFrame
29+
|| function (callback) {
30+
window.setTimeout(callback, 1000 / fps);
31+
};
32+
33+
function step() {
34+
if (!paused) {
35+
update();
36+
}
37+
render();
38+
animate(step);
39+
}
40+
41+
window.onload = function () {
42+
defaultParams();
43+
initParams();
44+
animate(step);
45+
}
46+
47+
function defaultParams() {
48+
49+
}
50+
51+
let click_x, click_y, pressed;
52+
53+
if(mobile) {
54+
canvas.addEventListener("touchstart", function (e) {
55+
getTouchPosition(canvas, e);
56+
let touch = e.touches[0];
57+
let mouseEvent = new MouseEvent("mousedown", {
58+
clientX: touch.clientX,
59+
clientY: touch.clientY
60+
});
61+
canvas.dispatchEvent(mouseEvent);
62+
pressed = true;
63+
clicked();
64+
}, false);
65+
66+
canvas.addEventListener("touchmove", function (e) {
67+
getTouchPosition(canvas, e);
68+
let touch = e.touches[0];
69+
let mouseEvent = new MouseEvent("mousemove", {
70+
clientX: touch.clientX,
71+
clientY: touch.clientY
72+
});
73+
canvas.dispatchEvent(mouseEvent);
74+
moved();
75+
}, false);
76+
77+
canvas.addEventListener("touchend", function (e) {
78+
getTouchPosition(canvas, e);
79+
let touch = e.touches[0];
80+
let mouseEvent = new MouseEvent("mouseup", {
81+
clientX: touch.clientX,
82+
clientY: touch.clientY
83+
});
84+
canvas.dispatchEvent(mouseEvent);
85+
pressed = false;
86+
released();
87+
}, false);
88+
}
89+
else {
90+
canvas.addEventListener("mousedown", function (e) {
91+
getMousePosition(canvas, e);
92+
pressed = true;
93+
clicked();
94+
});
95+
96+
canvas.addEventListener("mousemove", function (e) {
97+
getMousePosition(canvas, e);
98+
moved();
99+
});
100+
101+
canvas.addEventListener("mouseup", function (e) {
102+
getMousePosition(canvas, e);
103+
pressed = false;
104+
released();
105+
});
106+
107+
window.addEventListener("keydown", function(e) {
108+
keyPressed(e.keyCode);
109+
}, false);
110+
111+
window.addEventListener("keydown", function(e) {
112+
keyReleased(e.keyCode);
113+
}, false);
114+
}
115+
116+
function getMousePosition(canvas, event) {
117+
rect = canvas.getBoundingClientRect();
118+
click_x = event.clientX - rect.left;
119+
click_y = event.clientY - rect.top;
120+
}
121+
122+
function getTouchPosition(canvas, event) {
123+
var rect = canvas.getBoundingClientRect();
124+
click_x = event.touches[0].clientX - rect.left;
125+
click_y = event.touches[0].clientY - rect.top;
126+
}

‎schelling_model/simulation.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<title>Schelling's Model | Visualize It</title>
6+
<meta charset="utf-8" />
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
10+
<!-- Materialize -->
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
13+
14+
<script src="../helper.js" defer></script>
15+
<script src="Boid.js" defer></script>
16+
<script src="basic.js" defer></script>
17+
<script src="user_input.js" defer></script>
18+
<script src="simulation.js" defer></script>
19+
20+
<script type="text/javascript" async
21+
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
22+
</script>
23+
24+
<!-- CSS -->
25+
<link rel="stylesheet" href="../style.css" />
26+
</head>
27+
28+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M95CKRP8HB"></script>
29+
<script>
30+
window.dataLayer = window.dataLayer || [];
31+
function gtag() { window.dataLayer.push(arguments); }
32+
gtag('js', new Date());
33+
34+
gtag('config', 'G-M95CKRP8HB');
35+
</script>
36+
37+
<body>
38+
<nav class="nav-extended" style="background:black; margin-top: 0mm">
39+
<div class="nav-wrapper">
40+
<h1 id="main-heading">Visualize It</h1>
41+
</div>
42+
<div class="nav-content">
43+
<ul class="tabs tabs-transparent tabs-fixed-width">
44+
<li class="tab"><a href="../index.html">Home</a></li>
45+
<li class="tab"><a href="../about.html">About</a></li>
46+
</ul>
47+
</div>
48+
</nav>
49+
50+
<div class="text">
51+
<h2>Schelling's Model</h2>
52+
53+
<div class="container" style="width:90%">
54+
<div class="row">
55+
<div class="col s12 l8">
56+
<canvas id="canvas"></canvas>
57+
</div>
58+
<div class="col s12 l4">
59+
60+
</div>
61+
</div>
62+
</div>
63+
64+
<br>
65+
<hr>
66+
67+
<p class="center-align">Developed by ChanRT | Fork me at <a href="https://www.github.com/chanrt">GitHub</a></p>
68+
</div>
69+
</body>
70+
71+
</html>

‎schelling_model/simulation.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
let num_cells, cell_length, boid_radius;
2+
3+
let occupancy = 0.75;
4+
5+
let boids;
6+
let grid;
7+
8+
function update() {
9+
10+
}
11+
12+
function render() {
13+
context.fillStyle = "#000000";
14+
context.fillRect(0, 0, canvas_width, canvas_height);
15+
16+
// drawGrid();
17+
18+
for (let boid of boids) {
19+
boid.render();
20+
}
21+
}
22+
23+
function updateParams(variable) {
24+
25+
}
26+
27+
function initParams() {
28+
grid = [];
29+
boids = [];
30+
31+
if (mobile) {
32+
num_cells = 30;
33+
}
34+
else {
35+
num_cells = 50;
36+
}
37+
38+
cell_length = canvas_width / num_cells;
39+
boid_radius = 0.45 * cell_length;
40+
41+
42+
for (let i = 0; i < num_cells; i++) {
43+
new_row = [];
44+
for (let j = 0; j < num_cells; j++) {
45+
new_row.push(0);
46+
}
47+
grid.push(new_row);
48+
}
49+
50+
let num_boids = Math.floor(num_cells * num_cells * occupancy);
51+
52+
for (let i = 0; i < num_boids; i++) {
53+
let type = 0;
54+
if (i % 2 == 0) {
55+
type = 1;
56+
}
57+
else {
58+
type = 2;
59+
}
60+
61+
while (true) {
62+
let i = Math.floor(Math.random() * num_cells);
63+
let j = Math.floor(Math.random() * num_cells);
64+
if (grid[i][j] == 0) {
65+
grid[i][j] = type;
66+
boids.push(new Boid(type, i, j));
67+
break;
68+
}
69+
}
70+
}
71+
72+
console.log(boids);
73+
}

‎schelling_model/user_input.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
function clicked() {
2+
3+
}
4+
5+
function moved() {
6+
7+
}
8+
9+
function released() {
10+
11+
}
12+
13+
function keyPressed(key) {
14+
15+
}
16+
17+
function keyReleased(key) {
18+
19+
}

0 commit comments

Comments
 (0)