Add spectrogram shader. Update README.

Author: bradleybauer

docs/README.md

@@ -11,13 +11,38 @@ visualizers might look like when visualizing the same sound.
 Here is a youtube video of the app displaying a waveform.<br>
 <a href="https://youtu.be/yxGM7H1RFRA">https://youtu.be/yxGM7H1RFRA</a>
 
-![](example6.PNG)
-![](example0.PNG)
-![](example3.png)
-![](example1.png)
-![](example2.png)
-![](example4.png)
-![](example5.png)
+<p align="center">
+  <img src="example6.PNG" />
+</p>
+
+<p align="center">
+  <img src="example7.PNG" />
+</p>
+
+<p align="center">
+  <img src="example0.PNG" />
+</p>
+
+<p align="center">
+  <img src="example3.png" />
+</p>
+
+<p align="center">
+  <img src="example1.png" />
+</p>
+
+<p align="center">
+  <img src="example2.png" />
+</p>
+
+<p align="center">
+  <img src="example4.png" />
+</p>
+
+<p align="center">
+  <img src="example5.png" />
+</p>
+
 
 # Usage
 

docs/example7.PNG

@@ -0,0 +1,12 @@
+in vec2 p;
+out vec4 c;
+void main () {
+    if (gl_FragCoord.x >= iRes.x-1) {
+        float freq = log(1. + texture(iFreqL, (exp2(p.y / 1.5) - 1.) ).r);
+        c = vec4(freq);
+    }
+    else {
+        vec4 adjcol = texture(ia, p + vec2(1. / iRes.x, 0.));
+        c = vec4(adjcol);
+    }
+}

src/shaders/spectrogram/a.frag

@@ -0,0 +1,32 @@
+layout(triangle_strip, max_vertices = 6) out;
+out vec2 p;
+void main() {
+    /* 1------3
+       | \    |
+       |   \  |
+       |     \|
+       0------2 */
+    const vec2 p0 = vec2(-1., -1.);
+    const vec2 p1 = vec2(-1., 1.);
+    gl_Position = vec4(p0, 0., 1.);
+    p = p0 * .5 + .5;
+    EmitVertex(); // 0
+    gl_Position = vec4(p1, 0., 1.);
+    p = p1 * .5 + .5;
+    EmitVertex(); // 1
+    gl_Position = vec4(-p1, 0., 1.);
+    p = -p1 * .5 + .5;
+    EmitVertex(); // 2
+    EndPrimitive();
+
+    gl_Position = vec4(-p1, 0., 1.);
+    p = -p1 * .5 + .5;
+    EmitVertex(); // 2
+    gl_Position = vec4(p1, 0., 1.);
+    p = p1 * .5 + .5;
+    EmitVertex(); // 1
+    gl_Position = vec4(-p0, 0., 1.);
+    p = -p0 * .5 + .5;
+    EmitVertex(); // 3
+    EndPrimitive();
+}

src/shaders/spectrogram/a.geom

@@ -0,0 +1,13 @@
+in vec2 p;
+out vec4 c;
+
+float hash(float p) {
+	vec3 p3  = fract(vec3(p) * 443.8975);
+    p3 += dot(p3, p3.yzx + 19.19);
+    return fract((p3.x + p3.y) * p3.z);
+}
+
+void main () {
+    c = texture(ia, p);
+    c.a = 1.;
+}

src/shaders/spectrogram/image.frag

@@ -0,0 +1,32 @@
+layout(triangle_strip, max_vertices = 6) out;
+out vec2 p;
+void main() {
+    /* 1------3
+       | \    |
+       |   \  |
+       |     \|
+       0------2 */
+    const vec2 p0 = vec2(-1., -1.);
+    const vec2 p1 = vec2(-1., 1.);
+    gl_Position = vec4(p0, 0., 1.);
+    p = p0 * .5 + .5;
+    EmitVertex(); // 0
+    gl_Position = vec4(p1, 0., 1.);
+    p = p1 * .5 + .5;
+    EmitVertex(); // 1
+    gl_Position = vec4(-p1, 0., 1.);
+    p = -p1 * .5 + .5;
+    EmitVertex(); // 2
+    EndPrimitive();
+
+    gl_Position = vec4(-p1, 0., 1.);
+    p = -p1 * .5 + .5;
+    EmitVertex(); // 2
+    gl_Position = vec4(p1, 0., 1.);
+    p = p1 * .5 + .5;
+    EmitVertex(); // 1
+    gl_Position = vec4(-p0, 0., 1.);
+    p = -p0 * .5 + .5;
+    EmitVertex(); // 3
+    EndPrimitive();
+}

src/shaders/spectrogram/image.geom

@@ -0,0 +1,22 @@
+{
+	"initial_window_size":[350,175],
+	"image": {
+		"geom_iters":1,
+		"clear_color":[0,0,0]
+	},
+	"buffers": {
+		"a": {
+			"size":"window_size",
+			"geom_iters":1,
+			"clear_color":[0,0,0]
+		}
+	},
+	// TODO rendering two b's doesnt help because I b doesn't read from b, it reads from a, but it needs to read from b on the second iteration
+	"audio_enabled":true,
+	"audio_options": {
+		"fft_sync":true,
+		"diff_sync":true,
+		"fft_smooth":0.5,
+		"wave_smooth":0.8
+	}
+}