forked from infusion/HTML5-Experiments
-
Notifications
You must be signed in to change notification settings - Fork 0
/
follow-the-swarm.html
99 lines (77 loc) · 2.33 KB
/
follow-the-swarm.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Follow the Swarm</title>
<script type="text/javascript">
/**
* @license HTML5 experiment Follow the swarm
* http://www.xarg.org/project/follow-the-swarm/
*
* Copyright (c) 2011, Robert Eisele (robert@xarg.org)
* Dual licensed under the MIT or GPL Version 2 licenses.
**/
var ctx = null;
var img = null;
var cnt = 10;
var col = 0;
var mouse = [1,1];
var color = [];
document.onmousemove = function (e) {
mouse[0] = e.pageX / 15;
mouse[1] = e.pageY / -5;
}
function init() {
img = document.getElementById('canvas');
ctx = img.getContext('2d');
window.setInterval(clock, 10);
}
function gradientColor() {
var pos = (col++) & 127;
if (pos == 0) {
color[0] = {r:Math.random() * 255|0, g:Math.random() * 255|0, b:Math.random() * 255|0};
color[1] = {r:Math.random() * 255|0, g:Math.random() * 255|0, b:Math.random() * 255|0};
}
return ['rgb(',
((color[0].r + ((color[1].r - color[0].r) / 128) * pos)|0), ',',
((color[0].g + ((color[1].g - color[0].g) / 128) * pos)|0), ',',
((color[0].b + ((color[1].b - color[0].b) / 128) * pos)|0), ')'].join('');
}
function clock() {
var i = 44;
ctx.fillRect(0, 0, 800, 450, ctx.drawImage(img, 10, 2, 780, 448, 0, 3, 800, 450), ctx.fillStyle='rgba(0, 0, 0, 0.01)');
cnt+= 44;
ctx.fillStyle = gradientColor();
while (i--) {
ctx.fillRect(i * 40 + 40 - mouse[0], 250 - mouse[1] +Math.sin(cnt + i + Math.sin(i) * Math.sin((cnt << 1) - (i >> 3))) * 50, 20, 1);
}
}
</script>
<style>
canvas {
border:15px solid #222;
background:#000;
-moz-border-radius:12px;
-webkit-border-radius:12px;
-webkit-box-shadow:0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
box-shadow:0 0 20px #000;
}
body {
background:#111;
margin-top:50px;
text-align:center;
}
#xarg > img {
position:fixed;
right:20px;
bottom:20px;
z-index:1000;
border:0;
}
</style>
</head>
<body onload="init()">
<canvas width="800" height="450" id="canvas"></canvas>
</body>
</html>