-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
127 lines (107 loc) · 4.83 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
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>webgl circles</title>
<script src="GLOWCore.js"></script>
<script src="WebGLCircleRenderer.js"></script>
<script src="stats.min.js"></script>
<style type="text/css">
html,body { height: 100%; margin: 0; padding: 0; overflow: hidden; color: white; font-family: sans-serif;}
#container { position: absolute; width: 100%; height: 100%; margin: 0px; padding: 0px; left: 0px; top: 0px; z-index: -1;}
</style>
</head>
<body>
<span style="background-color: rgba(0, 0, 0, 0.5); float: right;">
Number of circles:
<input type="text" size=6 id="numCircles" value="12000" onkeydown="if (event.keyCode == 13) document.getElementById('drawButton').click()"><br>
Max radius: <input type="text" size=3 id="maxRadius" value="25" onkeydown="if (event.keyCode == 13) document.getElementById('drawButton').click()"><br>
Opacity: <input type="text" size=3 id="alpha" value="0.5" onkeydown="if (event.keyCode == 13) document.getElementById('drawButton').click()"><br>
<input type="button" id="drawButton" value="Draw">
</span>
<div id="container"></div>
<script type="text/javascript">
var context, stats, animationID, circleRenderer;
function initPage() {
var container = document.getElementById("container");
context = new GLOW.Context({
width: container.offsetWidth,
height: container.offsetHeight,
alpha: false
});
if (null === context.GL) {
alert("no WebGL");
return false;
}
container.appendChild(context.domElement);
context.setupClear( { red: 0, green: 0, blue: 0 } );
context.GL.enable(context.GL.BLEND);
context.GL.blendFunc(context.GL.SRC_ALPHA,
context.GL.ONE_MINUS_SRC_ALPHA);
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
return true;
}
function initCircles() {
if (animationID !== undefined) {
cancelAnimationFrame(animationID);
circleRenderer.dispose();
}
var numPoints = parseInt(document.getElementById("numCircles").value);
var minRadius = 5;
var maxRadius = parseInt(document.getElementById("maxRadius").value);
var alpha = parseFloat(document.getElementById("alpha").value);
var maxVelocity = 1.5;
var bands = 3;
var bandWidth = 0.75
var pointsPerBand = (numPoints / bands) | 0;
var colors = new Float32Array(numPoints * 3);
var xs = new Float32Array(numPoints);
var ys = new Float32Array(numPoints);
var radii = new Float32Array(numPoints);
var phase = new Float32Array(numPoints);
for (var band = 0; band < bands; band++) {
for (var i = 0; i < pointsPerBand; i++) {
var point = (band * pointsPerBand) + i;
colors[(point * 3) + ((band + 0) % 3)] = 0.8 * (i / pointsPerBand);
colors[(point * 3) + ((band + 1) % 3)] = 1;
colors[(point * 3) + ((band + 2) % 3)] = 0.8 * (1 - (i / pointsPerBand));
xs[point] = (i / pointsPerBand) * context.width;
ys[point] = ((band / bands) * context.height) + (Math.random() * ((context.height * bandWidth) / bands));
radii[point] = minRadius + (Math.random() * (maxRadius - minRadius));
phase[point] = Math.random() * Math.PI * 2;
}
}
circleRenderer = new WebGLCircleRenderer(context, numPoints,
colors, radii, alpha);
var theta = 0;
var dTheta = 0.01;
var multiplier = 1.5;
function step() {
stats.begin();
theta = (theta + dTheta) % (Math.PI * 2);
for (var i = 0; i < numPoints; i++) {
ys[i] += Math.sin(theta + phase[i]) * multiplier;
}
circleRenderer.setPositions(xs, ys);
context.cache.clear();
context.clear();
circleRenderer.draw();
animationID = requestAnimationFrame(step);
stats.end();
}
animationID = requestAnimationFrame(step);
}
if (initPage()) {
var drawButton = document.getElementById("drawButton");
drawButton.onclick = initCircles;
initCircles();
}
</script>
</body>
</html>