animated fractals

src/client/draw.ts

@@ -8,12 +8,14 @@ import {initVertexAttribs} from './vertexattrib';
  * @param {any} buffers the buffers to draw
  * @param {number} params various parameterss
  * @param {any} texture the texture to load
+ * @param {number} now the current time
  */
 export function drawScene(gl: any,
 	programInfo: any,
 	buffers: any,
 	params: any,
-	texture: any) {
+	texture: any,
+	now: number) {
 	gl.clearColor(0.0, 0.0, 0.0, 1.0);
 	gl.clearDepth(1.0);
 	gl.enable(gl.DEPTH_TEST);
@@ -26,6 +28,7 @@ export function drawScene(gl: any,
 	gl.activeTexture(gl.TEXTURE0);
 	gl.bindTexture(gl.TEXTURE_2D, texture);
 	gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
+	gl.uniform1f(programInfo.uniformLocations.time, now);
 
 	const [
 		projectionMatrix,

src/client/init.ts

@@ -71,6 +71,8 @@ export function setProgramInfo(context: any) {
 				context.shaderProgram, 'unormalModelMatrix'),
 			uSampler: context.gl.getUniformLocation(
 				context.shaderProgram, 'uSampler'),
+			time: context.gl.getUniformLocation(
+				context.shaderProgram, 'time'),
 		},
 	};
 }

src/client/main.ts

@@ -66,7 +66,8 @@ async function main() {
 			context.programInfo,
 			context.buffers,
 			context.params,
-			context.texture);
+			context.texture,
+			now);
 		requestAnimationFrame(render);
 	}
 	uiUpdateParams(context.params);

src/client/shaders/fractal.frag

@@ -4,6 +4,7 @@ varying highp vec2 vTextureCoord;
 varying highp vec4 vNormal;
 varying highp vec3 vPosition;
 uniform sampler2D uSampler;
+uniform float time;
 
 vec2 cinv(in vec2 z)
 {
@@ -37,20 +38,21 @@ vec3 extremize(vec3 v, float n) {
 }
 
 void main() {
-    vec2 a0 = vec2(sin(16.) * 1.0 + 5., 0.);
-    vec2 a1 = vec2(sin(17.) * 2.0, 0.);
-    vec2 a2 = vec2(sin(18.) * 3.0, 0.);
-    vec2 a3 = vec2(sin(19.) * 4.0, 0.);
-    vec2 a4 = vec2(sin(1.1) * 5.0, 0.);
-    vec2 a5 = vec2(sin(1.2) * 6.0, 0.);
-    vec2 a6 = vec2(sin(1.3) * 7.0, 0.);
-    vec2 a7 = vec2(sin(1.4) * 8.0, 0.);
-    vec2 a8 = vec2(sin(15.) * 9.0, 0.);
-    vec2 a9 = vec2(sin(16.) * 10.0, 0.);
-    vec2 a10 = vec2(sin(17.) * 11.0, 1.);
+	float slowTime = time / 20.;
+    vec2 a0 = vec2(sin(16. * slowTime) * 1.0 + 5., 0.);
+    vec2 a1 = vec2(sin(17. * slowTime) * 2.0, 0.);
+    vec2 a2 = vec2(sin(18. * slowTime) * 3.0, 0.);
+    vec2 a3 = vec2(sin(19. * slowTime) * 4.0, 0.);
+    vec2 a4 = vec2(sin(1.1 * slowTime) * 5.0, 0.);
+    vec2 a5 = vec2(sin(1.2 * slowTime) * 6.0, 0.);
+    vec2 a6 = vec2(sin(1.3 * slowTime) * 7.0, 0.);
+    vec2 a7 = vec2(sin(1.4 * slowTime) * 8.0, 0.);
+    vec2 a8 = vec2(sin(15. * slowTime) * 9.0, 0.);
+    vec2 a9 = vec2(sin(16. * slowTime) * 10.0, sin(slowTime));
+    vec2 a10 = vec2(sin(17. * slowTime) * 11.0, 1. +  sin(slowTime) * 0.2);
 
-    vec2 a = vec2(1.0, 1. + sin(0.16) * 0.002);
-    vec2 c = vec2(0.01, 0.1);
+    vec2 a = vec2(1.0, 1. + sin(0.16 * slowTime) * 0.002);
+    vec2 c = vec2(0.01, sin(slowTime) / 10.);
     // Normalized pixel coordinates (from 0 to 1)
     vec2 z = cmul((vTextureCoord/vec2(1., 1.) - 0.5), vec2(4., 0.));
 	vec2 init_z = z;