-
Notifications
You must be signed in to change notification settings - Fork 0
/
Background 1.html
112 lines (92 loc) · 2.07 KB
/
Background 1.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<canvas id="canv" width="1263" height="427"></canvas>
<script>
var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var num = w * h / 810;
var arr = [];
var i = 0;
while (arr.length < num) {
arr.push({
x: (Math.random() * w) | 0,
y: (Math.random() * h) | 0,
vx: 0,
vy: 0
});
}
function _X(foo) {
return Math.sin(foo.y / 45 ) / 0.3;
}
function _Y(foo) {
return Math.sin(foo.x / 45 ) / 0.3;
}
function upd(bar) {
var n = arr[i];
n.x += n.vx;
n.y += n.vy;
if (n.x < 0) {
n.x = w + n.x;
} else if (n.x >= w) {
n.x -= w;
}
if (n.y < 0) {
n.y = h + n.y;
} else if (n.y >= h) {
n.y -= h;
}
n.vy = _Y(n);
n.vx = _X(n);
}
function draw(bar) {
var n = arr[i];
var col = 'hsla(' + i + ',90%, 60%, 1)';
//outer rings
$.beginPath();
$.fillStyle = col;
$.globalAlpha = .1;
$.arc(n.x, n.y, 15 / Math.max((n.vx * n.vx + n.vy * n.vy), 0.5), 0, 2 * Math.PI, 0);
$.closePath();
$.fill();
//inner rings
$.beginPath();
$.globalAlpha = 1;
$.fillStyle = col;
$.arc(n.x, n.y, 8 / Math.max((n.vx * n.vx + n.vy * n.vy), 0.8), 0, 2 * Math.PI, 0);
$.closePath();
$.fill();
}
function go() {
$.fillStyle = 'hsla(0,0%,0%,1)';
$.fillRect(0, 0, w, h);
for (i = 0; i < num; i++) {
upd(i);
draw(i);
}
};
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
run();
function run() {
window.requestAnimFrame(run);
go();
}
</script>
</body>
</html>