merttoka/index.html

## index.html
<html>
	<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.js"></script>
	<body>
	<canvas class="glslCanvas" data-fragment="
#ifdef GL_ES
precision highp float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec2 random2(vec2 st){
    st = vec2( dot(st,vec2(127.1,311.7)),
              dot(st,vec2(269.5,183.3)) );
    return -1.0 + 2.0*fract(sin(st)*43758.5453123);
}

// Value Noise by Inigo Quilez - iq/2013
// https://www.shadertoy.com/view/lsf3WH
// -- Animation added
float noise(vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);

    vec2 u = f*f*(3.0-2.0*f);

    return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
                     dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x)*sin(u_time)*st.y,
                mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
                     dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x)*cos(u_time)*st.y, u.y);
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;

    st -= 0.5;
    st *= 7.+sin(u_time)*.5;	// 7x7 grid
    st.x = u_time+st.x; 		// Sliding animation

    vec3 color  = vec3(fract(noise(st)));
    vec3 color2 = vec3(noise(st));

    gl_FragColor = vec4(1.-color.r, color.g, color.b, 0.75) + vec4(vec3(color2.r, color2.g*2.,color2.b),0.25);
}
	"
	width="1000" height="500"> </canvas>
	</body>
	</html>
	<html>
	<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.js"></script>
	<body>
	<canvas class="glslCanvas" data-fragment="
	#ifdef GL_ES
	precision highp float;
	#endif

	uniform vec2 u_resolution;
	uniform vec2 u_mouse;
	uniform float u_time;

	vec2 random2(vec2 st){
	st = vec2( dot(st,vec2(127.1,311.7)),
	dot(st,vec2(269.5,183.3)) );
	return -1.0 + 2.0fract(sin(st)43758.5453123);
	}

	// Value Noise by Inigo Quilez - iq/2013
	// https://www.shadertoy.com/view/lsf3WH
	// -- Animation added
	float noise(vec2 st) {
	vec2 i = floor(st);
	vec2 f = fract(st);

	vec2 u = ff(3.0-2.0*f);

	return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
	dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x)sin(u_time)st.y,
	mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
	dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x)cos(u_time)st.y, u.y);
	}

	void main() {
	vec2 st = gl_FragCoord.xy/u_resolution.xy;
	st.x *= u_resolution.x/u_resolution.y;

	st -= 0.5;
	st = 7.+sin(u_time).5; // 7x7 grid
	st.x = u_time+st.x; // Sliding animation

	vec3 color = vec3(fract(noise(st)));
	vec3 color2 = vec3(noise(st));

	gl_FragColor = vec4(1.-color.r, color.g, color.b, 0.75) + vec4(vec3(color2.r, color2.g*2.,color2.b),0.25);
	}
	"
	width="1000" height="500"> </canvas>
	</body>
	</html>