-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathJsDla.html
86 lines (84 loc) · 2.75 KB
/
JsDla.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
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
function resize_canvas(){
canvas = document.getElementById("myCanvas");
if (canvas.width < window.innerWidth) {canvas.width = window.innerWidth;}
if (canvas.height < window.innerHeight) {canvas.height = window.innerHeight;}
}
</script>
</head>
<body onresize="resize_canvas()">
<canvas id="myCanvas" width="100%" height="100%"></canvas>
<script>
resize_canvas();
var cells = [];
var count = 600;
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var oldtime = 0;
for (i=0; i<count; i++) {
var cell = new Object();
cell.x = centerX+randomFrom(-centerX,centerX);
cell.y = centerY+randomFrom(-centerY,centerY);
cell.fixed = false;
cells.push(cell);
}
var cell = new Object();
cell.x = centerX; cell.y = centerY; cell.fixed = true;
cells.push(cell);
function randomFrom(min,max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
function draw(time) {
var timenow = time;
var elapsed = timenow-oldtime;
var fps = 1000/elapsed;
oldtime = timenow;
requestAnimationFrame(draw);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 10;
context.clearRect(0, 0, canvas.width, canvas.height);
cells.map(function(cell) {
if (!cell.fixed) {
cell.x += randomFrom(-6,6);
cell.y += randomFrom(-6,6);
}
});
cells.map(function(cell) {
if (!cell.fixed) {
if (cells.some(function(cell2) {
var dist = (cell.x-cell2.x)*(cell.x-cell2.x)+(cell.y-cell2.y)*(cell.y-cell2.y);
return cell2.fixed && (dist < 4*radius*radius) && (dist > 0)
})) {
cell.fixed = true;
}
}
});
cells.map(function(cell) {
context.beginPath();
context.arc(cell.x, cell.y, radius, 0, 2 * Math.PI, false);
context.fillStyle = cell.fixed ? 'red' : 'blue';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();
});
context.fillStyle = "Black";
context.font = "normal 16pt Arial";
context.fillText(fps + " fps", 10, 26);
}
draw();
</script>
</body>
</html>