forked from jacobsorme/kexjobb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (168 loc) · 5.32 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
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body >
<canvas width="200px" height="200px" id="canvas" style="border:solid 1px #000;"></canvas>
<canvas width="200px" height="200px" id="heatmap" style="border:solid 1px #000;"></canvas>
<h2>RESULTS</h2>
<p id="res"></p>
<div id="data"></div>
<script src="cleaner.js"></script>
<script src="spiral.js"></script>
<script src="snaking.js"></script>
<script>
var c = null;
// Add a robot at a random position and angle. Width 6, speed 3.
function addRobot(){
// c = new Snaking(Math.floor(Math.random()*canvas.width),Math.floor(Math.random()*canvas.height),6,"#5f1",Math.random()*Math.PI*2, 3);
c = new Cleaner(Math.floor(Math.random()*canvas.width),Math.floor(Math.random()*canvas.height),6,"#5f1",Math.random()*Math.PI*2, 3);
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
addRobot();
var max_runs = 4;
var run_count = 0;
var current_p = 0;
var steps = 0;
var last_percentage = 0.01;
var percentage = 0;
var data_storage = [[]];
var radians_storage = [[]];
var opacity = [];
opacity.length = parseInt(document.getElementById("canvas").height)*parseInt(document.getElementById("canvas").width);
var refresh_rate = 1;
ctx.fillStyle="#fff";
function addData(data){
document.getElementById("data").innerHTML += (data + "<br>");
}
function display_data() {
var data_string = "UPDATE AVERAGES\n";
var turnString = "TURNS AVERAGES\n";
var mean_runs = [];
var mean_turns = [];
var max_updates = "MAX RUNS\n";
var min_updates = "MIN RUNS\n";
var max_turns = "MAX TURNS\n";
var min_turns = "MIN TURNS\n";
var dev_run_string = "UPDATE DEVIATIONS\n";
var dev_turn_string = "TURN DEVIATIONS\n";
for(let i = 0; i < 95; i++) {
let sum_d = 0;
let sum_r = 0;
let min_turn = 10000;
let max_turn = 0;
let min_run = 10000;
let max_run = 0;
for(let r of data_storage) {
sum_d+=r[i];
if(r[i] > max_run) {
max_run = r[i];
}
if(r[i] < min_run) {
min_run = r[i];
}
}
max_updates += max_run + "\n";
min_updates += min_run + "\n";
for(let r of radians_storage) {
sum_r+=r[i];
if(r[i] > max_turn) {
max_turn = r[i];
}
if(r[i] < min_turn) {
min_turn = r[i];
}
}
max_turns += max_turn + "\n";
min_turns += min_turn + "\n";
data_string += (sum_d/max_runs) + "\n";
turnString += (sum_r/max_runs) + "\n"
mean_runs.push((sum_d/max_runs));
mean_turns.push((sum_r/max_runs));
}
for(let i = 0; i < 95; i++) {
var data_diff = 0;
for(let r of data_storage) {
data_diff += Math.pow(r[i]-mean_runs[i],2);
}
data_diff *= (1/max_runs);
dev_run_string += String(Math.sqrt(data_diff)) + "\n";
var turn_diff = 0;
for(let r of radians_storage) {
turn_diff += Math.pow(r[i]-mean_turns[i],2);
}
turn_diff *= (1/max_runs);
dev_turn_string += String(Math.sqrt(turn_diff)) + "\n";
}
console.log(data_string);
console.log(turnString);
console.log(dev_run_string);
console.log(dev_turn_string);
console.log(max_updates);
console.log(min_updates);
console.log(max_turns);
console.log(min_turns);
}
function restart() {
let imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
for (var i = 3; i < imgData.data.length; i += 4) {
if(run_count == 0 ) opacity[parseInt(((i+1)/4)-1)] = imgData.data[i];
else opacity[parseInt(((i+1)/4)-1)] += imgData.data[i];
}
if(run_count == max_runs-1) {
for(let i in opacity) opacity[i] = opacity[i]/max_runs;
display_data();
let c = document.getElementById("heatmap");
let ct = c.getContext("2d");
let imgData = ct.getImageData(0,0,c.width,c.height);
for (var i = 0; i < imgData.data.length; i += 4) {
let o = Math.round( opacity[((i+3+1)/4)-1] );
imgData.data[i] = Math.min(o+20,255);
imgData.data[i+1] = 0;
imgData.data[i+2] = Math.max(250-o,0);
imgData.data[i+3] = 200;
}
ct.putImageData(imgData,0,0);
} else {
addRobot();
ctx.clearRect(0,0,canvas.width,canvas.height);
data_storage.push([]);
radians_storage.push([]);
run_count++;
steps = 0;
last_percentage = 0.01;
percentage = 0;
current_p = 0;
interval = setInterval(run,refresh_rate);
}
}
function run(){
c.move();
c.render();
steps++;
percentage = pixels(ctx);
if(percentage>last_percentage) {
data_storage[run_count].push(steps);
radians_storage[run_count].push(0.5*c.totalAng/Math.PI);
last_percentage = last_percentage + 0.01;
}
if(last_percentage > 0.9501) {
//console.log(data_storage[run_count].length + " " +(Math.floor(0.95*100)/100));
clearInterval(interval);
restart();
}
}
function pixels(ctx){
count=0;
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
for (var i=3;i<imgData.data.length;i+=4) {
if(imgData.data[i]>0)count++;
}
return count/(imgData.data.length/4);
}
var interval = setInterval(run,refresh_rate);
</script>
</body>
</html>