-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (81 loc) · 2.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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viz3D</title>
<link rel="stylesheet" href="stylin.css">
<script src="utils.js"></script>
<script src="libs/three.js"></script>
<script src="libs/dat.gui.js"></script>
<script src="libs/Stats.js"></script>
<script src="libs/OrbitControls.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.min.js'></script>
</head>
<script id="vertex_shader" type="x-shader/x-vertex">
varying float x;
varying float y;
varying float z;
uniform float u_time;
uniform float u_amplitude;
uniform float[64] u_data_arr;
void main() {
x = abs(position.x);
y = abs(position.y);
float floor_x = round(x);
float floor_y = round(y);
float x_multiplier = (32.0 - x) / 7.0;
float y_multiplier = (32.0 - y) / 4.0;
//float z = sin(abs(position.x) + abs(position.y) + u_time);
z = sin(u_data_arr[int(floor_x)] / 10.0 - u_data_arr[int(floor_y)] / 20.0) * u_amplitude;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, z ,1.0);
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
varying float x;
varying float y;
varying float z;
uniform vec2 u_resolution;
uniform float u_time;
float plot(vec2 st) {
return smoothstep(0.02, 0.0, abs(st.y - st.x));
}
vec2 brickTile(vec2 _st, float _zoom){
_st *= _zoom;
// Here is where the offset is happening
_st.x += step(1., mod(_st.y,2.0)) * 0.5;
return fract(_st);
}
float box(vec2 _st, vec2 _size){
_size = vec2(0.5)-_size*0.5;
vec2 uv = smoothstep(_size,_size+vec2(1e-4),_st);
uv *= smoothstep(_size,_size+vec2(1e-4),vec2(1.0)-_st);
return uv.x*uv.y;
}
void main() {
//gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
//gl_FragColor = vec4((32.0 - abs(x)) / 32.0, (32.0 - abs(z)) / 32.0, (abs(x + y) / 2.0) / 32.0, 1.0);
vec2 st = gl_FragCoord.xy;
vec3 color = vec3(0.0, 1.0, 0.0);
// Modern metric brick of 215mm x 102.5mm x 65mm
// http://www.jaharrison.me.uk/Brickwork/Sizes.html
// st /= vec2(2.15,0.65)/1.5;
// Apply the brick tiling
//st = brickTile(st, u_resolution.x * u_resolution.y);
//color = vec3(box(st,vec2(u_resolution.xy)));
// Uncomment to see the space coordinates
// color = vec3(st,0.0);
gl_FragColor = vec4(color,sin(z * u_time) );
}
</script>
<body>
<main>
<audio src="sbd.wav">
</audio>
<button id="playbutton" data-playing="false" role="switch" aria-checked="false">
<span>Play/Pause</span>
</button>
</main>
<script src="viz.js"></script>
</body>
</html>