-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
59 lines (56 loc) · 1.65 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
<html>
<head>
<title>temperature-map-js demo page</title>
<meta charset="UTF-8">
<style>
body { margin: 0; }
.tmg-point {
background-color:gray;
color: white;
border-radius: 100px;
padding: 4px;
border: 1px solid white;
font-family: sans-serif;
font-size: 15px;
}
</style>
<script src='temperature-map-gl.min.js'></script>
<script>
function run() {
var q = 1;
for(var i=0; i < 3;++i){
var image = document.getElementById("map-image"+i);
var temperature_map = new temperature_map_gl(image, {
framebuffer_factor: q,
show_points: i == 1,
});
var points = [];
var w = temperature_map.canvas.width;
var h = temperature_map.canvas.height;
var min_temp = 0;
var max_temp = 100;
for(var j=0;j<Math.pow(10,i)*5;++j){
var p = [w*Math.random(), h*Math.random(), (max_temp - min_temp)*Math.random() + min_temp];
points.push(p);
}
var start = performance.now();
temperature_map.set_points(points);
temperature_map.draw();
temperature_map.context.finish();
console.log(points.length+' points at q='+q+' took '+ (performance.now() - start)+' ms');
}
}
</script>
</head>
<body onload='run()'>
<div class='map-container' style='display: inline-block; position:relative;'>
<img id='map-image0' src='symi.png'/>
</div>
<div class='map-container' style='display: inline-block; position:relative; height: 870px; width: 647px'>
<img id='map-image1' src='symi.png'/>
</div>
<div class='map-container' style='display: inline-block; position:relative; height: 870px; width: 647px'>
<img id='map-image2' src='symi.png'/>
</div>
</body>
</html>