-
Notifications
You must be signed in to change notification settings - Fork 1
/
index-module-starfield.html
111 lines (108 loc) · 3.88 KB
/
index-module-starfield.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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>Warp Starfield 2 - JavaScript and HTML5 Canvas demo by Kevin Roast #html5 #javascript</title>
<style>
body {
background-color: #000;
font-family: "Proxima Nova", Arial;
color: white;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
// requestAnimFrame shim
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback);
};
})();
// remove frame margin and scrollbars when maxing out size of canvas
document.body.style.margin = "0px";
document.body.style.overflow = "hidden";
// get dimensions of window and resize the canvas to fit
var width = window.innerWidth,
height = window.innerHeight,
canvas = document.getElementById("c"),
mousex = width / 2,
mousey = height / 2;
canvas.width = width;
canvas.height = height;
// get 2d graphics context and set global alpha
var G = canvas.getContext("2d");
G.globalAlpha = 0.25;
// setup aliases
var Rnd = Math.random,
Sin = Math.sin,
Floor = Math.floor;
// constants and storage for objects that represent star positions
var warpZ = 25,
units = 250,
stars = [],
cycle = 0,
Z = 0.025 + (1 / 25 * 2);
// function to reset a star object
function resetstar(a) {
a.x = (Rnd() * width - (width * 0.5)) * warpZ;
a.y = (Rnd() * height - (height * 0.5)) * warpZ;
a.z = warpZ;
a.px = 0;
a.py = 0;
}
// initial star setup
for (var i = 0, n; i < units; i++) {
n = {};
resetstar(n);
stars.push(n);
}
// star rendering anim function
var rf = function() {
// clear background
G.fillStyle = "#000";
G.fillRect(0, 0, width, height);
// mouse position to head towards
var cx = (mousex - width / 2) + (width / 2),
cy = (mousey - height / 2) + (height / 2);
// update all stars
var sat = Floor(Z * 500); // Z range 0.01 -> 0.5
if (sat > 100) sat = 100;
for (var i = 0; i < units; i++) {
var n = stars[i], // the star
xx = n.x / n.z, // star position
yy = n.y / n.z,
e = (1.0 / n.z + 1) * 2; // size i.e. z
if (n.px !== 0) {
// hsl colour from a sine wave
G.strokeStyle = "hsl(" + ((cycle * i) % 360) + "," + sat + "%,80%)";
G.lineWidth = e;
G.beginPath();
G.moveTo(xx + cx, yy + cy);
G.lineTo(n.px + cx, n.py + cy);
G.stroke();
}
// update star position values with new settings
n.px = xx;
n.py = yy;
n.z -= Z;
// reset when star is out of the view field
if (n.z < Z || n.px > width || n.py > height) {
// reset star
resetstar(n);
}
}
// colour cycle sinewave rotation
cycle += 0.01;
requestAnimFrame(rf);
};
requestAnimFrame(rf);
</script>
</body>
</html>