-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwaves.html
97 lines (95 loc) · 3.15 KB
/
waves.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
<!doctype html>
<html lang="en">
<head>
<title>Quasicrystalline Waves</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#333" />
<link rel="icon" sizes="400x400" href="thumb-waves.jpg" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="math.js"></script>
<script type="text/javascript" src="anima.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var glc = new Anima.GL();
var N = parseInt(window.location.hash.slice(1)) || 5;
glc.setupCallback = function () {
var gl = this.gl;
gl.clearColor(0,0,0,0);
//gl.disable(gl.DEPTH_TEST);
//gl.disable(gl.BLEND);
this.vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
1, 1, 0,
-1, 1, 0,
1, -1, 0,
-1, -1, 0,
]), gl.STATIC_DRAW);
this.uBasis = new Array(2 * N);
for (var i = 0; i < N; i++) {
this.uBasis[2*i] = Math.cos(2 * Math.PI * i / N);
this.uBasis[2*i + 1] = Math.sin(2 * Math.PI * i / N);
}
this.resize(500, 500);
};
glc.draw = function () {
var gl = glc.gl;
if (!gl) { return false; }
var prog = glc.shaders.main;
//gl.disable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(prog);
var pos = gl.getAttribLocation(prog, 'aVPosition');
gl.enableVertexAttribArray(pos);
gl.vertexAttribPointer(pos, 3, gl.FLOAT, false, 0, 0);
gl.uniform2fv(gl.getUniformLocation(prog, 'uBasis'), glc.uBasis);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
};
glc.addProgram('main',
"attribute vec3 aVPosition; varying mediump vec2 vTexCoord;" +
"void main(void) { gl_Position = vec4(aVPosition, 1.0); vTexCoord = vec2(aVPosition); }",
"uniform mediump vec2 uBasis[" + N + "]; varying mediump vec2 vTexCoord;" +
"void main(void) {" +
"mediump float a = 0.0;" +
"for (int i = 0; i < " + N + "; i++) { a += cos(dot(uBasis[i], " + (10 * N).toFixed(2) + " * vTexCoord)); }" +
"a = a * " + 0.5/N + " + 0.5;" +
"gl_FragColor = vec4(vec3(a), 1.0);" +
"}");
glc.bindCanvas($('#main')[0]);
glc.draw();
$('#input_n').val(N);
$('#input_n').on('change', function (e) {
window.location.hash = '#' + $(this).val();
window.location.reload();
});
});
window.onerror = function (a, b, c) {
$('#errors').text($('#errors').text() + a + b + c);
};
</script>
<style type="text/css">
body { background: #666; }
#canvascontainer {
background: rgba(0, 0, 0, 1.0);
display: block; margin: 0em auto; position: relative;
width: 500px; height: 500px;
}
canvas {
background: rgba(0,0,0,0);
display: block; position: absolute; left: 0px; top: 0px;
z-index: 1;
}
#aform { text-align: center; }
</style>
</head>
<body>
<div id="canvascontainer">
<canvas width="300" height="300" id="main">
<img src="thumb-waves.jpg" alt="Preview" />
This page requires HTML5 Canvas support.
</canvas>
</div>
<div id="aform"><input type="text" id="input_n" /></div>
<div id="errors"></div>
</body>
</html>