This repository has been archived by the owner on Oct 24, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
67 lines (61 loc) · 1.74 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
<!DOCTYPE html>
<html>
<head>
<title>Gaussian Background</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#background {
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script src="./js/vendor/stackblur.js"></script>
<!--<script src="./js/vendor/fastblur.js"></script>-->
<!--<script src="./js/vendor/integralblur.js"></script>-->
<!--<script src="./js/vendor/stackboxblur.js"></script>-->
<script src="./js/raf.js"></script>
<script src="./js/gaussianbackground.production.js"></script>
<script>
var gaussianBackground;
function load()
{
var blue = [
{ orbs: 4, radius: 20, maxVelocity: .2, color: '#245ca7', columns: 2 },
{ orbs: 5, radius: 15, maxVelocity: .2, color: '#2176c7' },
{ orbs: 7, radius: 12, maxVelocity: .2, color: '#149dee' },
{ color: '#b6d7fd' }
];
var purple = [
{ orbs: 4, radius: 20, maxVelocity: .2, color: '#3e1969', columns: 2 },
{ orbs: 5, radius: 15, maxVelocity: .2, color: '#6f2b9b' },
{ orbs: 8, radius: 10, maxVelocity: .2, color: '#9f3da0' },
{ color: '#c292e8' }
];
var red = [
{ orbs: 4, radius: 20, maxVelocity: .2, color: '#710512', columns: 2 },
{ orbs: 5, radius: 15, maxVelocity: .2, color: '#b32d45' },
{ orbs: 8, radius: 10, maxVelocity: .2, color: '#ce534b' },
{ color: '#f4b685' }
];
var colorArray = [blue, purple, red];
gaussianBackground = GaussianBackground(document.getElementById('background'), colorArray[Math.floor(Math.random() * colorArray.length)], {
renderWidth: 75,
renderHeight: 50,
blurRadius: 15,
fpsCap: 15
});
}
</script>
</head>
<body onload="load()">
<canvas id="background"></canvas>
</body>
</html>